MERN Stack New Batch

 //==================A component========== import React , { useState , useCallback } from "react" ; import B from "./B" ; export default function () { const [name , setName]= useState ( null ) ; const changeName= useCallback ((n)=>{ console . log ( "Name=" +n) ; setName(n) ; }) ; return ( <div> <h1> A component </h1> <input value = {name} onChange = {(event)=>setName(event. target . value )} placeholder = { 'Please input name' } /> <h1> {name} </h1> <hr/> <B a = {name} changeName = {changeName} /> { /* setA={setName}*/ } </div> ) }  //==================B component========== export default function (obj) { //{a,setA} return ( <div> <h1> B component </h1> <input value = {obj. a } onChange = {(event)=>obj. changeName (event. target . value )} placeholder = ...

 //====================Component A================== import React , { useState } from "react" ; import B from "./B" ; export default function () { const [name , setName]= useState ( null ) ; return ( <div> <h1> A component </h1> <input value = {name} onChange = {(event)=>setName(event. target . value )} placeholder = { 'Please input name' } /> <h1> {name} </h1> <hr/> <B a = {name} setA = {setName} /> </div> ) }  //====================Component B================== export default function (obj) { //{a,setA} return ( <div> <h1> B component </h1> <input value = {obj. a } onChange = {(event)=>obj. setA (event. target . value )} placeholder = { 'Please input name' } /> <h1> {obj. a } </h1> <hr/> </div> ) }

  import React , { useState } from "react" ; export default function () { //init State Crate inti 10 const [count , Sabir]= useState ( 10 ) ; return <> <div> <center> <h1> {count} </h1> { /*===========================Update State==========*/ } <button onClick = {()=>{Sabir((prevState) =>{ return prevState+ 1 })}} > Count++ </button> </center> </div> </> }

  import React , {Component} from "react" ; export default class TestClass extends Component { render () { function One () { return <><h1> One </h1></> } function Two () { return <><h1> Two </h1></> } return <> <h1> computer </h1> <One/> <Two/> </> ; } } export function Test1 () { return <></> } export function Test () { return <></> }

 Step 1 Src/Home     1 Home.js ===============================Open=================================== export default function () { return <> <h1> Home Component </h1> </> } ===============================Close=================================== 2 Nayan.js ===============================Open=================================== export default function () { return <> <h1> Nayan </h1> </> } ===============================Close=================================== Prem.js ===============================Open=================================== export class Prem { NamePrint () { return <><h1> Prem </h1></> } NamePrint1 () { return <><h1> Prem1 </h1></> } NamePrint100 () { return <><h1> Prem100 </h1></> } } ===============================Close=================================== 3 Tejas.js ==============...

  import logo from './logo.svg' ; import './App.css' ; import React from "react" ; function App () { let products=[ 1 , 2 , 3 , 4 , 5 , 6 ] ; return <> <h1> Sabirs </h1> { products. map ((item)=>( <ProdoctCard src = {item} /> )) } </> ; } export default App ; function ProdoctCard ({src}) { return <img src = { `./img/ ${src} .webp` } /> ; }

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     < input type = "text" id = "element" >< button id = "add" > Add </ button >     < div id = "list" >     </ div >         < button onclick = " Map1 ();" > Map </ button >     < button onclick = " Filter2 ();" > Filter </ button >     < button onclick = " reduce ();" > Reduce </ button >     < button onclick = " ForEACH ();" > ForEach </ button >     < button onclick = " Find ();" > Find </ button >     < button onclick = " Include ();" > Include </ button >     ...

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link href = " https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css " rel = "stylesheet" >     < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous" > < style >     .cursor {         cursor : pointer ;     } </ style > </ head > < body >         < div class = "d-flex justify-content-center align-items-center hh-100" >         < div class = "col-12 col-lg-4 card p-2 m-2"...

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous" >     < style >         .hh-100 {             height : 100vh !important ;         }     </ style > </ head > < body >         < div class = "d-flex justify-content-center align-items-center hh-100" >         < div class = "col-12 col-lg-4 card" >             < div class = "p-2...