React From Scratch
Published: 2023-03-31 01:32:52

## Session 1 

1. What is React ??  
   1. Why React is all about Compomnants? [componants](https://www.w3schools.com/react/react_components.asp#:~:text=Components%20are%20independent%20and%20reusable,will%20concentrate%20on%20Function%20components.)
2. Why React ?? [WhyReact](https://www.freecodecamp.org/news/why-use-react-for-web-development/)
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](https://legacy.reactjs.org/docs/handling-events.html) eventlistner inJs === Props in React
2. useState Hook [React useStateHook](https://legacy.reactjs.org/docs/hooks-state.html)
   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()](https://www.w3schools.com/jsref/event_preventdefault.asp#:~:text=Definition%20and%20Usage,it%20from%20submitting%20a%20form)   
  
3. Lifting UP [GFG](https://www.geeksforgeeks.org/lifting-state-up-in-reactjs/)  [CodeStudio](https://www.codingninjas.com/codestudio/library/lifting-the-state-up-in-reactjs) [Reat](https://legacy.reactjs.org/docs/lifting-state-up.html)

---

## 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
6. <outlet/>
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
2. 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;

1. Project codehlp blog

## Session - 3

1. useSearch() hook
2. useLoactaion hook

Project Codehelp blog + Routes

## Session 4

1.Redux
2.Flow of Execution Redux
3. createSlice()
4. reducers
5. create store
6. Provider
7. useSelector()
8. useDispatecher()


1. Redux project: Shopping Cart


## React Resources

1. [React Hooks Simplified] 
   (https://courses.webdevsimplified.com/react-hooks-simplified)