Installation Steps:
1. Install React CLI
npm install create-react-app
create-react-app --version
2. create-react-app directory_name
ex: create-react-app abc
3. Go to working directory
cd abc
npm start
Codes:
/* CC.js */
import { Component } from "react";
class ClassCmp extends Component{
render(){
return(
<h1> This is Component Class</h1>
)
}
}
export default ClassCmp;
/* props.js */
function Student (props)
{
return(
<div>
<h1> Student name is : {props.name}</h1>
<h2> Student email is : {props.email}</h2>
</div>
)
}
export default Student;
/*In index.js file update render method with following component call
<React.StrictMode>
<Student name="Abhilasha" email="a@gmail.com"/>
</React.StrictMode>
*/
/* State.js */
// Variable updation is not reflect in DOM
//Props can't modify once declared by own component
import React from "react";
function State(){
let data="Abhilasha";
function UpdateData()
{
data = "Kadam"; // No update in variable
alert(data);
}
return(
<div className="State">
<h1>State in React</h1>
<h2>Data value : {data}</h2>
<button onClick={UpdateData}>Update Data</button>
</div>
);
}
export default State;
/* State1.js */
import {useState} from "react";
function State1(){
let [data,setData]=useState("Abhilasha");
function UpdateData()
{
setData("Kadam"); //Update in state
}
return(
<div className="State">
<h1>State in React</h1>
<h2>Data value : {data}</h2>
<button onClick={UpdateData}>Update Data</button>
</div>
);
}
export default State1;
/* Styling.js */
import './Styling.css';
function Styling ()
{
return(
<div>
<h1>External Css Styling</h1>
<h2 style={{color:"red"}}>CSS inline styling</h2>
</div>
)
}
export default Styling;
/* Styling.css */
h1 {
color:blue;
background-color: aqua;
}
/* routing.js */
First install react-router-dom using following command:
npm install react-router-dom
import React from "react";
import { BrowserRouter as BR, Link, Routes, Route} from "react-router-dom";
function Router() {
return (
<center>
<div>
<BR>
<Link to="/home">Home Page</Link>
<br/>
<Link to="/about">About Page</Link>
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BR>
</div>
</center>
);
}
function Home() {
return (
<div>
<h1>Home</h1>
<p>This is Home Page</p>
</div>
);
}
function About() {
return (
<div>
<h1>About</h1>
<p>This is AboutPage</p>
</div>
);
}
export default Router;
/* useeffect.js */
import React, { useEffect, useState } from "react";
function UseEffect() {
return (
// <CC />
<SU />
);
}
function CC() {
useEffect(() => {
alert("Effect Created"); // useEffect called on component ctreation
})
return (
<h1>UseEffect Hook</h1>
);
}
function SU() {
let [count, setCount] = useState(0);
useEffect(() => {
alert("Effect Created"); // useEffect called on component ctreation
})
return (
<div>
<h1>UseEffect on state update</h1>
<h2>Updated Count : {count}</h2>
<button onClick={() => setCount(count + 1)}>Update Button</button>
</div>
);
}
export default UseEffect;
/* Parentcont.js */
import React,{createContext, useState, useContext} from 'react';
//import ChildContext from './ChildContext';
export const GlobalInfo= createContext();
function ParentContext() {
const [color, setColor]= useState('green')
return (
<GlobalInfo.Provider value = {{appcolor: color}}>
<div>
<h1>Welcome to React</h1>
<ChildContext />
</div>
</GlobalInfo.Provider>
);
}
function ChildContext() {
const {appcolor} = useContext(GlobalInfo);
console.warn("appcolor",appcolor);
return (
<div>
<h2 style={{color: appcolor}}> Context applied to child component</h2>
</div>
);
}
export default ParentContext;
