REACT JS ADONS
1 javascript (ES6) code snippets
2 Live Sass Compiler
3 Live Server
4 ES7+ React/Redux/React-Native snippet

-----------------------------------------------------------
React Library

1) npm install react-bootstrap bootstrap
https://react-bootstrap.netlify.app/docs/components/buttons/
// bootstarp file add this file in index.js
import 'bootstrap/dist/css/bootstrap.min.css';

2) npm install react-router-dom
3) npm install react-axios

install The Postman app in your system
https://www.postman.com/downloads/

4) npm i redux react-redux redux-thunk

-----------------------------------------------------------

youtube link
https://www.youtube.com/watch?v=EHTWMpD6S_0&t=91s
https://www.youtube.com/playlist?list=PL8p2I9GklV47BCAjiCtuV_liN9IwAl8pM

https://www.thapatechnical.com/2021/07/react-js-1702-in-one-video-by-thapa.html

npx = (Node Package Execute)
npm = (Node Package Manager)


-----------------------------------------------------------

section 4:

STATE ===> data ko store karane ka liye
STATE ===> just like a object, we store data in STATE
state update in COMPONETN when we change
jab hum state ko change/update karte hai to component ko pata chal jata hai kuch update ua hai VAR ke kesh me aisa kuch nahi hota

PROPS ===> data ko transfer karne k liye 1 component se 2 component me data bhejne k liye



*************************************************************************
COMPONENTS CREATE
*************************************************************************

1) function components
2) class components


======== App.js page ==============
import Header from './component/header.js'

function App() {
  return (
    <div className="App">
      <Header/>
	  <Footer/>
    </div>
  );
}

======== App.js page ==============

1) function components
---------------------------------------------
import '../assets/css/header.css'

function Header() {
    return (
      <div>
        <header><h2 class="header">HEADER</h2></header>
      </div>
    );
  }
  
  export default Header;



2) class components
---------------------------------------------
import {Component } from "react"

class Footer extends Component {
    render(){
        return (
          <div>
           <footer><h2 class="footer">FOOTER2</h2></footer>
         </div>
        );
    }
}

export default Footer;

*************************************************************************
WHAT IS JSX
*************************************************************************
JSX = js + HTML

let fname = "rakesh"
const my_func =() =>{
    return "this is my function value";
}

function JSX(){
    let lname = "kumar"
    return (
        <di>
            <h3 class="jsx-heading">jsx = javaScript + HTML - {fname} {lname} - {2*5} - {my_func()}</h3>
        </di>
    );
}

export default JSX;





section 5:

*************************************************************************
PROPS IN REACT
*************************************************************************

1) Props in function component
2) Props in class component
3) Immutability of props


1) Props in function component
-------------------------------------------


========== app.js page ========
 <Header heanderName="props new headers"/>


========== component page ========

function Header(props) {
    return (
      <div>
        <header><h2 class="header">HEADER {props.heanderName}</h2></header>
      </div>
    );
  }


2) Props in class component
-------------------------------------------
========== app.js page ========
<Footer fName="props footer name"/>

========== component page ========

class Footer extends Component {
    render(){
        return (
          <div>
           <footer><h2 class="footer" >Class FOOTER2 {this.props.fName}</h2></footer>
         </div>
        );
    }
}



section 6:

*************************************************************************
STATE IN REACT
*************************************************************************
1) state in function component
2) state in class component


1) state in function component
-------------------------------------------
import {useState} from 'react'

function Header(){
    const [LocalVar,setData] = useState("jitender")
     function UpdateData(){
        setData("SHARMA")
     }

    return(
        <div>
            <h1 class="header" >HEADER PART</h1>
            <p>{LocalVar}</p>
            <button onClick={UpdateData} >click</button>
        </div>
    );
}
export default Header;


1) (b) state in function component
-------------------------------------------
import {useState} from 'react'

function Header(){
    const [LocalVar,setData] = useState(0)
     function UpdateData(){
        setData(LocalVar + 1)
     }

    return(
        <div>
            <h1 class="header" >HEADER PART</h1>
            <p>{LocalVar}</p>
            <button onClick={UpdateData} >click</button>
        </div>
    );
}

export default Header;



2) state in class component
-------------------------------------------
import {Component} from "react";

class State extends Component{
    constructor(){
        super();
        this.state = {
            counter: 10,
        };
    }
    
    increment() {
        this.setState({
            counter: this.state.counter + 1,
        });
    }

    render(){
        return (
            <div>
                <h3>state class base components {this.state.counter}</h3>
                <button onClick={()=> this.increment()}>CLICK HERE</button>
            </div>
        );
    }
}



*************************************************************************
DESTRUCTURING PROPS
*************************************************************************

1) Destructuring PROPS in function component
-------------------------------------------
<DesturcFuncProps fname="Rajesh" lname="Kumar"/>


function DesturcFuncProps(props) {
  const {fname, lname} = props;
    return (
      <div>
        <h2 class="">DESTRUCTURING FUNC PROPS = {fname} {lname}</h2>
      </div>
    );
  }



2) Destructuring PROPS in class component
-------------------------------------------
<DesturcClassProps fname="Pawan" lname="Bansal"/>

import {Component } from "react"

  class DesturcClassProps extends Component {
    render(){
      const {fname, lname} = this.props;
        return (
          <div>
           <h2 class="">DESTRUCTURING CLASS PROPS = {fname} {lname}</h2>
         </div>
        );
    }
}


section 7:

*************************************************************************
HANDLING EVENTS IN FUCTIONAL COMPONENT
*************************************************************************

function EventFuction() {

function clickEventHandal(){
    alert("event in function tast complete");
}

    return (
      <div>
        <h2 class="">EVENT FUNCTION </h2>
        <button onClick={clickEventHandal}>EVENT CLICK</button>
      </div>
    );
  }



*************************************************************************
HANDLING EVENTS IN CLASS COMPONENT
*************************************************************************

import {Component } from "react"

  class EventClass extends Component {
     clickEventHandal(){
        alert("event in Class tast complete");
    }


    render(){
        return (
          <div>
           <h2 class="">EVENT CLASS </h2>
           <button onClick={this.clickEventHandal}>EVENT CLICK</button>
         </div>
        );
    }
}
  
  export default EventClass;


*************************************************************************
EVENTS BINDING
*************************************************************************
class base component

import {Component} from "react";

class EventBinding extends Component{
    constructor(){
        super();
        this.state = {
            counter: 10,
        };
        //this.increment = this.increment.bind(this);
    }
    
    increment = () =>{
        this.setState({
            counter: this.state.counter + 1,
        });
    }

    render(){
        return (
            <div>
                <h3>EVENT BINDING {this.state.counter}</h3>
                <button onClick={this.increment}>CLICK HERE</button>
            </div>
        );
    }
}
  
  export default EventBinding;




1 function all
2 jsx
3 props
4 desctuj props
5 event
6 function event


*************************************************************************
IMAGES PATH IN REACT
*************************************************************************
<img src={require('./images/banners/banner_2.jpg')} alt="Banner Image" />



*************************************************************************
INLINE CSS IN REACT
*************************************************************************
<h2 className="" style={{color: '#999', fontSize: 40, padding: "10px", background: '#f00' }} >Header</h2>


*************************************************************************
INLINE BG IMG CSS IN REACT
*************************************************************************
import plusIcon from './images/icons/plus.png';
import minusIcon from './images/icons/minus.png';

<button style={{width: "20px", height: "20px", border: 0,  backgroundImage: "url(" + minusIcon + ")", backgroundRepeat: 'no-repeat'  }}></button>


*************************************************************************
CSS BACKGROUND IMAGE
*************************************************************************
.lSAction a{background-image: url('../../Components/images/hoteldetail/controls1.png');}









************************************************************************************************************************************************************************
************************************************************************************************************************************************************************
************************************************************************************************************************************************************************
************************************************************************************************************************************************************************
************************************************************************************************************************************************************************
************************************************************************************************************************************************************************
************************************************************************************************************************************************************************
************************************************************************************************************************************************************************
************************************************************************************************************************************************************************

--------------------------------------------------------------------------
https://www.youtube.com/watch?v=GiyL4KFRNBA
--------------------------------------------------------------------------

1) React is javascript library

2) the main focus is building UI as fast as possible

3) Single page application
means complete website is single pages

4) Maintained by facebook

5) Apps with react is
Netflix
Whatsapp web
Instagram


--------------------------------------------------------------------------
REACT PREREQUISITES
--------------------------------------------------------------------------
1) HTML, CSS, JAVASCRIPT

2) ES6 understanding will make you comfortable with reactjs



--------------------------------------------------------------------------
REACT ENVIRONMENT UP WITH WINDOWS
--------------------------------------------------------------------------
Install node and npm
VS code editor
install the CRA app == create react app


links
https://nodejs.org/en


1) install node js
2) cmd type on folder url
3) node -v   ===> for version check of node js
4) npm-v   ===> for version check of npm
5) cls => for clear cmd
6) create new Project:-  E:\ReactExamples>npx create-react-app project2
7) cd project2
8) code . (enter) ===> for project open in vs code
9) npm start ===> for start the project
10) ctrl+c ===> to stop the project


npx = (Node Package Execute)
npm = (Node Package Manager)



--------------------------------------------------------------------------
AFTER OPEN PROJECT OF REACT
--------------------------------------------------------------------------
NPM ===> node package manager
NPM ALTERNATIVE == yarn

node_modules ===> all node package manage here

npm install pakage-name ====> for install any package, and any library 



--------------------------------------------------------------------------
package.json file inner ====> 
--------------------------------------------------------------------------
MOST IMPORTANT FILE
package.json file ===> hamare project ki detail rakhta hai

project name
react current version show
kon kon se package install hai



--------------------------------------------------------------------------
package-lock.json file inner  
--------------------------------------------------------------------------

pakcage.json ====>  ki detail rakhata hai full




--------------------------------------------------------------------------
src ===>
--------------------------------------------------------------------------
app.css 	===> css
app.js 		===> code start of html
app.test.js	===> for developer advance js
index.css	===> for creat css index pages
index.js	===> enter point of react



--------------------------------------------------------------------------
public ===>
--------------------------------------------------------------------------
html related detail store



--------------------------------------------------------------------------
node_modules ===>
--------------------------------------------------------------------------
all package store in this folder

when we tranfer the REACT PROJECT that no need to this in file




----------------------------------------------------------------------------------------------
COMPONENT ===>
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=KV0v78T-fbw&t=207s

A piece of code that can resue
Such as function
But more powerful than function
	i) lifecycle
	ii) self state
	iii) props
	iv) parameter defference
	v) self HTML
Header, Footer is best example

mostly 2 component
1) function component
2) class component

3) HOC(HIght order component)
4) Pure Component
5) Controlled Component
6) Uncontrolled Complonent

==> component ke sath component bana sakte hai ===== yes
==> component ke ander component bana sakte hai ===== yes



when we no use ****export default****
------------------------------------------

export function Footer(){
    return(
        <div>
            <footer>
                <div className="container">This is Footer 2</div>
            </footer>
        </div>
    )
}

//other file
import {Footer} from './Assets/component/Footer';





---------------------------------------------
1) function components
---------------------------------------------
import '../assets/css/header.css'

function Header() {
    return (
      <div>
        <header><h2 class="header">HEADER</h2></header>
      </div>
    );
  }
  
  export default Header;


---------------------------------------------
2) class components
---------------------------------------------
import {Component } from "react"

class Footer extends Component {
    render(){
        return (
          <div>
           <footer><h2 class="footer">FOOTER2</h2></footer>
         </div>
        );
    }
}

export default Footer;




----------------------------------------------------------------------------------------------
JSX with React ===>
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=cxV9d6u0vfU

