React From Scratch

lakharashubham007

Shubham Lakhara

Posted on March 31, 2023

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
  6. index to default route set
  7. useNavigate Hook

  8. 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
💖 💪 🙅 🚩
lakharashubham007
Shubham Lakhara

Posted on March 31, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024