MERN Stack New Batch

import React , { createContext , useState , useReducer } from "react" ; export const initState ={ Name : 'sabir' , Contact : '454334' , Roll : '1110' , Count : 0 } export function Student (state , action) { switch (action. Type ) { case "SetStudent" : return { Name :action. Name , Contact :action. Contact , Roll :action. Roll , } ; case "In" : return { Count :state. Count + 1 } ; case "De" : return { Count :state. Count - 1 } ; } } //==========Context API========= //==========Step1========== export const StudentContext = createContext () ; //=====Step2==== export function StudentDIV ({children}){ const [theme , setTheme]= useState ( 'Light' ) ; const [state , dispatch]= useReducer ( Student , initState ) ; return ( <StudentContext.Provider value = {{...

  import React , { useState , useEffect } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; export default function () { const [expense , setExpense] = useState ([]) ; const [filteredExpenses , setFilteredExpenses] = useState ([]) ; const [total , setTotal] = useState ( 0 ) ; useEffect (() => { setFilteredExpenses(expense) ; // Initialize filteredExpenses to match expense updateTotal (expense) ; // Update total when expense changes } , [expense]) ; function updateTotal (filteredList) { const newTotal = filteredList. reduce ((sum , item) => sum + item. Amount , 0 ) ; setTotal(newTotal) ; } return ( <> <ExpenseForm setExpense = {setExpense} setTotal = {setTotal} /> <ExpenseList expense = {expense} setExpense = {setExpense} filteredExpenses = {filteredExpenses} setFilteredExpens...

  import React , { useState , useEffect } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; export default function () { const [expense , setExpense]= useState ([]) ; const [total , setTotal]= useState ( 0 ) ; return <> <ExpenseForm setExpense = {setExpense} setTotal = {setTotal} /> { /*=================*/ } <ExpenseList expense = {expense} setExpense = {setExpense} total = {total} /> </> } //======Form function ExpenseForm ({setExpense , setTotal}) { const [name , setName]= useState ( "" ) ; const [amount , setAmount]= useState ( "" ) ; const [date , setDate]= useState ( null ) ; function Add () { //======== if (name. length != 0 &&amount. length != 0 &&date. length != 0 ){ setExpense(prevExpense => [...prevExpense , { "Name" :name , "Amount" :amount , ...

  import React , { useState , useEffect } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; export default function () { const [expense , setExpense]= useState ([]) ; const [total , setTotal]= useState ( 0 ) ; return <> <ExpenseForm setExpense = {setExpense} setTotal = {setTotal} /> { /*=================*/ } <ExpenseList expense = {expense} setExpense = {setExpense} total = {total} /> </> } //======Form function ExpenseForm ({setExpense , setTotal}) { const [name , setName]= useState ( "" ) ; const [amount , setAmount]= useState ( "" ) ; const [date , setDate]= useState ( null ) ; function Add () { setExpense(prevExpense => [...prevExpense , { "Name" :name , "Amount" :amount , "Date" :date }]) ; setTotal((p)=>p+ parseInt (amount)) ; setName( "" ) ; ...

  import React , { useCallback } from "react" ; export function ParentCom () { // function TestClick() { // alert('TestClick'); // } const TestClick= useCallback (()=>{ alert ( 'TestClick' ) ; }) ; return <> <h1> Parent </h1> <ChildCom Name = { "Sabir" } onClick = {TestClick} /> </> } export function ChildCom (props) { //{Name,onClick} const {Name , onClick}=props ; return <> <h1> Child </h1> <h1> {Name} </h1> <button onClick = {onClick} > Click Hear </button> </> }

  export default function () { function OnSubmit (event) { event. preventDefault () ; console . log ( 'Form submitted with:' ) ; return true; } return <> <form onSubmit = { OnSubmit } action = { "https://abc.com/test" } method = { "Post" } > <input type = { "email" } name = { "email" } /> <br/> <input type = { "password" } name = { "pass" } /> <br/> <button> Submit </button> </form> </> }

  import "./style.css" ; export default function () { function Red (event) { alert ( "Red" ) ; } function Blue (event) { event. stopPropagation () ; console . log (event. type ) ; alert ( "Blue" ) ; } return <> <div onClick = { Red } className = { "red-box" } > <div onClick = { Blue } className = { "blue-box" } > </div> </div> </> } . red-box { height : 400 px ; width : 400 px ; border : solid 1 px ; background : red ; display : flex ; justify-content : center ; align-items : center ; } . blue-box { height : 200 px ; width : 200 px ; border : solid 1 px ; background : blue ; }

 ===========================LifeCycleF.js file name= import React , { useState , useEffect , useRef } from "react" ; export default function () { const [count , setCount]= useState ( 0 ) ; //componentDidMount useEffect (()=>{ console . log ( "Step 4: componentDidMount" ) ; //componentWillUnmount return ()=>{ console . log ( "Step 6: componentWillUnmount" ) ; } } , []) ; //componentDidUpdate state ,props, ref useEffect (()=>{ if (count!= 0 ) console . log ( "Step 5: componentDidUpdate" ) ; } , [count]) ; return <> <h1> computer </h1> <button onClick = {()=>{setCount((p)=>p+ 1 )}} > Counting </button> <h1> count: {count} </h1> </> } ==================App.js========= import logo from './logo.svg' ; import './App.css' ; import React , { useState } from ...

 ========================Class================== import React , { useRef } from "react" ; export default class LifeClass extends React.Component{ //===Step1 Render= constructor () { super () ; this . state ={ name : "prem" } this . name = React. createRef () ; this . output = React. createRef () ; console . log ( "Step1 constructor" ) ; } Show (){ alert ( this . name . current . value ) ; this . output . current . innerHTML = this . name . current . value ; } //===Step2 Render= render () { return ( <div> { /*=======Step3=========*/ } <input onChange = {(e)=> this . setState ({ name :e. target . value })} ref = { this . name } placeholder = { "EnterName" } /> <button onClick = {()=>{ this . Show ()}} > Show </button> <h1 ref = { t...