install node js and npm
run cmd
node -v
npm -v
cls
npm install -g create-react-app
create-react-app --version
npx create-react-app myapp
cd myapp
npm run start
react js is a js librariy that is used to created single page application
features virtual dom, jsx ,components, simplicity, performance,one way data binding
it contains only one parent
components :
types class based and functional components
class based components:
import React,{ Component } from "react";
import "./Practice.css"
class Practice extends Component{
render(){
return(
<div className="me">
<h1>hello i am react</h1>
</div>
);
}
}
export default Practice;
functional components:
=> way 1
import React from "react";
import "./Practice.css"
function Practice (){
return(
<div className="me">
<h1>hello i am react Lorem ipsum dolor sit amet consectetur adipisicing elit. </h1>
</div>
);
}
export default Practice;
=> way 2
const Practice =() =>{
return(
<div className="me">
<h1>hello i am react Lorem ipsum dolor sit amet consectetur adipisicing elit. </h1>
</div>
);
}
export default Practice;
=> way 3
import {Practice} from './components/Practice';
export const Practice =() =>{
return(
<div className="me">
<h1>hello i am react Lorem ipsum dolor sit amet consectetur adipisicing elit. </h1>
</div>
);
}
jsx:al js functions are writeen in curly braced
JSX is basically combination of html and js every element look like html but it is always closed open tags are not allowed in jsx data should be written in one parent div parent div may cosist of subs divs or childs
props:
props are basically react js objects which transfer data from parent to child
<Practice name="ali"></Practice>
functional componenets
export const Practice =(props) =>{
return(
<div className="me">
<h1>hello {props.name}i am react Lorem ipsum dolor sit amet consectetur adipisicing elit. </h1>
</div>
);
}
class based componenets
class Practice extends Component{
constructor(props){
super(props);
this.props=props;
}
render(){
return(
<div className="me">
<div>name:{this.props.name}</div>
</div>
);
}
states:
state is also a keyword in react js state is used in class based function but we can aslo use them in functional components using hooks such as usestate
class Practice extends Component{
constructor(props){
super(props);
this.state={name:"ali",age:"23"};
}
render(){
return(
<div className="me">
<div>name:{this.state.name}<br/>age:{this.state.age}</div>
</div>
);
}
}
export default Practice;
class Practice extends Component{
constructor(props){
super(props);
this.state={name:"ali",age:"23"};
}
changecontent(){
this.setState({name:"chanda"},()=> console.log(this.state));
}
render(){
return(
<div className="me">
<div>name:{this.state.name}<br/>age:{this.state.age}<br/>
<button onClick={this.changecontent.bind(this)}>click me</button></div>
</div>
);
}
}
event handling with bindging:
=>1
class Practice extends Component{
constructor(props){
super(props);
this.state={name:"ali",age:"23"};
}
changecontent(){
this.setState({name:"chanda"},()=> console.log(this.state));
}
render(){
return(
<div className="me">
<div>name:{this.state.name}<br/>age:{this.state.age}<br/>
<button onClick={()=> this.changecontent()}>click me</button></div>
</div>
);
}
}
=>2
class Practice extends Component{
constructor(props){
super(props);
this.state={name:"ali",age:"23"};
}
changecontent(){
this.setState({name:"chanda"},()=> console.log(this.state));
}
render(){
return(
<div className="me">
<div>name:{this.state.name}<br/>age:{this.state.age}<br/>
<button onClick={this.changecontent.bind(this)}>click me</button></div>
</div>
);
}
}
=>3
class Practice extends Component{
constructor(props){
super(props);
this.state={name:"ali",age:"23"};
}
changecontent = () => {
this.setState({name:"chanda"},()=> console.log(this.state));
}
render(){
return(
<div className="me">
<div>name:{this.state.name}<br/>age:{this.state.age}<br/>
<button onClick={this.changecontent()}>click me</button></div>
</div>
);
}
}
export default Practice;
=>4
class Practice extends Component{
constructor(props){
super(props);
this.state={name:"ali",age:"23"};
this.changecontent=this.changecontent.bind(this);
}
changecontent() {
this.setState({name:"chanda"},()=> console.log(this.state));
}
render(){
return(
<div className="me">
<div>name:{this.state.name}<br/>age:{this.state.age}<br/>
<button onClick={this.changecontent}>click me</button></div>
</div>
);
}
}
export default Practice;
adding css
camel letters should be used
style={{color:"pink",fontSize:"50px"}}
changecontent() {
this.setState({name:"chanda"},()=> console.log(this.state));
}
render(){
const style={color:"aquamarine",
fontSize: "larger"
}
return(
<div className="">
<div style={style}>name:{this.state.name}<br/>age:{this.state.age}<br/>
<button onClick={this.changecontent}>click me</button></div>
</div>
);
}
adding css file using import and class
import stylez from "./Practice.module.css"
className={stylez.me}
axios:
npm install axios --s
import axios from "axios"
for dumy api use jsonplaceholder
import React,{ Component } from "react";
import Man from "./Man";
class Event extends Component{
constructor(props){
super(props);
this.state={
person:[
{name:"ali",age:"13"},
{name:"chnada",age:"13"},
{name:"shah g",age:"13"}, {name:"memem",age:"13"}, ]
};
}
render(){
return(
<div>
<Man name={this.state.person[0].name} age={this.state.person[0].age}/>
<Man name={this.state.person[1].name} age={this.state.person[2].age}/>
<Man name={this.state.person[2].name} age={this.state.person[2].age}/>
<Man name={this.state.person[3].name} age={this.state.person[3].age}/>
</div>
);
}
}
export default Event;
import React from "react";
import "./my.css";
import Event from "./Event";
function Man(props){
return(
<div className="mydiv">
name:{props.name} <br/>
age:{props.age}</div>
);
}
export default Man;
toogle :
import React,{ Component } from "react";
import Man from "./Man";
class Event extends Component{
constructor(props){
super(props);
this.state={
person:[
{name:"ali",age:"13"},
{name:"chnada",age:"13"},
{name:"shah g",age:"13"}, {name:"memem",age:"13"}, ],isshow:true,
};
}
tooglehandler(){
this.setState({isshow: !this.state.isshow})
}
render(){
let persons;
persons=this.state.person.map((p,index)=>{
return <Man key={index} name={p.name} age={p.age}/>
});
return(
<div>
<button onClick={this.tooglehandler.bind(this)}>toogle</button>
{this.state.isshow == true? persons :" "}
</div>
);
}
}
export default Event;
deleting data
import React,{ Component } from "react";
import Man from "./Man";
class Event extends Component{
constructor(props){
super(props);
this.state={
person:[
{name:"ali",age:"13"},
{name:"chnada",age:"13"},
{name:"shah g",age:"13"}, {name:"memem",age:"13"}, ],isshow:true,
};
}
tooglehandler(){
this.setState({isshow: !this.state.isshow})
};
deleting =(personindex)=>{
// alert(personindex);
let personscopy=this.state.person;
personscopy.splice(personindex,1);
this.setState({person: personscopy});
};
render(){
let persons;
persons=this.state.person.map((p,index)=>{
return <Man key={index} name={p.name} age={p.age} remove={()=> this.deleting(index)}/>
});
return(
<div>
<button onClick={this.tooglehandler.bind(this)}>toogle</button>
{this.state.isshow == true? persons :" "}
</div>
);
}
}
export default Event;
import React,{ Component } from "react";
import "./my.css";
class Inputform extends Component{
constructor(props){
super(props);
this.state={
name:null,country:null,va:"enter your name"
};
}
datacollector =(event)=>{
console.log(this.state);
event.preventDefault();
let name=event.target.name.value;
let country=event.target.country.value;
this.setState({name,country},()=>console.log(this.state))
};
changehandler =(event)=>{
const va=event.target.value;
this.setState({va});
}
render(){
return(
<div className="mydiv" >
<form action="" onSubmit={this.datacollector}>
<label htmlFor="name">
<input type="text" name="name" value={this.state.va} onChange={this.changehandler} id="" />
</label>
<label htmlFor="country">
<select name="country" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
<input type="submit" />
</form>
</div>
);
}
}
export default Inputform;