1) Javascript xml (jsx)
2) Write HTML and javascript together
3) Use Like HTML or XMLtags


function Header() {
    return (
      <div>
        <header><h2 class="header">HEADER {5*10} </h2></header>
      </div>
    );
  }





----------------------------------------------------------------------------------------------
Click Event and Function ===>
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=tmt7lf2nCBY

How to make click event
Call function in the button click
Variable in functional Component



--------------------------------------------------
On Click Function
--------------------------------------------------

function Apple1(){
        alert("On Click funtion 1")
    }

<button onClick={Apple1} >Click 1</button>
<button onClick={()=> Apple1()} >Click 2</button>

arrow function not run auto





----------------------------------------------------------------------------------------------
State in Functional Component ===> CONTENT-1
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=p7wZ_4sWZ4s

What is state
Use of state
Define state
Update state with a Button click
How state work


*** What is state ***
STATE ===> just like a object, we store data in STATE


*** Use of state ***
var variable not update in COMPONETN when we change
state update in COMPONETN when we change

jab hum state ko change/update karte hai to component ko pata chal jata hai kuch update ua hai VAR ke kesh me aisa kuch nahi hota

-------------------------------------------------------------
https://www.youtube.com/watch?v=GiyL4KFRNBA
ANIL SIDHU 1:35

https://www.youtube.com/watch?v=SS1I7m-G2kk&t=656s
THAPA TECHICAL


import { useState } from "react";

// use state NAME
       const [data, setData] = useState("jitender")
       function changeName() {
        setData("RAJESH")
       }

<h5>{data}</h5>
<button onClick={changeName}>Change Name</button>






// use state number
        const[number, setNumber] = useState(0);
        function changeNumber(){
            setNumber(number + 1)
        }

<h5>{number}</h5>
<button onClick={changeNumber}>Change Number</button>

-------------------------------------------------------------




******************************************** END STATE ********************************************


----------------------------------------------------------------------------------------------
Props with Functional Component ===> CONTENT-2
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=mpK8M4uJi-4

What are props
Use of props
Example with functional component
Update props on Button click


props ===> properties
when we data tranfer one component to another component we use props
props ===> just line parameter


1) Props in function component
2) Props in class component
3) Immutability of props

-------------------------------------------
1) Props in function component
-------------------------------------------


========== app.js page ========
 <Header heanderName="props new headers"/>


========== component page ========

function Header(props) {
    return (
      <div>
        <header><h2 class="header">HEADER {props.heanderName}</h2></header>
      </div>
    );
  }

-------------------------------------------
2) Props in class component
-------------------------------------------
========== app.js page ========
<Footer fName="props footer name"/>

========== component page ========

class Footer extends Component {
    render(){
        return (
          <div>
           <footer><h2 class="footer" >Class FOOTER2 {this.props.fName}</h2></footer>
         </div>
        );
    }
}




-------------------------------------------
3) change props dinamec
-------------------------------------------


const [name, setName] = useState("JITENDER SHARMA");
  function ChangeProps(){
    setName("RAJESH GARG");
  }

// app.js file ---- props call
<Footer myname={name} />
<button className="btn btn-primary" onClick={ChangeProps}>btn change props</button>

//footer.js file ----- props define
<p >use props:- {props.myname} </p>




-------------------------------------------
4 DESTRUCTURING PROPS
-------------------------------------------

1) Destructuring PROPS in function component
-------------------------------------------
<DesturcFuncProps fname="Rajesh" lname="Kumar"/>


function DesturcFuncProps(props) {
  const {fname, lname} = props;
    return (
      <div>
        <h2 class="">DESTRUCTURING FUNC PROPS = {fname} {lname}</h2>
      </div>
    );
  }



2) Destructuring PROPS in class component
-------------------------------------------
<DesturcClassProps fname="Pawan" lname="Bansal"/>

import {Component } from "react"

  class DesturcClassProps extends Component {
    render(){
      const {fname, lname} = this.props;
        return (
          <div>
           <h2 class="">DESTRUCTURING CLASS PROPS = {fname} {lname}</h2>
         </div>
        );
    }
}





----------------------------------------------------------------------------------------------
Get Input box value ===> CONTENT-3
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=1BHaLDRLQUo

Make Input field
Make function and get value
Make button and state
Get value on Button Click


************************************************
import { useState } from "react";

const[data, setData] = useState();

    function getInputData(val){
        setData(val.target.value);
    }

<p>input value: {data} </p>
<input className="" onChange={getInputData}  />
************************************************






----------------------------------------------------------------------------------------------
TERNARY OPERETOR ===> CONTENT-4
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=na0MVIomjmk
*************************************
---JAVASCRIPT---
that takes three operadnds

variable name = (condition) ? value1: value2
(age >= 18 ) ? if: else

var voteAge = 18;
//Conditional (ternary) Operator
document.getElementById("text16").innerHTML = (voteAge >= 18) ? "you can vote": "you can't vote" ;

*************************************

condition ? expression-True: expression-False


function Content4(){
    const votAge = 18;
    return(
        <div className="content4">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=na0MVIomjmk" target="_blank" rel="noreferrer" >Ternary Operator in React JS CONTENT-4</a></h5>
                {
                    
                    votAge >= 18? <p>you can VOTE</p>: <p>you cant not VOTE</p>

                }
            </div>
        </div>
    )
}




----------------------------------------------------------------------------------------------
Hide and Show Element ===> CONTENT-5
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=fHJVWtBW6No

Make A div any other elemtnt
Make State for hiding and show element
Make button
Update state on button click


function Content5(){
   const [data, setData] =  useState(true);
    return(
        <div className="content5">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=fHJVWtBW6No" target="_blank" rel="noreferrer">Hide , Show and Toggle CONTENT-5</a></h5>
                {
                    data? <p>ready to HIDE SHOW</p>: null
                }
                <button onClick={()=>{setData(false)}} className="btn btn-primary" >HIDE</button>
                <button onClick={()=>{setData(true)}} className="btn btn-danger">SHOW</button><br/>
                <button onClick={()=>{setData(!data)}} className="btn btn-info">TOGGLE</button><br/>
            </div>
        </div>
    )
}





----------------------------------------------------------------------------------------------
Basic Form ===> CONTENT-6
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=4PFX52Qmqv8

https://www.youtube.com/watch?v=GiyL4KFRNBA 2.35 full video

Make HTML form
Add Some Field
Use state for field data
Submit and control form


 // pagek ko refresh hone se rokne k liye
    function getFormData(e){
        e.preventDefault()
        console.log(name, email, fclass, tmc)
    }
    // use state
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [fclass, setfclass] = useState("");
    const [tmc, settmc] = useState(false);




<form onSubmit={getFormData}>
                <input type="text" placeholder="name" onChange={(e)=>setName(e.target.value)} /> <br/><br/>
                <input type="text" placeholder="email" onChange={(e)=>setEmail(e.target.value)} /> <br/><br/>
                <select  onChange={(e)=>setfclass(e.target.value)}>
                    <option>Select Class</option>
                    <option>Economy</option>
                    <option>Primary</option>
                    <option>First Class</option>
                </select><br/><br/>
                <input type="checkbox" onChange={(e)=>settmc(e.target.checked)} /><span>Acceept Term & Conditions</span><br/> <br/>
                <button type="submit" >Submit</button>
                <p>Name:- {name}</p>
                <p>Email:- {email}</p>
                <p>Select Class:- {fclass}</p>
                <p>T & c:- {tmc}</p>
            </form>






----------------------------------------------------------------------------------------------
Conditional rendering | if Condition ===> CONTENT-7
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=3IWUZAeBzyc

Make Component
Use State
ternory operatore
Conditional rendering == if else condition


const [login, setLogin] = useState(true);
    const [myuser, setMyuser] = useState(2);



{
                    login? <h4>Welcome to jitender </h4>: <h4>Welcome to Guest</h4>
                    
                }
                {
                    myuser==1? 
                    <h4>Welcome to User-1 </h4>: 
                    myuser==2? 
                    <h4>Welcome to User-2</h4>:
                    <h4>Welcome to User-3</h4>

                }







----------------------------------------------------------------------------------------------
Pass function as Props ===> CONTENT-8
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=7BsYuB-5YXQ

*********************************************************************
APP.JS FILE
// contenet 8
  function fun_content8(){
    alert("pass function as props")
  }
  function fun_content8b(a,b){
    return a*b;
  }


<Content8 data_con={fun_content8} data_con2={fun_content8b}/>
*********************************************************************
COMPONENT FILE

function Content8(props) {
    return (
        <div className="content8">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=7BsYuB-5YXQ" target="_blank" rel="noreferrer">Pass function as Props CONTENT-8</a></h5>
                <button className="btn btn-primary" onClick={()=>{props.data_con()} }  >props 1  </button>
                <button className="btn btn-primary" onClick={props.data_con}  >props 2  </button>
                <p>Pass function as Props== {props.data_con2(2,5)} </p>
            </div>
        </div>
    )
}






----------------------------------------------------------------------------------------------
Life Cycle Methods in React ===> CONTENT-9
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=e2IUZyuNfgk

===PHASE 3===
1) Mounting
2) Updating
3) UnMounting

load poduct	==> Mounting
Update Product	==> Updating
Remove Product	==> UnMounting

***************************************
when Component is loaded
when Component is updated with state and props
when Component is removed.

--------------
1 Mounting
--------------
1 Constructor Life Cycle Methods 10
2 Render Life Cycle Methods 11
3 componentDidMount, life cycle method 12
when all html component load after DidMount call

--------------
2 Updating
--------------
componentDidUpdate life cycle method 13
shouldComponentUpdate 14


--------------
3 UnMounting
--------------
componentWillUnmount 15




----------------------------------------------------------------------------------------------
Constructor Life Cycle Methods in (class component) ===> CONTENT-10
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=RFEEqUrSecQ

What is constructor
Why this is important?
What we can do in this life cycle method?



class Content10 extends Component {
    constructor(){
        super();
        this.state={
            data:"jitender"
        }
    }

    render() {
        return (
            <div className="content10">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=RFEEqUrSecQ" target="_blank" rel="noreferrer">Constructor Life Cycle Methods CONTENT-10</a></h5>
                    <p>Constructor Life Cycle Methods in (class component)</p>
                    <p>{this.state.data}</p>

                </div>
            </div>
        )
    }
}






----------------------------------------------------------------------------------------------
Render Life Cycle Methods in (class component) ===> CONTENT-11
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=eSKDjVc7QQ4

Use of render Method.
Make Class Component
Use state and props with render.

render method. ==>
1 run/call when any html change, when component ready and load
2 run/call if any STATE and PROPS, are update render method run, 





class Content11 extends Component {
    // for state value
    constructor(){
        super();
        this.state={
            email:"jitender@gmail.com"
        }
    }
    render() {
        return (
            <div className="content11">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=eSKDjVc7QQ4" target="_blank" rel="noreferrer">Render Life Cycle Methods in (Class Component) CONTENT-11</a></h5>
                    <p>State value as props: {this.props.pr_name}</p>
                    <p>value also console.log</p>
                    {console.log("render method:-", this.props.pr_name)}
                    <p>state value only:- {this.state.email}</p>
                    <button className="btn btn-info" onClick={()=>{this.setState({email: "monu@gmail.com"})}} >Update State</button>
                </div>
            </div>
        )
    }
}






----------------------------------------------------------------------------------------------
componentDidMount, life cycle method in (class component) ===> CONTENT-12
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=BCslNEYCRXc

Use of component DidMount Method.
Make Class Component.
No Effect of state and props

when COMPONENT full load then this method call ==>  Component DidMount
HTML, DOM ready hone ke bad
API load karne k liye


