React From Scratch

Session 1

1. What is React ??
   1. Why React is all about Compomnants? componants
2. Why React ?? WhyReact
3. SPA (Single-page application)
4. React Componants ?

5. Reac_JS Setup

   1. createReact app and VS code installation
   2. What is node modules in react?
   3. what is NPM ?
   4. package.json ? -> what is inside package.json?
   5. package.lock.json -> Why need and purpose?
   6. ReactDOM , render() - , file structure in react
   7. Flow of execution : root -> index.js -> app.js -> Componants
   8. what is import and export module ?
   9. What is JSX?
   10. Why use className instead Class in react ???

6. Create Component | and //access

7. Props | Data handle in component

8. props.children(); //use to show other content

9. props.className(); //Handle css property

Summary

1. Create Componant
2. Data handling by props

---

Session 2

1. Handling Events eventlistner inJs === Props in React

2. useState Hook React useStateHook

   1. syntax
   2. flow of execution
   3. Project == update UI by useState (Date and Title )
   4. event Object in handler shows ip value
   5. Multiple states
   6. preventDefault() preventDefault()

3. Lifting UP GFG CodeStudio Reat

---

Session 3

1. Counter App Project
2. Plan With Me Project

---

Session 4

1. useEffect
2. class Based components
3. Project Window size Update by useEffect

---

Session 5

1. Top Courses == Project

---

Session 6

1. Testimonial Project

---

REACT BASICS SUMMRY

1. INTRO TO REACT
2. PROPS
3. event Handler
4. useState Hook
5. Lifting Up Concept

6. useEffect Hook

7. 4 Projects Completed

---

REACT INTERMEDIATE

Session -1

1. useState with Object
2. Controlled Component === value={formData}
3. Form Project

Session 2

1. Brouser Router
2. Routes
3. Route Map-with component
4. Link vs NavLink
5. Nested Routing
7. index to default route set

8. useNavigate Hook

9. Project to understand == Navigation bar project ReactSPA VSCode

---

Session - 3

1.Project Studynotion - functionality

Session - 4

1. project Studynotion - Style Tailwindcss

REACT INTERMEDIATE SUMMRY

1. useState object
2. Routers
3. useNavigate Hook
4. Controlled component

Project
1.Form App
2.Navbar Routes App
3.Studynotion

---

REACT ADVANCE

Session -1

1. customReact Hook like useGif()

2. axios concept

   1. Random gif project

Session - 2

1. context API
2. state Management through context API
3. createContext()
4. Providers
5. consume

6. useContext() Hook;

7. Project codehlp blog

Session - 3

1. useSearch() hook
2. useLoactaion hook

Project Codehelp blog + Routes

Session 4

1.Redux
2.Flow of Execution Redux

1. createSlice()
2. reducers
3. create store
4. Provider
5. useSelector()

6. useDispatecher()

7. Redux project: Shopping Cart

React Resources

1. React Hooks Simplified