First install node js
npm install -g create-react-app
create-react-app myapp (To create app folder)
npm start (in current folder of created app),( it will run our app in browser)
//React new app directory structure
manifest.json file(PW: for progressive web app: like you find option in many apps like add app to home
screen etc.)
src folder will have changes
index.js in src folder render components in public’ folder of index.html file
App.js is component file means reusability of function and call compent in index.js file
to ru app through command in terminal
npm start
//Functional component (jsx =js+html) just render single parent means after the < div ></div> we
cannot write another div after this but inside we can write many div as child and we avoid
react.create element method
<div>
{/*<h3>Name:</h3><h3>Nazir Hussain</h3>
<h3>Age:</h3><h3>55 years</h3>*/}
<div>Name:Mehwish Nazir</div>
<div>Age: 21 years</div>
<div>Class Component</div>
<Man/>
</div>
We can’t write
<div>
{/*<h3>Name:</h3><h3>Nazir Hussain</h3>
<h3>Age:</h3><h3>55 years</h3>*/}
</div>
<div>
{/*<h3>Name:</h3><h3>Nazir Hussain</h3>
<h3>Age:</h3><h3>55 years</h3>*/}
</div>
//rendering i ,h2(italix, h2 tag with
react.craeteLElement method)
//it is dificult and traditional method
class Person extends Component{
constructor(props){
super(props)
}
render(){
return React.createElement(
"div",
{class:"App-header"},
React.createElement(
'h1',
null,
React.createElement('i',null,"It is traditional/difficult
method instaed of JSX"))
);
}
}
State management in ES6 class :
State is private object within ES6 class accessible receive prop (property)or argument and
return jsx (js+html)
./component/Person
(./ means go out of folder indide directory then component then person.js)
Class component
Componenets can receive props
Fucntional component:
We can import P for person in any file but to avoid this , and we have to restrict that is must be
exported with same name Person we should remove
Export deafulat person and write keyword export with function name
These are not inherited from anyone
Props
Props are Object Componenets can receive props and these are used for sending data from parent to
child. Strore data which its parent has send to it.parent can change prop,but child cannot
To create fast functional component
install ES7 snippet from extension and writ rfc to create functional component
State in React JS:
State is buil-In object of class
Functions are stateless but by hooks
Componenet data is hold by state and state is not accessible , it is private data ,but if you want to access
then use props
Event Handling & Event Binding Methos:
1. With arrow operator event binding
buttonClickHandler=()=>{
alert("Hello");
//console.log(this.state);
}
<button type="button" onClick={this.buttonClickHandler}>Click</button>
//
buttonClickHandler(){
console.log(this.state);
}
//if we don’t write arrow with function it give error on “this”, for this we do
event binding with event handling
To avoid event binding we write arrws with functions
so we change hhere for binding
<button type="button" onClick={()=>this.buttonClickHandler}>Click</button>
3. Second Methon(Inline Binding)
<button type="button"
onClick={this.buttonClickHandler.bind(this)}>Click</button>
4.Constructor Binding
class App extends Component{
constructor(props){
super(props);
this.props=props;
this.state={
demo:"Testing" //just to view data in console log and verifying that event
binding is successfull
};
this.buttonClickHandler=this.buttonClickHandler.bind(this);
}
buttonClickHandler=()=>{
alert("Hello");
console.log(this.state);
}
render(){
Browser Router
Wrap components
Switch inside Browse Route
When URL maps it terminate
<BrowserRouter>
<Switch>
<Route path=”/Home” exac></Route>
</Switch>
</BrowserRouter>
createSlice: The createSlice function from Redux Toolkit allows you to define a Redux slice,
which includes a reducer function and action creators. With createSlice, you can define the
initial state, reducer functions for handling actions, and automatically generate action creators.
npm install @reduxjs/toolkit