component DidMount==> bar bar update nahi hota, state/props update hone per sirf render update hota hai



*******************************************************************

class Content12 extends Component {
    // 1 constructor
    constructor() {
        super();
        //console.log("constructor")
        this.state={
            name:"sumit sharma"
        }
    }
    // 3 componentDidMount
    componentDidMount() {
        console.log("componentDidMount")
    }
    render() {
        // 2 render
       // console.log("render")
        return (
            <div className="content12">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=BCslNEYCRXc" target="_blank" rel="noreferrer">componentDidMount, life cycle method in (class component) CONTENT-12</a></h5>
                    <p>when COMPONENT full load then this method call ==  Component DidMount</p>
                    <p>HTML, DOM ready hone ke bad</p>
                    <h5>API load karne k liye</h5>
                    <p>component DidMount == bar bar update nahi hota, state/props update hone per sirf render update hota hai</p>
                    <p>state value:- {this.state.name} </p>
                    <button className="btn btn-primary" onClick={()=>{this.setState({name:"jatin shrma"})}} >Update State</button>
                    <p>check consol.log</p>
                </div>
            </div>
        )
    }
}

*******************************************************************








----------------------------------------------------------------------------------------------
componentDidUpdate life cycle method in (class component)  ===> CONTENT-13
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=xPiph9AYYRw

Use of componentDidUpdate Method.
Make Class component.
Use with state and props
Previous Props and State
preProps, preState, snapshot 3 parameter in componentDidUpdate 

componentDidUpdate == state ya props ke update hone k bad hi chalega, jitni bar state/props update hoga utni bar chalega 
preProps, preState, snapshot 3 parameter in componentDidUpdate 





*****************************************************

class Content13 extends Component {
    // 1 constructor
    constructor() {
        super();
        console.log("componentDidUpdate:--- constructor")
        this.state={
            name:"pankaj kumar",
            count:0
        }

    }
    // 3 componentDidUpdate
    componentDidUpdate(preProps, preState, snapshot) {
        console.log("componentDidUpdate:--- componentDidUpdate")
        console.log("componentDidUpdate",  preState.count,    this.state.count)
    }
    render() {
        //console.log("componentDidUpdate:--- render")
        return (
            <div className="content13">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=xPiph9AYYRw" target="_blank" rel="noreferrer">componentDidUpdate life cycle method in (class component) CONTENT-13</a></h5>
                    <p>Use of componentDidUpdate Method.</p>
                    <p>Make Class component.</p>
                    <p>Use with state and props</p>
                    <p>Previous Props and State</p>
                    <p>componentDidUpdate == state ya props ke update hone k bad hi chalega, jitni bar state/props update hoga utni bar chalega </p>
                    <p>preProps, preState, snapshot 3 parameter in componentDidUpdate </p>
                    
                    <h5>state</h5>
                    <p>state value:- {this.state.name} </p>
                    <button className="btn btn-primary" onClick={()=>{this.setState({name:"rakesh kumar"})}} >update state</button>
                    <p>check consol.log</p>
                    <p>state value number: {this.state.count} </p>
                    <button className="btn btn-danger" onClick={()=>{this.setState({count:this.state.count+1})}}  >update state number</button>
                </div>
            </div>
        )
    }
}

*****************************************************






----------------------------------------------------------------------------------------------
shouldComponentUpdate life cycle method in (class component)  ===> CONTENT-14
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=E878PZtIZLY

When shouldComponentUpdate called and Use.
It can stop rendering.
Use with state and props.

shouldComponentUpdate ==> ye apse poochta hai ki aapko component update karna hai k nahi
shouldComponentUpdate ==> ye rendering ko stop kar dena hai, iski default value false hoti hia
rendering ko chalu karne k liye true karna padta hai





*****************************************************


class Content14 extends Component {
    constructor() {
        super();
        this.state = {
            count: 0
        }
    }
    //shouldComponentUpdate
    shouldComponentUpdate() {
        console.log("shouldComponentUpdate", this.state.count);
        return true
        
        // if (this.state.count > 5 && this.state.count < 10) {
        //     return true
        // }
    }
    render() {
        return (
            <div className="content14">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=E878PZtIZLY" target="_blank" rel="noreferrer">shouldComponentUpdate life cycle method in (class component) CONTENT-14</a></h5>
                    <p>When shouldComponentUpdate called and Use.</p>
                    <p>It can stop rendering.</p>
                    <p>Use with state and props.</p>
                    <p>shouldComponentUpdate == ye apse poochta hai ki aapko component update karna hai k nahi</p>
                    <p>shouldComponentUpdate == ye rendering ko stop kar deta hai, iski default value false hoti hia</p>
                    <p>rendering ko chalu karne k liye true karna padta hai</p>
                    <h5>state</h5>
                    <p>state value:- {this.state.count}</p>
                    <button className="btn btn-primary" onClick={() => { this.setState({ count: this.state.count + 1 }) }} > update counter</button>
                </div>
            </div>
        )
    }
}



*****************************************************





----------------------------------------------------------------------------------------------
componentWillUnmount life cycle method in (class component)  ===> CONTENT-15
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=kpqZ8o3kPk8&t=16s

when component will unmount called
example of component will unmount.
Use of component will unmount

jab bhi hamara component DOM se remove hoga componentWillUnmount call ho jayega



PARENT COMPONETNT
***************************************************
class Content15 extends Component {
    constructor() {
        super();
        this.state = {
            data: true
        }
    }

    render() {
        return (
            <div>
                {
                    this.state.data ? <Content15_child /> : <h3>child componet remove</h3>
                }
                <button className="btn btn-danger" onClick={()=>{this.setState({data:!this.state.data})}} >Toggle btn</button>
            </div>
        )
    }
}

***************************************************


CHILD COMPONETNT
***************************************************
class Content15_child extends Component {
    componentWillUnmount(){
        console.log("componentWillUnmount is call")
    }
    render() {
        return (
            <div className="content15">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=kpqZ8o3kPk8&t=16s" target="_blank" rel="noreferrer"> CONTENT-15 child</a></h5>
                    <p>componentWillUnmount == component ke remove hone ke bad call hota hai</p>
                    <p>parent componetn function componetn hosakta hai. lekin child component jisme componentWillUnmount call hota hai wo class component hi hona ch</p>
                    <p></p>
                </div>
            </div>
        )
    }
}
***************************************************







----------------------------------------------------------------------------------------------
Hooks in React js  ===> CONTENT-16
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=WoUpht1zcG0

https://www.youtube.com/watch?v=GiyL4KFRNBA
full 3.58

What are hooks in React js
How to use them
Example of React Hooks with useState

===Hooks===
With Hook, we can use class component features in functional components such as state, life cycle, pure component, etc

class component me == sate, life cycle, pure component, etc == ye sari chije hoti hai
function component me === ye sari chije nahi hoti == enhi feture ko use karne ke liye hum USE karte hai React Hooks ka

HOOKS defination:- kuch features hote hai class component me jo function component me nahi hoye unhi ko use karne ke liye hum HOOKS ka use karte hai like "useState"

===some Hooks name===
useCallback, useContext, useDebegValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRenducer, useRef, useSyncExternalStore, useTransition, useState,






----------------------------------------------------------------------------------------------
useEffect hooks  ===> CONTENT-17
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=zJeyz5mIXGQ

What is useEffect
How to use useEffect
Example useEffect
useEffect with State and props

-----------------------------
useEffect ==> ues hota hai as a life cycle method
stat/props update hone par call hoga, 
isme condition bhi laga sakte hai kon si state/props update hone par call hoga
useEffect ==> Hooks as componentDidMount, componentDidUpdate, and componentWillUnmount combined



*********************************************************

function Content17() {
    const[count, setCount] = useState(0);
    // useEffect hooks
    useEffect(()=>{
        console.log("useEffect call")
    })
    return (
        <div className="content17">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=zJeyz5mIXGQ" target="_blank" rel="noreferrer">useEffect hooks CONTENT-17</a></h5>
                <p>What is useEffect</p>
                <p>How to use useEffect</p>
                <p>Example useEffect</p>
                <p>useEffect with State and props</p>
                <h5>useEffect</h5>
                <p>useEffect == ues hota hai as a life cycle method</p>
                <p>stat/props update hone par call hoga, </p>
                <p>isme condition bhi laga sakte hai kon si state/props update hone par call hoga</p>
                <p>useEffect == Hooks as componentDidMount, componentDidUpdate, and componentWillUnmount combined</p>
                <h5>update state</h5>
                <p>{count}</p>
                <button className="btn btn-primary" onClick={()=>{setCount(count+1)}} >update count</button>
            </div>
        </div>
    )
}

*********************************************************





----------------------------------------------------------------------------------------------
useEffect with Specific State and Props  ===> CONTENT-18
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=80u8D2-Ro3s

What is useEffect
useEffect with Specific state
useEffect with Specific Props


STATE useEffect 
****************************************************
function Content18() {

    const[count, setCount] = useState(10);
    const[data, setData] = useState(100);
    
    // useEffect hooks state
    useEffect(()=>{
        console.log("useEffect state call")
    },[data])

    return (
        <div className="content18">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=80u8D2-Ro3s" target="_blank" rel="noreferrer">useEffect with Specific State and Props hooks 3 CONTENT-18</a></h5>
                <p>What is useEffect</p>
                <p>useEffect with Specific state</p>
                <p>useEffect with Specific Props</p>
                
                <h5>update state</h5>
                <h5>jo state pass karenge bus usi par useEffect call hoga</h5>
                <p>count:- {count}</p>
                <button className="btn btn-primary" onClick={()=>{setCount(count+1)}} >update count</button>
                <p>useEffect pass here data:- {data}</p>
                <button className="btn btn-danger" onClick={()=>{setData(data+1)}} >update data</button>
            </div>
        </div>
    )
}

****************************************************



----------------------------------------------------------------------------------------------
useEffect with Specific Props  ===> CONTENT-19
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=80u8D2-Ro3s

PROPS useEffect 
****************************************************
	====app.js====file
  //content 19
  const [count19, setCount19] = useState(10);
  const [data19, setData19] = useState(100);

<Content19 props_value_c={count19} props_value_d={data19} />
      <button className="btn btn-primary" onClick={() => { setCount19(count19 + 1) }} >update count</button>
      <button className="btn btn-danger" onClick={() => { setData19(data19 + 1) }} >update data</button>






import { useEffect } from "react";

function Content19(props) {

    // useEffect hooks props
    useEffect(() => {
        console.log("useEffect props call", "c-value", props.props_value_c, "d-value", props.props_value_d )
    },[props.props_value_d])
    
    return (
        <div className="content19">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=80u8D2-Ro3s" target="_blank" rel="noreferrer">useEffect Props hooks 3 CONTENT-19</a></h5>
                <h5>useEffect Props only</h5>
                <p>{props.props_value_c}</p>
                <p>{props.props_value_d}</p>
            </div>
        </div>
    )
}



****************************************************






----------------------------------------------------------------------------------------------
Style Type in React js  ===> CONTENT-20
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=m8ZrNPykXes


How Many ways we have for style in React js
Use the normal stylesheet == like app.css, index.css
Style with the variable or Inline Style == inline css
CSS with Module == import style from '../css/custome.module.css';
Interview Question


**************************************************************

import style from '../css/custome.module.css';

