You are on page 1of 44

REACT JS

Create App:
->npx create-react-app my-app

Npm update:
->npm install npm@latest –g

Npm starting:
-> npm start
Git
Without using jsx program
In index.js

import React from 'react';


import ReactDOM from 'react-dom';
const myele=React.createElement(‘h1’,{},”welcome”);
ReactDOM.render(myele,document.getElementById(‘root’));

Instead use this way:


import React from 'react';
import ReactDOM from 'react-dom';
const myele=<h1>sandy</h1>;
ReactDOM.render(myele,document.getElementById("root"))
Output:
TO CREATE CHILD TAGS:

import React from 'react';


import ReactDOM from 'react-dom';
const myelem=<div>
  <h1>hello</h1>
  <h2>world</h2>
</div>
ReactDOM.render(myelem,document.getElementById("root"));

Output:
Adding Style:
import React from 'react';
import ReactDOM from 'react-dom';

var mystyles={
  color:'white',textAlign:'center',
  background:'black'
}
const myelement=<div style={mystyles}>
  <h1>Hello </h1>
  <h2>jai sandy</h2>
</div>
ReactDOM.render(myelement,document.getElementById("root"));
Output:

Functions:

function my(){
  return <h1>sandeep is pro</h1>
}
ReactDOM.render(<my />,document.getElementById("root"));

Function with multiple tags:


function My()
{
  return<div>
    <h1>helllo</h1>
    <h2>world sandepp</h2>
  </div>
}

ReactDOM.render(<My />,document.getElementById("root"));

Function inheritance:

function F1()
{
  return<div>
    <h1>helllo</h1>
    <h2>from f1</h2>
    <hr/>
  </div>
}

function F2()
{
  return<div>
    <h1>helllo</h1>
    <h2>from f2</h2>
    <hr/>
  </div>
}

function F3()
{
  return<div>
    <h1>helllo</h1>
    <h2>from f3</h2>
    <hr/>
  </div>
}
function All()
{
  return <div>
    <F1 />
    <F2 />
    <F3 />
    <h1>hiii from all</h1>
  </div>
}
ReactDOM.render(<All />,document.getElementById("root"));

Output:
Q:
class Classone extends React.Component
{
  render(){
    return <div>
      <h1>Class one</h1>
      <h2>Message</h2>
    </div>
  }
}
class ClassTwo extends React.Component
{
  render(){
    return <div>
      <Classone />
      <h1>Class Two</h1>
      <h2>Message</h2>
    </div>
  }
}

ReactDOM.render(<ClassTwo />,document.getElementById("root"));
Output:

Props: (property) passing attribute value

class Myclass extends React.Component


