MERN Stack New Batch

 ============Install=================== npm install @reduxjs/toolkit react-redux create folder stucture ===================Reducer.js========== import { createSlice } from "@reduxjs/toolkit" ; const studentInitSate={ students :[] , //array name : 'Sabir s' , isClose : false, contact : null //int } const studentSlice= createSlice ({ name : "student" , initialState :studentInitSate , reducers :{ addStudent :(state , action)=>{ state. students . push (action. payload ) ; } , removeStudent :(state , action)=>{ state. students . splice (action. payload , 1 ) ; } , popStudent :(state , action)=>{ state. students . pop () ; } , setName :(state , action)=>{ state. name =action. payload ; } , setContact :(state , action)=>{ state. contact =action. payload ; } , toggleButton :(state , action)=>{ ...

//============Main.js====== import React from "react" ; import { BrowserRouter as Router , Link , Routes , Route } from "react-router-dom" ; import HeaderNav from "./HeaderNav" ; import Home from "./Home" ; import About from "./About" ; import Contact from "./Contact" ; import PageNotFound from "./PageNotFound" ; import Profile from "./Profile" ; export default function () { return <> <Router> <HeaderNav/> <Routes> <Route path = { "/" } element = { <Home/> } /> <Route path = { "/about" } element = { <About/> } /> <Route path = { "/contact" } element = { <Contact/> } /> <Route path = { "/User/:username" } element = { <Profile/> } /> <Route path = { "*" } element = { <...

  //========Home.js========= import React , { useState } from "react" ; import { useNavigate } from "react-router-dom" ; export default function () { const [email , setEmail] = useState ( "" ) ; const [password , setPassword] = useState ( "" ) ; const navigate= useNavigate () ; const handleSubmit = (e) => { e. preventDefault () ; localStorage . setItem ( "email" , email) ; localStorage . setItem ( "password" , password) ; // window.location.href="/contact"; navigate( "/contact" ) ; } ; return <> <h1> Home Page </h1> <h3> Login Form </h3> <div> <input type ="email" placeholder ="Enter Email" value = {email} onChange = {(e) => setEmail(e. target . value )} required ...

 npm install react-router-dom //========HeaderNav.js======== import React from "react" ; import { BrowserRouter as Router , Link , Routes , Route } from "react-router-dom" ; export default function () { return <> <header> <nav> <Link to = { "/" } > Home </Link> <Link to = { "/about" } > About </Link> <Link to = { "/contact" } > Contact </Link> </nav> </header> </> } //============About.js========= import React from "react" ; export default function () { return <> <h1> About Page </h1> <p> this is About page </p> </> } //============Contact.js========= import React from "react" ; export default function () { return <> <h1> Contact Page </h1> <p> this...

  import React , { useState } from "react" ; import { Button , TextField , Box , Typography , Dialog } from "@mui/material" ; import { Formik , Form , Field } from "formik" ; import * as Yup from "yup" ; export function MaterialForm () { const [openDialog , setOpenDialog] = useState ( false ) ; // Password validation schema const validationSchema = Yup. object ({ email : Yup. string (). email ( "Invalid Email" ). required ( "Please enter your email" ) , password : Yup. string () . min ( 8 , "Password must be at least 8 characters" ) . max ( 20 , "Password must not exceed 20 characters" ) . matches ( /[a-z]/ , "At least one lowercase letter required" ) . matches ( /[A-Z]/ , "At least one uppercase letter required" ) . matches ( /[0-9]/ , "At least one number required" ) . matches ...

  import { Form , Formik , Field , ErrorMessage } from "formik" ; import * as Yup from "yup" ; import React , { useState } from "react" ; export function TestFormik () { const [password , setPassword] = useState ( "" ) ; // Validation Schema const validationSchema = Yup. object ({ email : Yup. string (). email ( "Invalid Email" ). required ( "Please Input Email" ) , password : Yup. string (). required ( "Please Input Password" ). min ( 8 ). max ( 20 ) , }) ; function LogIn (values) { alert ( `Success! Email: ${values. email } , Password: ${values. password } ` ) ; } // Password Rules Checking const rules = [ { regex : /[a-z]/ , message : "At least one lowercase letter" } , { regex : /[A-Z]/ , message : "At least one uppercase letter" } , { regex : /[0-9]/ , message : "At least one number" } , { regex ...

  import { Form , Formik , Field , ErrorMessage } from "formik" ; import * as Yup from "yup" ; import React , { useState } from "react" ; export function TestFormik () { const [password , setPassword] = useState ( "" ) ; // Validation Schema const validationSchema = Yup. object ({ email : Yup. string (). email ( "Invalid Email" ). required ( "Please Input Email" ) , password : Yup. string (). required ( "Please Input Password" ). min ( 8 ). max ( 20 ) , }) ; function LogIn (values) { alert ( `Success! Email: ${values. email } , Password: ${values. password } ` ) ; } // Password Rules Checking const rules = [ { regex : /[a-z]/ , message : "At least one lowercase letter" } , { regex : /[A-Z]/ , message : "At least one uppercase letter" } , { regex : /[0-9]/ , message : "At least one number" } , { regex ...