function Content20() {
    return (
        <div className="content20">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=m8ZrNPykXes" target="_blank" rel="noreferrer">Style Type in React js CONTENT-20</a></h5>
                <p>How Many ways we have for style in React js == 3 type style</p>
                <p>Use the normal stylesheet == like app.css, index.css</p>
                <p>Style with the variable or Inline Style == inline css</p>
                <p>CSS with Module == import style from '../css/custome.module.css';</p>
                <h5>normal stylesheet</h5>
                <p className="css_type1">style type 1</p>
                <h5>Inline Style</h5>
                <p style={{color: "#f00", backgroundColor: "#000"}}>style type 2 use camel case in property</p>
                <h5>CSS with Module</h5>
                <p className={style.css_type3}>style type 3 Module css custome.module.css</p>
            </div>
        </div>
    )
}

**************************************************************







----------------------------------------------------------------------------------------------
Install Bootstrap  ===> CONTENT-21
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=3ER_2uoR52E

What is bootstrap
Ans:- bootsrap is a css and js library

Install Bootsrap
Ans:- Type - react bootstrap, and go to website click get started btn
1 npm install react-bootstrap bootstrap
2 import 'bootstrap/dist/css/bootstrap.min.css';
== this file use in index.js on top section
3 import { Button } from "react-bootstrap"; on top



****************************************************

import { Button } from "react-bootstrap";


function Content21() {
    return (
        <div className="content21">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=3ER_2uoR52E" target="_blank" rel="noreferrer">Install Bootstrap CONTENT-21</a></h5>
                <h5>What is bootstrap</h5>
                <p>Ans:- bootsrap is a css and js library</p>
                <h5>Install Bootsrap</h5>
                <p>Ans:- Type - react bootstrap, and go to website click get started btn</p>
                <p>1 npm install react-bootstrap bootstrap</p>
                <p>2 import 'bootstrap/dist/css/bootstrap.min.css'; </p>
                <p>== this file use in index.js on top section</p>
                <p>3 import  "Button" from "react-bootstrap"; on top</p>
                <h4>
                    <a href="https://react-bootstrap.netlify.app/docs/components/buttons" target="_blank">react bootstrap link</a>
                </h4>

                <Button variant="primary">Primary</Button>{' '}
                <Button variant="secondary">Secondary</Button>{' '}
                <Button variant="success">Success</Button>{' '}
                <Button variant="warning">Warning</Button>{' '}
                <Button variant="danger">Danger</Button>{' '}
                <Button variant="info">Info</Button>{' '}
                <Button variant="light">Light</Button>{' '}
                <Button variant="dark">Dark</Button>
                <Button variant="link">Link</Button>
            </div>
        </div>
    )
}



****************************************************









----------------------------------------------------------------------------------------------
Handle Array with List  ===> CONTENT-22
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=1MfE8LEYYZA

Make an array.
Why use map function, not for loop.
Make List with an array.
Make List with array of objects

list type of ARRAY
1. Normal Array 22
2. Object Array, List Array 22
3. Condition Array 23
4. Nested List Array 24



*************************************************************************************

function Content22() {
    // array
    const student1 = ["Rakesh", "Suresh", "Ramesh", "Anil"]

    // array of objects
    const student2 = [
        { name: "anil", email: "anil@test.com", phone: 1111111111 },
        { name: "suresh", email: "suresh@test.com", phone: 222222222 },
        { name: "kamal", email: "kamal@test.com", phone: 3333333333 }

    ]
    return (
        <div className="content22">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=1MfE8LEYYZA" target="_blank" rel="noreferrer">Handle Array with List CONTENT-22</a></h5>
                <p>Make an array.</p>
                <p>Why use map function, not for loop. == for loop not recognise in react</p>
                <p>Make List with an array.</p>
                <p>Make List with array of objects</p>
                <h5>ARRAY</h5>
                {
                    student1.map((data) =>
                        <p>Name is:- {data}</p>
                    )
                }
                <h5>BOJECT</h5>
                {
                    student2.map((data) =>
                        <p><b>Name:-</b> {data.name}, <b>email:-</b> {data.email}, <b>phone:-</b> {data.phone} </p>
                    )
                }
            </div>
        </div>
    )
}

*************************************************************************************




----------------------------------------------------------------------------------------------
List With Bootstrap and Unique Key  ===> CONTENT-23
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=83b0JvWlfAE

Make List from array
What is Unique key in loop? == item me Unique key is liye lagate  hai taki vartual dom usko easly identify kar paye
Intall Bootsrap
Use Bootstrap table with loop
BOJECT Unique key use hoti hai



************************************************************

import { Table } from "react-bootstrap";

function Content23() {

    // array of objects
    const student2 = [
        { name: "anil", email: "anil@test.com", phone: 1111111111 },
        { name: "suresh", email: "suresh@test.com", phone: 222222222 },
        { name: "kamal", email: "kamal@test.com", phone: 3333333333 }
    ]

    // array of objects
    const student3 = [
        { name: "anil", email: "anil@test.com", phone: 111 },
        { name: "suresh", email: "suresh@test.com", phone: 222222222 },
        { name: "kamal", email: "kamal@test.com", phone: 111 },
        { name: "harinder", email: "harinder@test.com", phone: 444 }
    ]

    return (
        <div className="content23">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=83b0JvWlfAE" target="_blank" rel="noreferrer">List With Bootstrap and Unique Key CONTENT-23</a></h5>
                <p>Make List from array</p>
                <p>What is Unique key in loop? == item me Unique key is liye lagate  hai taki vartual dom usko easly identify kar paye</p>
                <p>Intall Bootsrap</p>
                <p>Use Bootstrap table with loop</p>
                <h5>BOJECT Unique key use hoti hai</h5>
                <p><a href="https://react-bootstrap.netlify.app/docs/components/table" target="_blank" rel="noreferrer">bootstrap table link property</a></p>
                <Table striped bordered hover>
                    <tbody>
                        <tr>
                            <td>S No</td>
                            <td>NAME</td>
                            <td>EMAIL</td>
                            <td>PHONE</td>
                        </tr>
                        {
                            student2.map((data, i) =>
                                <tr key={i}>
                                    <td>{i + 1}</td>
                                    <td>{data.name}</td>
                                    <td>{data.email}</td>
                                    <td>{data.phone}</td>
                                </tr>
                            )
                        }

                    </tbody>
                </Table>
                <h5>array object with condition</h5>
                <Table striped bordered hover variant="dark" >
                    <tbody>
                        <tr>
                            <td>S No</td>
                            <td>NAME</td>
                            <td>EMAIL</td>
                            <td>PHONE</td>
                        </tr>
                        {
                            student3.map((data, i) =>
                                data.phone === 111 ?
                                    <tr key={i}>
                                        <td>{i + 1}</td>
                                        <td>{data.name}</td>
                                        <td>{data.email}</td>
                                        <td>{data.phone}</td>
                                    </tr> : null
                            )
                        }

                    </tbody>
                </Table>

            </div>
        </div>
    )
}

************************************************************







----------------------------------------------------------------------------------------------
Nested List with Nested Array  ===> CONTENT-24
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=i5ihJDBp_Bo

Make Nested Array == Array ke ander Array, list>list>list
Understand Nested Array
Use the map Funciton
Use Nested Map funciton




************************************************************************

import { Table } from "react-bootstrap";

function Content24() {

   // Nested Array of objects 
   const student3 = [
    { name: "anil", email: "anil@test.com", addres: [
        {Hn: "10", city:"Noida", country: "India"},
        {Hn: "34", city:"Gurgaon", country: "India"},
        {Hn: "65", city:"Delhi", country: "India"},
        {Hn: "71", city:"Indor", country: "India"}
    ] },
    { name: "suresh", email: "suresh@test.com", addres: [
        {Hn: "10", city:"Noida", country: "India"},
        {Hn: "34", city:"Gurgaon", country: "India"},
        {Hn: "65", city:"Delhi", country: "India"},
        {Hn: "71", city:"Indor", country: "India"}
    ] },
    { name: "kamal", email: "kamal@test.com", addres: [
        {Hn: "10", city:"Noida", country: "India"},
        {Hn: "34", city:"Gurgaon", country: "India"},
        {Hn: "65", city:"Delhi", country: "India"},
        {Hn: "71", city:"Indor", country: "India"}
    ] },
    { name: "harinder", email: "harinder@test.com", addres: [
        {Hn: "10", city:"Noida", country: "India"},
        {Hn: "34", city:"Gurgaon", country: "India"},
        {Hn: "65", city:"Delhi", country: "India"},
        {Hn: "71", city:"Indor", country: "India"}
    ] }
]



    return (
        <div className="content24">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=i5ihJDBp_Bo" target="_blank" rel="noreferrer">Nested List with Nested Array CONTENT-24</a></h5>
                <p>Make Nested Array</p>
                <p>Understand Nested Array</p>
                <p>Use the map Funciton</p>
                <p>Use Nested Map funciton</p>
                <p></p>
                <p><a href="https://react-bootstrap.netlify.app/docs/components/table" target="_blank" rel="noreferrer">bootstrap table link property</a></p>
                <Table striped bordered hover variant="dark" >
                    <tbody>
                        <tr>
                            <td>S NO</td>
                            <td>NAME</td>
                            <td>EMAIL</td>
                            <td>addres</td>
                        </tr>
                        {
                            student3.map((data, i) =>
                                <tr key={i}>
                                    <td>{i+1}</td>
                                    <td>{data.name}</td>
                                    <td>{data.email}</td>
                                    <td>
                                        <Table striped bordered hover variant="dark" >
                                            <tbody>
                                                {
                                                    data.addres.map((item, i) =>

                                                        <tr key={i}>
                                                            <td>{item.Hn}</td>
                                                            <td>{item.city}</td>
                                                            <td>{item.country}</td>
                                                        </tr>

                                                    )
                                                }
                                            </tbody>
                                        </Table>

                                    </td>
                                </tr>
                            )
                        }

                    </tbody>
                </Table>

            </div>
        </div>
    )
}



************************************************************************







----------------------------------------------------------------------------------------------
Reuse Component  ===> CONTENT-25
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=zKsXVhH6XAg

Reuse Component == component ko map loop me rakh kar bar bar chalana use reuse karna
Make a component
Make a list from the array
Use component inside map function


*********************************************************
PARENT
import Content25_child from "./Content25_child"

function Content25() {
    
    //array object
    const studen1 = [
    { name: "Ramesh", email: "ramesh@gmail.com", phone: 111 },
    { name: "Suresh", email: "suresh@gmail.com", phone: 222 },
    { name: "Manoj", email: "manoj@gmail.com", phone: 111 },
    { name: "Kamal", email: "kamal@gmail.com", phone: 444 },
    { name: "Ashok", email: "ashok@gmail.com", phone: 555 }
]

    return (
        <div className="content25">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=zKsXVhH6XAg" target="_blank" rel="noreferrer">Reuse Component CONTENT-25</a></h5>
                <p>Make a component</p>
                <p>Make a list from the array</p>
                <p>Use component inside map function</p>
                <h5>Reuse Component</h5>
                {
                    studen1.map((item, i)=>
                        <Content25_child props_name={item} />
                    )
                }
                

            </div>
        </div>
    )
}

export default Content25;
*********************************************************





*********************************************************
CHILD

function Content25_child(props){
    return(
        <div >
            <p>NAME:- {props.props_name.name}, EMAIL:- {props.props_name.email}, PHONE NO:- {props.props_name.phone} </p>
        </div>
    )
}

export default Content25_child;

*********************************************************










----------------------------------------------------------------------------------------------
React Fragment  ===> CONTENT-26
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=ZlqnQvnj2j4

What is React Fragment? == multiple component/element ko handle/wrap karne ke liye
3 type --- div, <></>, Fragment tag
How to use it?
Use it with child component.


**************************************************
PARENT

import Content26_child from "./Content26_child";
import { Fragment } from "react";
import { Table } from "react-bootstrap";

