MERN Stack New Batch

  <! 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...

  <! 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" name = "" id = "item" >     < button onclick = " Add ();" > Add </ button >     < ol id = "list" >             </ ol > </ body > < script > let a =[]; function Add (){     let item = document . getElementById ( "item" ). value ;     a . push ( item );     Display (); } function Display (){     let list = document . getElementById ( "list" );     list . innerHTML = "" ;     a . map (( item , index ) => {         list . innerHTML =   list . innerHTML + ` <li...

===========Step1======== Define Redux Slice: Create Slice (studentSlice.js) -initState -createSlice -export action -export default slice import { createSlice } from '@reduxjs/toolkit' ; //========== Initial State ============== //==========1) State ============ const initialState = { students : [ { name : "Sabir" , class : "BCA" } , { name : "Ali" , class : "MCA" } ] , stop : false, index : 0 } ; //========== Slice Definition ========== const studentSlice = createSlice ({ name : "StudentName" , initialState : initialState , //==========2) Reducer reducers : { //============= Add Student ========= addStudent : (state , action) => { state. students . push (action. payload ) ; // Add new student to the array } , //============= Update Student ========= updateStudent : (state , action) => { const { index , updatedDat...

  Example Application: Array CRUD Operations with Redux Example Scenario: Managing an Array of Students We’ll manage an array of student objects using Redux with CRUD operations. Initial State: const initialState = {     students : [         { name : "Sabir" , class : "BCA" },         { name : "Ali" , class : "MCA" }     ] }; Slice ( features/studentSlice.js ): import { createSlice } from '@reduxjs/toolkit' ; const studentSlice = createSlice ({     name : 'students' ,     initialState : {         students : [             { name : "Sabir" , class : "BCA" },             { name : "Ali" , class : "MCA" }         ]     },     reducers : {         addStudent : ( state , action ) => {             state . students...

  Chapter: Understanding Redux in React Applications Introduction to Redux Redux is a state management library commonly used with React. It helps manage application state in a predictable way, making it easier to debug and maintain complex applications. Core Principles of Redux Single Source of Truth: The entire state of the application is stored in a single JavaScript object. State is Read-Only: The state can only be changed by dispatching actions. Changes are Made with Pure Functions: Reducers are pure functions that take the current state and an action, and return a new state. Key Concepts in Redux Store The store is the central repository for the application’s state. It holds the state tree and provides methods to access the state, dispatch actions, and subscribe to changes. Actions Actions are plain JavaScript objects that describe what should happen in the application. An action must have a type property to indicate its purpose. Optionally, it can include a payload to pa...