{
  render()
  {
    return <h1>Hello  {this.props.propname}</h1>
  }
}
ReactDOM.render(<Myclass propname=" this is
working"/>,document.getElementById("root"));

Output:
Example:

class Myclass extends React.Component


{
  render()
  {
    return <h1>Hello this is  {this.props.propname} <hr></hr>studying in
{this.props.clgname}</h1>
  }
}
ReactDOM.render(<Myclass clgname="KL University" propname="Faiz
Ahamed"/>,document.getElementById("root"));
Output:

Example:
class Classone extends React.Component
{
  render(){
    return <h1>Hello {this.props.topic} your name is {this.props.name}</h1>
  }
}
ReactDOM.render(<Classone topic="success"
name="sandeep"/>,document.getElementById("root"));
Output:

Inheritance:
class Parent extends React.Component{
  render()
  {
    return <h1> Hello {this.props.var}</h1>
  }
}
class Child extends React.Component{
  render()
  {
    const a="happy";
    return <Parent var={a} />
  }
}
ReactDOM.render(<Child />,document.getElementById("root"));

Output:
10-03-2022 -------- Thursday

Program:

class Cycle extends React.Component


{
  render()
  {
    return <h3> See my <b> CYCK </b>{this.props.name} it is
{this.props.quality}</h3>

  }
}
ReactDOM.render(<Cycle name="Hercules"
quality="awesome"/>,document.getElementById('root'));
Output:

Program:

class Cstate extends React.Component


{
  render()
  {
    return <h1> This state {this.props.var.sname} city name is
{this.props.var.place}</h1>

  }
}
class City extends React.Component{
  render()
  {
    const a={sname:'AP',place:'Vijayawada'};
    return <Cstate var={a}/>
  }
}
ReactDOM.render(<City />,document.getElementById('root'));

Output:
Props with Functions:
function Flower(props){
  return <h1>Hi, {props.name}</h1>;
}
const ele =<Flower name="Pushpa" />;
ReactDOM.render(ele,document.getElementById('root'));

Output:
MULTIPLE PROPS WITH VALUES:

function One(props){
  return <h1> Look at the {props.name}</h1>
}
function Two()
{
  return(<div>
    <One name="Kid"/>
    <One name="Picture"/>
    <One name="deer"/>
  </div>);
}
ReactDOM.render(<Two />,document.getElementById('root'))

Output:

Program:
class Parent extends React.Component
{
  constructor(){
    super();
    this.state={firstvalue:"welcome"}

  }
  changevalue=()=>
  {
    this.setState({firstvalue:"proceed"});
  }
  render(){
    return <div>
      <h1>{this.state.firstvalue}</h1>
      <br />
      <button type="button" onClick={this.changevalue}>CLICK</button>
    </div>
  }
}
ReactDOM.render(<Parent />,document.getElementById('root'));

Output:
Program:
</head>
  <body>
    <button id="btn">click Me!</button>
    <h1 id="myheading">Its Heading tag</h1>
    <div id="mydiv">Its Div tag</div>
    <p>In Regular Function the <b>this</b>keyword represents:</p>
    <p id="demo"></p>
   </body>
<script>
    class RegvsArr{
      changeColor=function(){
        document.getElementById("demo").innerHTML +=this;
      }
    }
    var regvsarr=new RegvsArr();
    window.addEventListener("load",regvsarr.changeColor);
   
document.getElementById("btn").addEventListener("click",regvsarr.changeColor);
   
document.getElementById("mydiv").addEventListener("click",regvsarr.changeColor
);
   
document.getElementById("myheading").addEventListener("click",regvsarr.changeC
olor);
  </script>

Output:
Program:
Changed changecolor format to previous program

Output:
Program:
const newlist=[1,2,3,4,"hi"]
const r1=newlist.map((listvalues)=>{
  return <li>{listvalues}</li>
});
ReactDOM.render(<ul>{r1}</ul>,document.getElementById('root'));

Output:

Program:

const newlist=[1,2,3,4,"hi"]
const r1=newlist.map((listvalues)=>{
  return <li>{listvalues+" "+newlist}</li>
});
ReactDOM.render(<ul>{r1}</ul>,document.getElementById('root'));

Output:
12-03-2022

Program:
class Parent extends React.Component
  {
    constructor()
    {
      super();
      this.state={firstvalue:"Welcome",s:"check",t:"Mee too"}
    }
    changevalue=()=>{
      this.setState({firstvalue:"Proceed"})
    }
    changevalue2=()=>{
      this.setState({s:"change"})
    }
    changevalue3=()=>{
      this.setState({t:"yes"})
    }
    render()
    {
      return<div>
        <h1>
          {this.state.firstvalue}
        </h1>
        <br/>
        <button type="button" onClick={this.changevalue}>change</button>
        <h1>
          {this.state.s}
        </h1>
        <br/>
        <button type="button" onClick={this.changevalue2}>CLICK</button>
        <h1>
          {this.state.t}
        </h1>
        <br/>
        <button type='button' onClick={this.changevalue3}>CLICK</button>
      </div>
    }
  }
  ReactDOM.render(<Parent/>,document.getElementById('root'));
Output:
Program:
function Myfunction(props){
    const content = props.data.map((show) =>
    <div key={show.id}>
      <h3> {show.id}:{show.name}</h3>
      </div>
  );
  return(
    <div>
      {content}
    </div>
  );
  }
  const Myvalue=[
    {id:1,name:'sylvia'},{id:2,name:'sam'}];

ReactDOM.render(<Myfunction data={Myvalue}
/>,document.getElementById('root'));

Output:
Program:
function Listkey(props){
  const item=props.item;
  const key=props.key;
  return(<li>{key} {item}</li>);
}
function MyList(props){
  const listItem=props.myvalue.map((listvalues,index)=>
  <Listkey key={index} item={listvalues}/>
  );
  return <ul>{listItem}</ul>;
}
const mydata=[200,1000,5000,300];
ReactDOM.render(<MyList myvalue={mydata}/>,document.getElementById('root'));

Output:
Advanced Concepts:
This event is gonna occur in some stage. Its called life cycle
Life cycle of components:
1. Initial phase
2. Mounting phase
3. Updating phase
4. Unmounting phase (getting releaved from DOM)
[constructor/component did mount/component did update/component will
unmounts]
Mounting – Did mount
Updating – did update
Unmount – component will unmounts

Mounting : you are creating react elements, that gets constructed as DOM tree. This stage is
called as Mounting
Updating : bcs of props or states u are making changes, this stage is updating
Unmount : From Dom tree we gonna remove element
Did mount : after mounting happens dz event will get called
Did update : after update happens this will get called
Will update : (will future) before unmounts this will get called
[lot of life cycles got depreciated from react js because of its poor performance like memory
leakage]
[other life cycles: get state from props,get snapshot]
(should component update)
Initial Phase:
1. Component will mount before renders in DOM dz will get initiated(worked)
Program:
class Lifecycle extends React.Component{
  constructor()
  {
    super();
    this.state={value:"welcome",name:"students"}
  }
  componentWillMount()
  {
    alert("react life cycle will mount phase");
  }
  render()
  {
    return <h1>{this.state.value}{this.state.name}</h1>
  }
}
ReactDOM.render(<Lifecycle/>,document.getElementById('root'));
Output:
Program:
class Lifecycletwo extends React.Component{
  constructor()
  {
    super();
    this.state={v1:"You",v2:"were",v3:"here"}
  }
  componentWillMount()
  {
    alert("react life cycle will mount phase");
  }
  render()
  {
    return <h1>{this.state.v1}{this.state.v2}{this.state.v3}</h1>
  }
  componentDidMount()
  {
    setTimeout(()=>
    this.setState({v1:'They'}),5000)
  }
}
ReactDOM.render(<Lifecycletwo/>,document.getElementById('root'));

Output:
After 5 seconds
Program:
class Lifecycle extends React.Component
  {
    constructor()
    {
      super();
       
      this.state={value:"welcome",name:<h2 style={{color:"red"}}>RedWing</h2>}
    }
    componentWillMount()
    {
      alert("React Life cycle will mount phase");
    }
    render()
    {
      return<div>
        <h1>{this.state.value}  {this.state.name}</h1>
        <br/>
        <button type="button" onClick={this.changevalue}>Change value</button>
      </div>
    }
    changevalue=()=>  
    {
      this.setState({value:"we changed value"});
    }
    componentDidMount()
    {
      setTimeout(() =>
        this.setState({value:'Thank You '}),5000)
    }
  }
  ReactDOM.render(<Lifecycle/>,document.getElementById('root'));

Output:
Program:
class Lifecycle extends React.Component
{
  constructor()
  {
    super();
     
    this.state={value:"welcome",name:"RedWing"}
  }
  componentWillMount()
  {
    alert("React Life cycle will mount phase");
  }
  render()
  {
    return<div>
      <h1>{this.state.value}  {this.state.name}</h1>
      <br/>
      <button type="button" onClick={this.changevalue}>Change value</button>
    </div>
  }
  changevalue=()=>  
  {
    this.setState({value:"we changed value"});
  }
  componentDidMount()
  {
    setTimeout(() =>
      this.setState({value:'Thank You '}),5000)
  }
  componentWillUpdate()
  {
    alert("Do u want to update?");
  }
}
ReactDOM.render(<Lifecycle/>,document.getElementById('root'));
Output:
Program:
class Lifecycle extends React.Component{
  constructor(){
    super();
    this.state={value:"welcome",name:"students"}
  }
  componentWillMount()
  {
    alert("react life cycle will mount phase");
  }
  render()
  {
    return<div>
      <h1>{this.state.value}{this.state.name}</h1>
      <br/>
      <button type="button" onClick={this.changeValue}>Change value</button>
    </div>
  }
  changeValue=()=>
  {
    this.setState({value:"we changed value"});
  }
  componentDidMount()
  {
    setTimeout(()=>this.setState({value:'thank you'}),5000)
  }
  componentWillUpdate()
  {
    alert("do u want to update a new value?");
  }
  componentDidUpdate()
  {
    document.getElementById("mydiv").innerHTML="New value
updated"+this.state.value;
  }
}
ReactDOM.render(<Lifecycle />,document.getElementById('root'));

In html: add -------- <div id="root"></div>


<div id="mydiv"></div>
Output:
Program:
class Eventbind extends React.Component{
  constructor(){
    super()
    this.state={msg:"welcome"}
  }
  clickEvent=()=>
  {
    this.setState({
      msg:"thank you"
    })
  }
  render()
  {
    return(
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.clickEvent}>Click</button>
      </div>
    )
  }
}
ReactDOM.render(<Eventbind />,document.getElementById('root'));

Output:
Program:

class Inlineexample extends React.Component{


  render()
  {
    return(
      <div>
        <h1 style={{dolor:'red',textAlign:'center'}}>Happy dats</h1>
        <h2>Ok</h2>
      </div>
    )
  }
}
ReactDOM.render(<Inlineexample/>,document.getElementById('root'));
Program:
class Reactstyle extends React.Component{
  render(){
    const mystyle={
      color:"yellow",
      fontFamily:"Arial"
    };
    return(
      <div>
        <h1 style={mystyle}>ok</h1>
      </div>
    )
  }
}
ReactDOM.render(<Reactstyle/>,document.getElementById('root'));

Output:
Program:
Index.js
class Reactstyle extends React.Component{
  render()
  {
    const mystyle={
      fontFamily:"Arial",
      textAlign:"center"
    };
    return(
      <div>
        <h1 style={{color:'blue',textAlign:'center'}}>Happy days</h1>
        <h2 style={mystyle}>Ok</h2>
        <h3 className='App'>Rocking</h3>
      </div>
    )
  }
}
ReactDOM.render(<Reactstyle/>,document.getElementById('root'));
App.css
.App{
  font-family: Lucida;
  font-style: Bold;
  text-align:center;
  color:purple;
}

Output:

You might also like