function Content26() {
    return (
        <Fragment>
            <div className="content26">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=ZlqnQvnj2j4" target="_blank" rel="noreferrer">React Fragment (advance topic) CONTENT-26</a></h5>
                    <p>What is React Fragment? == multiple component/element ko handle/wrap karne ke liye</p>
                    <p>3 type --- div, <></>, Fragment tag </p>
                    <p>How to use it?</p>
                    <p>Use it with child component.</p>
                    <Table striped bordered hover variant="dark" >
                        <tbody>
                            <tr>
                                <Content26_child />
                            </tr>
                        </tbody>
                    </Table>

                </div>
            </div>
        </Fragment>
    )
}

**************************************************





**************************************************
CHILD

function Content26_child() {
    return (
        <>
            <td>Rakesh</td>
            <td>Ramesh</td>
            <td>Suresh</td>
            <td>Mohit</td>
        </>
    )
}

**************************************************








----------------------------------------------------------------------------------------------
Send Data Child to Parent Component (Lifting State Up)  ===> CONTENT-27
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=GStKM1PQkmI

Make a child component?
How pass props parent to a chld component?
Send data child to parent?


******************************************************************
PARENT


import Content27_child from "./Content27_child";
function Content27() {

    // parent funciton to child
    function parentAlert(deta1) {
        alert(deta1);
    }
    function parentAlert2(deta2) {
        alert(`name:- ${deta2.name}, email:- ${deta2.email}, phone:- ${deta2.phone} `);
    }

    return (
        <div className="content27">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=GStKM1PQkmI" target="_blank" rel="noreferrer">Send Data Child to Parent Component (Lifting State Up) CONTENT-27</a></h5>
                <p>Make a child component?</p>
                <p>How pass props parent to a chld component?</p>
                <p>Send data child to parent?</p>
                <p></p>
                <Content27_child alert={parentAlert} alert2={parentAlert2} />
            </div>
        </div>
    )
}

******************************************************************








******************************************************************
CHILD


function Content27_child(props) {
    const deta1 = "Dhurvika Sharma"
    const deta2 = {name: "rakesh kumar", email:"rakesh@gmail.com", phone: 1111}
    return (
        <>
            <h5>child 27</h5>
            <button className="btn btn-primary" onClick={()=>{props.alert(deta1)}} >Alert 1</button>
            <p></p>
            <button className="btn btn-primary" onClick={()=>{props.alert2(deta2)}} >Click Alert 2 </button>
        </>
    )
}

******************************************************************









----------------------------------------------------------------------------------------------
Pure Component STATE (in clsass component) CONTENT-28 ===> CONTENT-28
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=61z36tIx8sc

What is pure Component == ek feature hota hai jo hame react se import karna padta hai, ye sirf class component me hi chalta hai function componetnt ke liye useMemo hooks hota hai
How to use the Pure component? == pure component, component ki re-rendering hone se rokta hai, yadi same name bar bar print ho rahai ho to ye component ko re-render hone se rokta hai
pure Component agar value updatte ho rahi hai to re-rendering karega, agar value same hai to re-rendering nhi karega pure component
Pure Component example with State
Pure Component example with Props?


************************************************************************

import { Component, PureComponent } from "react";

class Content28 extends PureComponent {
    constructor(){
        super();
        this.state={
            count1:0,
            count2:1
        }
    }

    render() {
        console.log("check STATE re-rendering-28")
        return (
            <div className="content28">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=61z36tIx8sc" target="_blank" rel="noreferrer">Pure Component STATE (in clsass component) CONTENT-28</a></h5>
                    <p>What is pure Component == ek feature hota hai jo hame react se import karna padta hai, ye sirf class component me hi chalta hai function componetnt ke liye useMemo hooks hota hai</p>
                    <p>How to use the Pure component? == pure component, component ki re-rendering hone se rokta hai, yadi same VALUE bar bar print ho rahai ho to ye component ko re-render hone se rokta hai</p>
                    <p>pure Component agar value updatte ho rahi hai to re-rendering karega, agar value same hai to re-rendering nhi karega pure component </p>
                    <p>Pure Component example with State</p>
                    <p>Pure Component example with Props?</p>
                    <h5>Example with state</h5>
                    <p>value update:- {this.state.count1}</p>
                    <button className="btn btn-primary" onClick={()=>this.setState({count1:this.state.count1+1})} >update state</button>
                    <p>value not update:- {this.state.count2}</p>
                    <button className="btn btn-danger" onClick={()=>this.setState({count2:this.state.count2})} >not update state</button>
                </div>
            </div>
        )
    }
}



************************************************************************






----------------------------------------------------------------------------------------------
Pure Component (PROPS) (in clsass component) CONTENT-29
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=61z36tIx8sc



**************************************************************************
PARENT 

import { Component } from "react";
import Content29_child from "./Content29_child";

class Content29 extends Component {
    constructor(){
        super();
        this.state={
            count1:10,
            count2:1
        }
    }

    render() {
        return (
            <div className="content29">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=61z36tIx8sc" target="_blank" rel="noreferrer">Pure Component (PROPS) (in clsass component) CONTENT-29</a></h5>
                    <h5>Example with Props</h5>
                    <Content29_child deta_count1={this.state.count1} deta_count2={this.state.count2} />
                    <button className="btn btn-primary" onClick={()=>this.setState({count1:this.state.count1+1})} >update props</button>
                    <button className="btn btn-danger" onClick={()=>this.setState({count2:this.state.count2})} >not update props value</button>
                    
                </div>
            </div>
        )
    }
}


**************************************************************************






**************************************************************************
CHILD

import { Component, PureComponent } from "react";

class Content29_child extends PureComponent {
    render() {
        console.log("check PROPS re-rendering-29")
        return (
            <>
                <h5>Content29_child</h5>
                <p>props update:- {this.props.deta_count1}</p>
                <p>props not update:- {this.props.deta_count2}</p>
            </>
        )
    }
}


**************************************************************************













----------------------------------------------------------------------------------------------
useMemo Hook in React js CONTENT-30
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=yM2q_joUmNQ

Why use useMemo Hook? == useMemo Hook, jab hum kisi component ke under kisi state ko update karne hai, usi componet ke ander koi function bhi hai to wo function bhi state ke update hone par call hota hai, usi ko rokne ke liye hum useMemo ka use karta hai. taki state update hone par sirf state update state call ho funciton bar bar call na ho
function ko bar bar update hone se rokta hai. usme condition laga sakte hai kis state ke update hone par call ho.
Understand Problem
Apply useMemo?



***********************************************************************
import { useMemo, useState } from "react";

function Content30() {
    //USE STATE
    const [count1, setCount1] = useState(1)
    const [count2, setCount2] = useState(10)
    
    
    // with normal funtion
    // function multicount(){
    //     console.log("useMemo multicount function 30")
    //     return count1 * 5;
    // }

    const multiCountMemo = useMemo(function multicount(){
            console.log("useMemo multicount function 30")
            return count1 * 5;
        },[count1])

    return (
        
        <div className="content30">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=yM2q_joUmNQ" target="_blank" rel="noreferrer">useMemo Hook in React js CONTENT-30</a></h5>
                <p>Why use useMemo Hook? == useMemo Hook, jab hum kisi component ke under kisi state ko update karne hai, usi componet ke ander koi function bhi hai to wo function bhi state ke update hone par call hota hai, usi ko rokne ke liye hum useMemo ka use karta hai. taki state update hone par sirf state update state call ho funciton bar bar call na ho</p>
                <p>Understand Problem</p>
                <p>Apply useMemo?</p>
                <h5>Example with State</h5>
                <p>state update value {count1} </p>
                <button className="btn btn-primary" onClick={()=>setCount1(count1+1)} >Update State</button>
                <p>state Unupdate value {count2} </p>
                <button className="btn btn-danger" onClick={()=>setCount2(count2+1)} >Not Update State</button>
                <h5>useMemo hooks</h5>
                <p>Function value:- {multiCountMemo} </p>
            </div>
        </div>
    )
}


***********************************************************************















----------------------------------------------------------------------------------------------
Ref in React js (in class component) CONTENT-31
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=TL-j3kTam0E

ref == directly DOM ko manuplate karna hai, kisi ki property get kar li, color add kar diya, kisi element ka attrubute get kar liya
ref == react js bolta hai REF ko kam se kam use karna hai,  REF ko power hi kisi ko hide show karne ki, color change karne ki, style ko change karne ki power hoti hai, ye DOM ko manuplate kar sakta hai. lekin react js bolta hai DOM ko manuplete nahi karna
Why use ref
Make Class Component
Ref use with example




************************************************************************
import { Component, createRef } from "react";

class Content31 extends Component {
    constructor(){
        super();
        this.cus_input_ref= createRef();
    }
    // componentDidMount(){
    //     console.log(this.cus_input_ref.current.value="1000")
    // }

    getVal1(){
        console.log(this.cus_input_ref.current.value)
        this.cus_input_ref.current.style.color="#f00"
        this.cus_input_ref.current.style.backgroundColor="#ccc"
    }

    render() {
        return (
            <div className="content31">
                <div className="container">
                    <h5><a href="https://www.youtube.com/watch?v=TL-j3kTam0E" target="_blank" rel="noreferrer">Ref in React js (in class component) CONTENT-31</a></h5>
                    <p>ref == directly DOM ko manuplate karna hai, kisi ki property get kar li, color add kar diya, kisi element ka attrubute get kar liya</p>
                    <p>ref == react js bolta hai REF ko kam se kam use karna hai,  REF ko power hi kisi ko hide show karne ki, color change karne ki, style ko change karne ki power hoti hai, ye DOM ko manuplate kar sakta hai. lekin react js bolta hai DOM ko manuplete nahi karna</p>
                    <p>Why use ref</p>
                    <p>Make Class Component</p>
                    <p>Ref use with example</p>
                    <input type="text" ref={this.cus_input_ref} /><br/>
                    <button className="btn btn-primary" onClick={()=>this.getVal1()} >Check Ref get value</button>
                    
                </div>
            </div>
        )
    }
}
************************************************************************









----------------------------------------------------------------------------------------------
useRef Hook CONTENT-32
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=86EkZzXyScQ

useRef == directly DOM ko manuplate karna hai, kisi ki property get kar li, color add kar diya, kisi element ka attrubute get kar liya
useRef == react js bolta hai useRef ko kam se kam use karna hai,  useRef ko power hi kisi ko hide show karne ki, color change karne ki, style ko change karne ki power hoti hai, ye DOM ko manuplate kar sakta hai. lekin react js bolta hai DOM ko manuplete nahi karna

Why use useRef
Ref use with example
Focus, color, value etc handle with useRef.




*********************************************************************************

import { useRef } from "react";

function Content32() {
    // use useRef
    let cust_input_ref = useRef(null);

    // create funciton
    function handleInput(){
        alert("function call")
        cust_input_ref.current.value="1000"
        cust_input_ref.current.focus()
        cust_input_ref.current.style.color="#f00"
        cust_input_ref.current.style.backgroundColor="#ccc"
        //cust_input_ref.current.style.display="none"
    }

    return (
        <div className="content32">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=86EkZzXyScQ" target="_blank" rel="noreferrer">useRef Hook CONTENT-32</a></h5>
                <p>useRef == directly DOM ko manuplate karna hai, kisi ki property get kar li, color add kar diya, kisi element ka attrubute get kar liya</p>
                <p>useRef == react js bolta hai useRef ko kam se kam use karna hai,  useRef ko power hi kisi ko hide show karne ki, color change karne ki, style ko change karne ki power hoti hai, ye DOM ko manuplate kar sakta hai. lekin react js bolta hai DOM ko manuplete nahi karna</p>
                <p>Why use useRef</p>
                <p>Ref use with example</p>
                <p>Focus, color, value etc handle with useRef.</p>
                <h5>useRef Example</h5>
                <input type="text" ref={cust_input_ref} /><br/>
                <button className="btn btn-primary" onClick={handleInput} >Click</button>
            </div>
        </div>
    )
}


