MERN Stack New Batch

 ///===============css============ . height-box { height : 100 px ; } import React , { useState , useEffect } from "react" ; import 'bootstrap/dist/css/bootstrap.min.css' ; import "./tictak.css" ; let _row= null, _col= null; export default function () { //User1 X=1 //user2 O=0 const [user , setUser]= useState ( 1 ) ; const [isWin , setIsWin] = useState ( false ) ; const [box , setBox]= useState ([ [ "" , "" , "" ] , [ "" , "" , "" ] , [ "" , "" , "" ] ]) ; useEffect (()=>{ // alert(`_row=${_row} _col=${_col}`); if (_col!= null &&_row!= null ){ // console.log("box Update"); // alert(box[0][0]); CheckIsWin (_row , _col) ; } } , [box]) ; function Setvalue (row , col){ if (box[row][col]== "" ){ ...

   ///==========================Css============== . box-pos { position : relative ; height : 200 px ; backgroundColor : "#e9ecef" ; } . rabit { position : absolute ; bottom : 19 px ; } . start-game-panel { background : #000000bf ; position : absolute ; top : 0 px ; bottom : - 13 px ; right : 0 px ; left : 0 px ; display : flex ; justify-content : center ; align-items : center ; } . img-d { width : 400 px ; } ====================React JS Componant================= import React , { useState , useRef } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; import "./rabit.css" ; import "./test.css" ; //============Main Componant export function TestGame () { const [isGameOver , setIsGameOver]= useState ( false ) ; const [isGameStart , setIsGameStart]= useState ( false ) ; const [rabitPos , setRabitPos]= useState ( 0 ) ; const [score , setScore]= useState (...

 AA.js import React , { Component } from "react" ; import BB from "./BB" ; export default class AA extends Component { constructor () { super () ; this . state = { data : "ABC" , name : "Prem" , } ; // Bind the UpdateName method this . UpdateName = this . UpdateName . bind ( this ) ; } UpdateName (v) { console . log ( "AA " + v) ; this . setState ({ name : v }) ; // Dynamically set the state based on the input value } render () { return ( <> <h1> AA </h1> <input value = { this . state . name } onChange = {(event) => this . setState ({ name : event. target . value })} placeholder = { "Please input name" } /> <h1> { this . state . name } </h1> ...

 //==================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 <></> }