React From Scratch
Shubham Lakhara
Posted on March 31, 2023
Session 1
- What is React ??
- Why React is all about Compomnants? componants
- Why React ?? WhyReact
- SPA (Single-page application)
- React Componants ?
-
Reac_JS Setup
- createReact app and VS code installation
- What is node modules in react?
- what is NPM ?
- package.json ? -> what is inside package.json?
- package.lock.json -> Why need and purpose?
- ReactDOM , render() - , file structure in react
- Flow of execution : root -> index.js -> app.js -> Componants
- what is import and export module ?
- What is JSX?
- Why use className instead Class in react ???
Create Component | and //access
Props | Data handle in component
props.children(); //use to show other content
props.className(); //Handle css property
Summary
- Create Componant
- Data handling by props
Session 2
- Handling Events eventlistner inJs === Props in React
-
useState Hook React useStateHook
- syntax
- flow of execution
- Project == update UI by useState (Date and Title )
- event Object in handler shows ip value
- Multiple states
- preventDefault() preventDefault()
Lifting UP GFG CodeStudio Reat
Session 3
- Counter App Project
- Plan With Me Project
Session 4
- useEffect
- class Based components
- Project Window size Update by useEffect
Session 5
- Top Courses == Project
Session 6
- Testimonial Project
REACT BASICS SUMMRY
- INTRO TO REACT
- PROPS
- event Handler
- useState Hook
- Lifting Up Concept
useEffect Hook
4 Projects Completed
REACT INTERMEDIATE
Session -1
- useState with Object
- Controlled Component === value={formData}
- Form Project
Session 2
- Brouser Router
- Routes
- Route Map-with component
- Link vs NavLink
- Nested Routing
- index to default route set
useNavigate Hook
Project to understand == Navigation bar project ReactSPA VSCode
Session - 3
1.Project Studynotion - functionality
Session - 4
- project Studynotion - Style Tailwindcss
REACT INTERMEDIATE SUMMRY
- useState object
- Routers
- useNavigate Hook
- Controlled component
Project
1.Form App
2.Navbar Routes App
3.Studynotion
REACT ADVANCE
Session -1
- customReact Hook like useGif()
-
axios concept
- Random gif project
Session - 2
- context API
- state Management through context API
- createContext()
- Providers
- consume
useContext() Hook;
Project codehlp blog
Session - 3
- useSearch() hook
- useLoactaion hook
Project Codehelp blog + Routes
Session 4
1.Redux
2.Flow of Execution Redux
- createSlice()
- reducers
- create store
- Provider
- useSelector()
useDispatecher()
Redux project: Shopping Cart
React Resources
💖 💪 🙅 🚩
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.