*********************************************************************************





----------------------------------------------------------------------------------------------
forwardRef  CONTENT-33
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=xdywAqqHKio

Why use forwardRef. == input or button alag alag component me hai, parent component se child component me REF send karenge as a PROPS.
ek component se dusre component me REF send karne ke liye use hota hia FORWARDREF
Make Child Component
Pass Ref with props and use it



*******************************************************************************
PARENT

import { useRef } from "react";
import Content33_child from "./Content33_child";


function Content33() {

    // ref
    const input_ref = useRef(null);
    
    //funciton
    function updateInput() {
        input_ref.current.value = "1000"
        input_ref.current.style.color="#f00"
        input_ref.current.style.backgroundColor="#ccc"
        input_ref.current.focus()
    }

    return (
        <div className="content33">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=xdywAqqHKio" target="_blank" rel="noreferrer"> forwardRef  CONTENT-33</a></h5>
                <p>Why use forwardRef. == input or button alag alag component me hai, parent component se child component me REF send karenge as a PROPS.</p>
                <p>ek component se dusre component me REF send karne ke liye use hota hia FORWARDREF</p>
                <p>Make Child Component</p>
                <p>Pass Ref with props and use it</p>
                <Content33_child ref={input_ref} />
                <p></p>
                <button className="btn btn-primary" onClick={updateInput} >forwardRef</button>
            </div>
        </div>
    )
}


*******************************************************************************





*******************************************************************************
CHILD


import { forwardRef } from "react";

function Content33_child(props, cus_ref) {
    
    return (
        <>
            <h5>child 33</h5>
            <input type="text" ref={cus_ref} />
            
        </>
    )
}

export default forwardRef(Content33_child);

*******************************************************************************









----------------------------------------------------------------------------------------------
Controlled Component CONTENT-34
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=5QkVq4gd8Mk

What is controlled component? == jiske under input field hoti hai, 
agar input field ko state ke threw control karte hai to usko bolte hai. CONTROL COMPONENT
UNCONTROL COMPONETN == jo directly DOM ke threw control hote hai, jaise jquery/js ke therew ID ke threw

Make component.
Example of controlled component




********************************************************************************

import { useState } from "react";

function Content34() {
    const [name, setName] = useState("jitender")
    const [email, setEmail] = useState("jitender@gmail.com")

    return (
        <div className="content34">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=5QkVq4gd8Mk" target="_blank" rel="noreferrer">Controlled Component CONTENT-34</a></h5>
                <p>What is controlled component? == jiske under input field hoti hai, </p>
                <p>agar input field ko state ke threw control karte hai to usko bolte hai. CONTROL COMPONENT</p>
                <p>UNCONTROL COMPONETN == jo directly DOM ke threw control hote hai, jaise jquery/js ke therew ID ke threw</p>
                <p>Make component.</p>
                <p>Example of controlled component</p>
                <input type="text" value={name} onChange={(e)=>{setName(e.target.value)}} /><br/>
                <input type="text" value={email} onChange={(e)=>{setEmail(e.target.value)}} />
                <p>NAME {name}</p>
                <p>EMAIL {email}</p>
            </div>
        </div>
    )
}

export default Content34;


********************************************************************************










----------------------------------------------------------------------------------------------
Uncontrolled Component CONTENT-35
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=ajGbN7zpGQY


What is uncontrolled component? == jinme input field directly js/ref ke threw control hoti hai
condtion uncontrolled component == directly STATE ke threw control nahi ho rahi ho
use == useRef hook




*********************************************************************

import { useRef } from "react";

function Content35() {
    
    let cus_input_ref1 = useRef();
    let cus_input_ref2 = useRef();

    //function
    function submit_fun(e){
        e.preventDefault()
        console.log(`input 1:- ${cus_input_ref1.current.value}, input 2:- ${cus_input_ref2.current.value}, Content-35 `)
    }

    
    return (
        <div className="content35">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=ajGbN7zpGQY" target="_blank" rel="noreferrer"> Uncontrolled Component CONTENT-35</a></h5>
                <p>What is uncontrolled component? == jinme input field directly js/ref ke threw control hoti hai</p>
                <p>condtion uncontrolled component == directly STATE ke threw control nahi ho rahi ho</p>
                <p>use == useRef hook</p>
                <form onSubmit={submit_fun}>
                    <input type="text" ref={cus_input_ref1} /><br/><br/>
                    <input type="text" ref={cus_input_ref2} /><br/><br/>
                    <button type="submit" className="btn btn-success">Submit</button>
                </form>
            </div>
        </div>
    )
}

export default Content35;

*********************************************************************






----------------------------------------------------------------------------------------------
Simple HOC (Hight order component) CONTENT-36
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=VtSzJn41LgM

What is HOC(Hight order component)?  == ek componetn jo dusre component ko as a PROPS leta ho
or alag se component return karta ho
jo ek component ko as a input le lor out output bhi as a value change karke de.

defination == a higher order component is function that takes component and return a new component.

Make 2 components






*********************************************************************

import { useState } from "react";

function Content36() {
    return (
        <div className="content36">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=VtSzJn41LgM" target="_blank" rel="noreferrer"> Simple HOC (Hight order component) CONTENT-36</a></h5>
                <p>What is HOC(Hight order component)?  == ek componetn jo dusre component ko as a PROPS leta ho</p>
                <p>or alag se component return karta ho</p>
                <p>jo ek component ko as a input le lor out output bhi as a value change karke de.</p>
                <p>Make 2 components</p>
                <HOCcolor1 cmp={Counter} />
                <HOCcolor2 cmp={Counter} />
                <HOCcolor3 cmp={Counter} />
            </div>
        </div>
    )
}

//3nd component
function HOCcolor1(props){
    return(
        <p style={{backgroundColor: "#ffc6ce", padding: "15px"}} >RED:- <props.cmp/></p>
    )
}

//3nd component
function HOCcolor2(props){
    return(
        <p style={{backgroundColor: "#d7c6ff", padding: "15px"}} >BLUE:- <props.cmp/></p>
    )
}

//3nd component
function HOCcolor3(props){
    return(
        <p style={{backgroundColor: "#e1ffc6", padding: "15px"}} >GREEN:- <props.cmp/></p>
    )
}


//2nd component
function Counter(){
    const [count, setCount] = useState(0);
    return(
        <div>
            <h5>2nd component</h5>
            <p>{count}</p>
            <button className="btn btn-primary" onClick={()=>{setCount(count+1)}} >Update Count</button>
        </div>
    )
}


export default Content36;


*********************************************************************








----------------------------------------------------------------------------------------------
Rounting Setup CONTENT-37
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=iUx7hP9JVs0

https://www.youtube.com/watch?v=dLvfJe-KlGI	Create Browser url -- Thapa technical 1
https://www.youtube.com/watch?v=xaGNi81TlKo	Create Navbar -- Thapa technical 2

What is Routing == component ko pages me convert karna, or unme links lagana
Make 2 components
Install Route Package == Router, Route, link
install == search google === react router go to website == https://reactrouter.com/
npm install react-router-dom




*******************************************************************

import { BrowserRouter as Router, Route, Routes, NavLink } from 'react-router-dom';


function Content37() {
    return (
        <div className="content37">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=iUx7hP9JVs0" target="_blank" rel="noreferrer">Rounting Setup CONTENT-37 </a></h5>
                <a href='https://www.youtube.com/watch?v=dLvfJe-KlGI'>Create Browser url -- Thapa technical 1</a><br />
                <a href='https://www.youtube.com/watch?v=xaGNi81TlKo'>Create Navbar -- Thapa technical 2</a>
                <p>What is Routing == component ko pages me convert karna, or unme links lagana</p>
                <p>Make 2 components</p>
                <p>Install Route Package == Router, Route, link</p>
                <p>install == search google === react router go to website == https://reactrouter.com/</p>
                <p>npm install react-router-dom</p>
                <p></p>

                <Router>
                    <ul>
                        <li><NavLink to='/home'>Home</NavLink></li>
                        <li><NavLink to='/about'>About</NavLink></li>
                    </ul>
                    <Routes>
                        <Route path='/home' element={<HomePage />} />
                        <Route path='/about' element={<AboutusPage />} />
                    </Routes>

                </Router>

            </div>
        </div>
    )
}

//home page
function HomePage() {
    return (
        <div>
            <h2>Home page</h2>
            <p>This is home page webiset</p>
        </div>
    )
}

//About us page
function AboutusPage() {
    return (
        <div>
            <h2>Aboutus page</h2>
            <p>This is Aboutus page webiset</p>
        </div>
    )
}

export default Content37;


*******************************************************************












----------------------------------------------------------------------------------------------
Rounting Example with Best Practices CONTENT-38
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=UjHH3sropDY

https://www.youtube.com/watch?v=dLvfJe-KlGI	Create Browser url -- Thapa technical 1
https://www.youtube.com/watch?v=xaGNi81TlKo	Create Navbar -- Thapa technical 2

Use React Router wrapper in index.js
Navbar file for Link
Components in Separate Files
Complete Example



****************************************************************
PARENTS MAIN PAGE
import Content38_header from './Content38_header';
import Content38_home from './Content38_home';
import Content38_about from './Content38_about';
import Content38_contact from './Content38_contact';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';


function Content38() {
    return (
        <div className="content38">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=UjHH3sropDY" target="_blank" rel="noreferrer"> Rounting Example with Best Practices CONTENT-38 </a></h5>
                <a href='https://www.youtube.com/watch?v=dLvfJe-KlGI'>Create Browser url -- Thapa technical 1</a><br />
                <a href='https://www.youtube.com/watch?v=xaGNi81TlKo'>Create Navbar -- Thapa technical 2</a>
                <p>Use React Router wrapper in index.js</p>
                <p>Navbar file for Link</p>
                <p>Components in Separate Files</p>
                <p>Complete Example</p>
                <Router>
                    <Content38_header />
                    <Routes>
                        <Route path='/' element={<Content38_home />}  ></Route>
                        <Route path='/about' element={<Content38_about />}  ></Route>
                        <Route path='/contact' element={<Content38_contact />}  ></Route>
                    </Routes>
                </Router>




            </div>
        </div>
    )
}

export default Content38;

****************************************************************




****************************************************************
CHILD HEADER

import { NavLink } from "react-router-dom";

function Content38_header() {
    
    return (
        <>
            <header>
        <div class="mobile-header">

            <div class="bottom-strip">
                <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
                    <div class="container">
                        <a class="logo" href="#"><img src="https://designwithjitender.co.in/images/logo.png" alt=""/> </a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="mynavbar">
                            <ul class="navbar-nav me-auto ul-menu">
                                <li class="nav-item">
                                    <NavLink className="nav-link" to="/">HOME</NavLink>
                                </li>
                                <li class="nav-item">
                                    <NavLink className="nav-link" to="/about">ABOUT US</NavLink>
                                </li>
                                <li class="nav-item">
                                    <NavLink className="nav-link" to="/contact">CONTACT US</NavLink>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Link 1</a></li>
                                        <li><a class="dropdown-item" href="#">Link 2</a></li>
                                        <li><a class="dropdown-item" href="#">Link 3</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="h-right-panel">
                            <a href="tel:01204320070" class="phone-no">
                                <span class="text">(0)120 432 0070</span>
                            </a>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </header>
            
        </>
    )
}

export default Content38_header;


****************************************************************





****************************************************************
CHILD HOME 

function Content38_home() {
    
    return (
        <>
            <h4>Home page</h4>
            <p>This is home page webiset</p>
            
        </>
    )
}

export default Content38_home;


****************************************************************








****************************************************************
CHILD ABOUT

function Content38_about() {
    
    return (
        <>
            <h4>About page</h4>
            <p>This is About page webiset</p>
            
        </>
    )
}

export default Content38_about;


****************************************************************








****************************************************************
CHILD CONTACT

function Content38_contact() {
    
    return (
        <>
            <h4>Contact page</h4>
            <p>This is Contact page webiset</p>
            
        </>
    )
}

export default Content38_contact;

****************************************************************









----------------------------------------------------------------------------------------------
404 Page - Page Not Found CONTENT-39
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=LToogBKyVIY

Import React Router
Make Simple Routing
Add 404 Page



*****************************************************************

import { NavLink, Route, BrowserRouter as Router, Routes } from 'react-router-dom';

function Content39() {
    return (
        <div className="content39">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=LToogBKyVIY" target="_blank" rel="noreferrer"> 404 Page - Page Not Found CONTENT-39</a></h5>
                <p>Import React Router</p>
                <p>Make Simple Routing</p>
                <p>Add 404 Page</p>
                <p></p>
                <Router>
                    <ul>
                        <li><NavLink to="/">Home</NavLink></li>
                        <li><NavLink to="/about">About</NavLink></li>
                        <li><NavLink to='/login'>Login</NavLink></li>
                    </ul>
                    <Routes>
                        <Route path='/' element={<Home/>}  />
                        <Route path='/about' element={<About/>}  />
                        <Route path='*' element={<PageNotFound/>}  />
                    </Routes>
                </Router>
            </div>
        </div>
    )
}

// HOME
function Home() {
    return (
        <>
            <h4>Home page </h4>
            <p>This is home page webiset</p>
        </>
    )
}

// ABOUT
function About() {
    return (
        <>
            <h4>About page </h4>
            <p>This is About page webiset</p>
        </>
    )
}


// 404
function PageNotFound() {
    return (
        <>
            <h4>404 page</h4>
            <p>This is not found</p>
        </>
    )
}


export default Content39;

*****************************************************************









----------------------------------------------------------------------------------------------
Dynamic Routing with Params CONTENT-40
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=NNiBRYQQd8A

What is Dynamic Routing == jab kai saree page ho to Dynamic Routing use hota hai, map() loop use
Make List with users Data
Add Routing
Make Dynamic Routing



*******************************************************************
PARENTS

import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
import Content40_user1 from "./Content40_user1";

function Content40() {
    const users = [
        { id:1, name: "Anil", email: "anil@gmail.com" },
        { id:2, name: "Sunil", email: "sunil@gmail.com" },
        { id:3, name: "Rajesh", email: "rajesh@gmail.com" },
        { id:4, name: "Kamal", email: "kamal@gmail.com" },
        { id:5, name: "Anupam", email: "anupam@gmail.com" }
    ]
    return (
        <div className="content40">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=NNiBRYQQd8A" target="_blank" rel="noreferrer">Dynamic Routing with Params CONTENT-40 ==========</a></h5>
                <p>What is Dynamic Routing == jab kai saree page ho to Dynamic Routing use hota hai, map() loop use</p>
                <p>Make List with users Data</p>
                <p>Add Routing</p>
                <p>Make Dynamic Routing</p>
                <h5>Dynamic Router</h5>
                <BrowserRouter>
                    <div>
                        <ul>
                            {
                                users.map((item) =>
                                    <li><NavLink to={"/user/" + item.id}>{item.name}</NavLink></li>
                                )

                            }
                        </ul>
                    </div>
                    <Routes>
                        <Route path="/user/:id" element={<Content40_user1/>}/>
                    </Routes>
                </BrowserRouter>
            </div>
        </div>
    )
}

export default Content40;

*******************************************************************




*******************************************************************
CHILD

import {withRouter } from 'react-router-dom';
//let params = useParams;

function Content40_user1(prop) {
    // console.log(prop.match.params.id);
    return (
        <>
            <h4>User1 page</h4>
            <p>This is User1 page webiset</p>
            {/* <p>Hi this is user no {prop.match.params.id}</p> */}
            
        </>
    )
}

export default Content40_user1;

*******************************************************************








----------------------------------------------------------------------------------------------
API kya hoti hai CONTENT-41
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=fto0SavxDko

Application Programming Interface

API is a tool for Sharing data in applications. 
Share data between platforms == like frontend and backend
Share data from pragramming language.

By Json
Because Json is supported by all programming language






----------------------------------------------------------------------------------------------
Call Get Method API CONTENT-42
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=K7u0aNj_kKQ


What is API?
Call API?
Get API data in State
Make List from API

Get Method == SHOW, 
Post Method == STORE, 
Put Method == UPDATE, 
Delete Method == DELETE

fetch("url")



*************************************************************************

import { useEffect, useState } from 'react'

function Content42() {
    //use state
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch("https://divineapi.heuristticminds.com/api/LocationList/Get-LocationList").then((result) => {
            result.json().then((resp) => {
                setData(resp)
                //console.log(resp );

            })
        })

    }, [])
    //console.log(data );

    return (
        <div className="content42">
            <div className="container">
                <h5><a href="https://" target="_blank" rel="noreferrer"> CONTENT-42</a></h5>
                <p>What is API?</p>
                <p>Call API?</p>
                <p>Get API data in State</p>
                <p>Make List from API</p>
                <p>Get Method == SHOW, </p>
                <p>Post Method == STORE, </p>
                <p>Put Method == UPDATE, </p>
                <p>Delete Method == DELETE</p>
                <p>fetch("url").then()</p>
                <h5>API DATA</h5>
                <div className='row'>
                    {
                        data.map((item, i) =>
                            <div key={i} className='col-sm-4 col-12'>
                                <div className='cont-package'>
                                    <p className='cp-text1'>USER NAME</p>
                                    <p className='cp-text2'>{item.locationOwner}</p>
                                    <p className='cp-text1'>ADDRESS</p>
                                    <p className='cp-text2'>{item.locationAddress}</p>
                                    <p className='cp-text1'>MOBILE</p>
                                    <p className='cp-text2'>{item.locationContact}</p>
                                </div>
                            </div>
                        )
                    }

                </div>
            </div>
        </div>
    )
}

export default Content42;

*************************************************************************










----------------------------------------------------------------------------------------------
Call Get Method API (DHARMENDER) CONTENT-43
----------------------------------------------------------------------------------------------

npm install react-axios



***********************************************************************
import { useEffect, useState } from 'react';
import axios from "axios";


function Content43() {

    const [get_data, setData] = useState([]);

    const getmylocation = async () => {
        try {
            const response = await axios.get('https://divineapi.heuristticminds.com/api/LocationList/Get-LocationList')
            setData(response.data)
        }
        catch (error) {
            console.log(error)
        }
    };

    useEffect(() => {
        getmylocation();

    }, []);



    return (
        <div className="content43">
            <div className="container">
                <h5><a href="https://" target="_blank" rel="noreferrer">Call Get Method API (DHARMENDER) CONTENT-43</a></h5>
                <p>npm install react-axios</p>

                <h6>Total Resuls:{get_data.length}</h6>
                <div className="row">

                    {
                        get_data.map(item => (
                            <div className="col-sm-4">
                                <div className="cont-package">
                                    <p className="cp-text1">PRODUCT NAME</p>
                                    <p className="cp-text2">{item.locationName}</p>
                                    <p className="cp-text1">ADDRESS</p>
                                    <p className="cp-text2">{item.locationAddress}</p>
                                    <p className="cp-text1">MOBILE</p>
                                    <p className="cp-text2">{item.locationContact}</p>
                                </div>
                            </div>
                        ))
                    }





                </div>
            </div>
        </div>
    )
}

export default Content43;

***********************************************************************






----------------------------------------------------------------------------------------------
Postman CONTENT-44 =============
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=zuvgOh5TVIY

What is Postman === jab API me koi error aata hai, or pata nhi chalta kaha se error aaya hai, to us error ko solve karne k liye POSTMAN ka use kia jata hai, or test kia jata hai.
How to install it
How to use it
Test API

postman download == https://www.postman.com/downloads/

postman chrome plugin
https://chromewebstore.google.com/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en
https://chromewebstore.google.com/detail/postman-interceptor/aicmkgpgakddgnaphhhpliifpcfhicfo









----------------------------------------------------------------------------------------------
POST Method with API CONTENT-45 ==============
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=3xhIcYeRgks

Why we use the POST Method? == API me Data Add karne ke liye.
Make A form.
Submit Data to API
Test Result



************************************************************************


************************************************************************







----------------------------------------------------------------------------------------------
Delete Method with API CONTENT-46 ==============
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=2i4HqvyTEag

Why we ues the Delete Method? == Delete karne ke liye ek Record ko
Add Delete Button in List
Make funciton and call delete API





************************************************************************


************************************************************************











----------------------------------------------------------------------------------------------
Pre-filled Form CONTENT-47
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=KHgWbPSctRE

Make a simple form.
Add Update Button in list
Set values in list
Populate values in form



****************************************************************
import { useEffect, useState } from "react";

function Content47() {
    // for fatch api
    const [data, setData] = useState([]);

    // for pre filled form
    const [name, setName] = useState();
    const [add, setAdd] = useState();
    const [phone, setPhone] = useState();

    useEffect(() => {
        fetch("https://divineapi.heuristticminds.com/api/LocationList/Get-LocationList").then((result) => {
            result.json().then((resp) => {
                setData(resp);
                //console.log(resp);
                setName(resp[0].locationOwner);
                setAdd(resp[0].locationAddress);
                setPhone(resp[0].locationContact);
            })
        })
    }, [])

    // pre filed updata btn funtion
    function selectUser(id) {
        console.log(data[id - 1])
        setName(data[id - 1].locationOwner);
        setAdd(data[id - 1].locationAddress);
        setPhone(data[id - 1].locationContact);
    }

    return (
        <div className="content47">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=KHgWbPSctRE" target="_blank" rel="noreferrer"> Pre-filled Form CONTENT-47 </a></h5>
                <p>Make a simple form.</p>
                <p>Add Update Button in list</p>
                <p>Set values in list</p>
                <p>Populate values in form</p>
                <h5>GET DATA FORM API</h5>
                <p>Total Data {data.length}</p>
                <div className="row">
                    {
                        data.map((item, i) =>
                            <div key={i} className="col-md-4">
                                <div className="cont-package">
                                    <p className="cp-text1">S NO</p>
                                    <p className="cp-text2">{item.uid}</p>
                                    <p className="cp-text1">NAME</p>
                                    <p className="cp-text2">{item.locationOwner}</p>
                                    <p className="cp-text1">ADDRESS</p>
                                    <p className="cp-text2">{item.locationAddress}</p>
                                    <p className="cp-text1">MOBILE</p>
                                    <p className="cp-text2">{item.locationContact}</p>
                                    <button className="btn btn-primary" onClick={() => { selectUser(item.uid) }} >Update</button>
                                </div>
                            </div>
                        )
                    }

                </div>

                <h5>Pre-filled Form</h5>
                <input type="text" placeholder="Name" value={name} /><br /><br />
                <input type="text" placeholder="Address" value={add} /><br /><br />
                <input type="text" placeholder="Phone" value={phone} /><br /><br />
                <button className="btn btn-primary">Updata Data</button>

            </div>
        </div>
    )
}

export default Content47;

****************************************************************









----------------------------------------------------------------------------------------------
Update Data with PUT Method CONTENT-48 ===================
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=ziFeFibUG3c

Recap Last Video
Update States for updated data
Send Data with PUT API
Test Result








----------------------------------------------------------------------------------------------
Previous State in Functional Component CONTENT-49
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=Nki0Nw_tRVU

What is Previous State
Why we need it
How to get it and use it
Another important and tricky example



*********************************************************************
import { useState } from "react";

function Content49() {

    const [count, setCount] = useState(1)
    const [count2, setCount2] = useState(10)

    // function 1
    function UpdateCounder() {
        let rand = Math.floor(Math.random() * 10)
        setCount((pre) => {
            console.log(pre)
            if (pre < 5) {
                alert(`low value:- ${pre} `)
            }
            return rand

        })
    }

    // function 2
    function UpdateCounder2() {
        setCount2((previous) => {
            console.log(previous)
            return count2 + 1;
        })
    }
    return (
        <div className="content49">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=Nki0Nw_tRVU" target="_blank" rel="noreferrer">Previous State in Functional Component CONTENT-49</a></h5>
                <p>What is Previous State</p>
                <p>Why we need it</p>
                <p>How to get it and use it</p>
                <p>Another important and tricky example</p>
                <h5>use state</h5>
                <p>Count Value:- {count}</p>
                <button className="btn btn-primary" onClick={UpdateCounder} >Update Counter</button>
                <p>Count- {count2} previous value:- { } </p>
                <button className="btn btn-primary" onClick={UpdateCounder2} >Update Counter 2</button>
            </div>
        </div>
    )
}

export default Content49;

*********************************************************************










----------------------------------------------------------------------------------------------
Previous Props with Hooks CONTENT-50
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=l8Frb4bz03U

What is Previous Props?
Why we need it
How to get it and use it
we will use useRef Hooks for it




********************************************************************
PARENT
import Content50_child from "./Content50_child"
import { useState } from "react";


function Content50() {

     const [count, setCount] = useState(1)
   
     return (
        <div className="content50">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=l8Frb4bz03U" target="_blank" rel="noreferrer"> Previous Props with Hooks CONTENT-50</a></h5>
                <p>What is Previous Props?</p>
                <p>Why we need it</p>
                <p>How to get it and use it</p>
                <p>we will use useRef Hooks for it</p>
                <h5>Child component</h5>
                <Content50_child count_value={count} />
                
                <button className="btn btn-primary" onClick={()=>{setCount(Math.floor(Math.random()*10)) }} >Updat Counter</button>
            </div>
        </div>
    )
}

export default Content50;
********************************************************************





********************************************************************
CHILD

import { useEffect, useRef } from "react";

function Content50_child(props) {
    const lastValue = useRef();
    useEffect(() => {
        lastValue.current = props.count_value
    })

    const preValue = lastValue.current;

    return (
        <>
            <h5>child 50</h5>
            <p>Current Value:- {props.count_value}</p>
            <p style={{ color: "red" }} >Previus Value:- {preValue}</p>
        </>
    )
}

export default Content50_child;

********************************************************************






----------------------------------------------------------------------------------------------
State with Object CONTENT-51
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=ldsih80bAJw

Make a state with Object?
Try to update and understand the Problem?
Resoled it in 2 ways





********************************************************************

import { useState } from "react";

function Content51() {

    const[data, setData] = useState({name: "jitender", age: 40});

    return (
        <div className="content51">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=ldsih80bAJw" target="_blank" rel="noreferrer"> State with Object CONTENT-51</a></h5>
                <p>Make a state with Object?</p>
                <p>Try to update and understand the Problem?</p>
                <p>Resoled it in 2 ways</p>
                <h5>Use State</h5>
                <p>{data.name}</p>
                <p>{data.age}</p>
                <input type="text" value={data.name} onChange={(e)=>{setData({...data, name:e.target.value })}}  /><br/><br/>
                <input type="text" value={data.age} onChange={(e)=>{setData({...data, age:e.target.value })}}  />
            </div>
        </div>
    )
}

export default Content51;

********************************************************************





----------------------------------------------------------------------------------------------
React Context API with Hooks  CONTENT-52 =================
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=gZFoGMn_3dw

What is Context API
Why do we need hook for Context API
Make Child Component
Child to parent data communication
MAKE parent component, MAKE child component, MAKE superChild component 
Data Transfer, parent to child, parent to super child, child to parent

REDUX === Redux ek external library hai, wo hame alag se install karni padti hai
CONTEXT API = ye inbuild hoti hai react me

REDUX == use karne par sare component redux ke under aayega, PURA PROJECT under aayega
CONTEXT API == use karne par hame jitne component ki jarurat hai utne component dal sakte hai

example














----------------------------------------------------------------------------------------------
Basic Interview Question React Js (VIDEO-1)   CONTENT-53
----------------------------------------------------------------------------------------------
1. https://www.youtube.com/watch?v=7gxqRdDt6nY
2. https://www.youtube.com/watch?v=WSZEQpl63DM

What is React js
React is a javascript library.
Use for Front end development with good speed
Developed by facebook
The current version is ---

WHAT IS COMPONENT
A piece of code that can resue like function
but more powerful than function
2 Types
Class and Funcitonal component

WHAT IS CLASS COMPONENT?
A Component that has ES 6 Class
More Complex and powerful than functional component
Because it has a lifecycle method and state.
No need to use Hooks

WHAT IS FUNCTINAL COMPONENT
A Component that has no ES 6 Class. It usesa simple JS function
Simple and need hooks for performing state and life cycle methods
Simple to define and recommened

WHAT IS STATE?
Information Holder inside component and it store any data like a variable
When we updte state component will rerender again but not in case of variable
We can not use state outside to component

WHAT IS PROPS?
Share data between component
We can send data parent to child, child to parent, and in sibling component
We can not change props in receiving component

WHAT IS LIFE CYCLE METHOD?
Some Method will execute on the component mount, update and unmount we call them life cycle method
EXAMPLE:
componentDidMount
componentDidUpdate
shouldComponentUpdate
componentWillUnmounting

WHAT ARE THE HOOKS
Functional component do not have state and life cycle metod
To use state and life cycle method we can import hooks in fucnctonal compoent
We can not use Hooks inside functinal component

WHAT ARE THE useState?
This is a hook for use state functional component

WHAT IS useEffect?
This is a hook for use lifecycle methods in a functional component









----------------------------------------------------------------------------------------------
Basic Interview Question React Js (VIDEO-2)   CONTENT-54
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=WSZEQpl63DM

WHAT IS NPM
This is Node Package Manager which help us to install Library in React js
like map, form validation etc

WHAT IS PACKAGE.JSON?
This file profile application details such as  version, node package, description etc

CAN WE USE REACT JS WITHOUT NPM?
Yes we can use it like jqury also. for that we can import in in root file qur use cdn

WHAT WE NEED TO DEVELP REACT APP?
For the Recommended way we need, npm node, and any code editor
Otherwise we can use CDN also
1 install node js
2 npm
3 code editor -- like vs code

CAN WE USE TS(type script) WITH REAT JS
Yes, we can
compiler install then we use == npm i compiler
https://www.youtube.com/watch?v=Xciunyug99U

CAN WE UES JQUERY, ANGULAR, AND BOOTSTRAP WITH REACT JS?
Yes we can
We can install pakages for jquery and bootstrap
We can use react package inside angular with npm install
npm i react-jquery
npm i react-bootstrap

CAN WE CONNECT REACT WITH THE DATABASE DIRCTLY?
No, We need API for DB data.

WHAT IS SPA?
It stands for Single Page Application
Which means Application look like single page and No reload or refresh on jumping on ther page and link.
We can make single page applicaton with react, angular and Vue

WHAT IS JEST?
Jest is a Unit Testing framework
Jest is Recommended and easy to use with react js















----------------------------------------------------------------------------------------------
Basic Form validation  CONTENT-55
----------------------------------------------------------------------------------------------
https://www.youtube.com/watch?v=4PFX52Qmqv8&t=256s

Make Component
Make HTML Form
Define States
Apply Validation





*******************************************************************************

import { useState } from "react";

function Content55() {
    let [user, setUser] =useState();
    let [password, setPassword] =useState();
    let [userErorr, setUserErorr] = useState(false);
    let [passwordErorr, setPasswordErorr] = useState(false);

    // form function
    function loginForm(e){
        if(user.length<3 || password.length<3){
            alert("type current value")
        }
        else{
            alert("form is submit")
        }
        e.preventDefault()
        //alert("hello")
    }

    // User handler function
    function userHandler(e){
        let item = e.target.value
        if(item.length<3){
            setUserErorr(true);
        }
        else{
            setUserErorr(false);
        }
        //console.log(e.target.value)
        setUser(item)
    }

    // Password handler function
    function passwordHandler(e){
        let item = e.target.value
        if(item.length<3){
            setPasswordErorr(true);
        }
        else{
            setPasswordErorr(false);
        }
        //console.log(e.target.value)
        setPassword(item)
    }

    return (
        <div className="content55">
            <div className="container">
                <h5><a href="https://www.youtube.com/watch?v=4PFX52Qmqv8&t=256s" target="_blank" rel="noreferrer">Basic Form validation CONTENT-55</a></h5>
                <p>Make Component</p>
                <p>Make HTML form</p>
                <p>Define States</p>
                <p>Apply Validation</p>
                <h3>Login</h3>
                <form onSubmit={loginForm}>
                    <input type="text" placeholder="User Name" onChange={userHandler} /><br />
                    {userErorr?<span style={{color:"red"}} >user not valid</span>: null}<br />
                    
                    <input type="text" placeholder="Password" onChange={passwordHandler}   /><br />
                    {passwordErorr?<span style={{color:"red"}} >passwod not valid</span>: null}<br />
                    <button type="submit" className="btn btn-primary">Submit</button>
                </form>
                <p>user name:- {user} </p>
                <p>password:- {password} </p>
            </div>
        </div>
    )
}

export default Content55;


*******************************************************************************
===============================================================================
*******************************************************************************

import React, { useState, useRef, useMemo } from 'react';
import JoditEditor from 'jodit-react';

function Content77_A({ placeholder }) {

    const editor = useRef(null);
	const [content, setContent] = useState('');

	const config = useMemo(() => ({
			readonly: false, // all options from https://xdsoft.net/jodit/docs/,
			placeholder: placeholder || 'Start typings...'
		}),
		[placeholder]
	);


    return (
        <div className="content72">
            <div className="container">
                <h5><a href="https://" target="_blank" rel="noreferrer"> Content77_A</a></h5>
				<p>npm i jodit-react</p>


                <JoditEditor
			ref={editor}
			value={content}
			config={config}
			tabIndex={1} // tabIndex of textarea
			onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
			onChange={newContent => {}}
		/>

            <div>{content}</div>



            </div>
        </div>
    )
}

export default Content77_A;

*******************************************************************************
===============================================================================
*******************************************************************************

import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css"; // Import default theme


function Content77() {
    const [value, setValue] = useState("");
    return (
        <div className="content77">
            <div className="container">
                <h5><a href="https://" target="_blank" rel="noreferrer"> CONTENT-77</a></h5>
                <p>npm i react-quill</p>
                <p>link- https://www.npmjs.com/package/quill</p>
                <div style={{ maxWidth: "600px", margin: "20px auto" }}>
                    <h2>React Text Editor Example</h2>
                    <ReactQuill
                        theme="snow"
                        value={value}
                        onChange={setValue}
                        placeholder="Write something here..."
                    />
                    <div style={{ marginTop: "20px", padding: "10px", border: "1px solid #ddd" }}>
                        <h3>Preview:</h3>
                        <div dangerouslySetInnerHTML={{ __html: value }} ></div>
                        <p>{value}</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Content77;


*******************************************************************************
===============================================================================
*******************************************************************************