React JS Full Course Syllabus
- Module 1: Introduction to React
- What is React?
- History and evolution of React
- Why React is popular
- SPA (Single Page Application)
- Virtual DOM
- React vs Angular vs Vue
- Learning Outcomes
- Understand React fundamentals
- Know when and why to use React
- Module 2: JavaScript Refresher (ES6)
- let, const, var
- Arrow functions
- Template literals
- Destructuring
- Spread & Rest operators
- Array methods (map, filter, reduce)
- Modules (import/export)
- Module 3: React Environment Setup
- Node.js & npm
- Create React App
- Project folder structure
- Running the React app
- JSX basics and rules
- Module 4: React Components
- What are components?
- Functional components
- Class components (overview)
- Component reuse
- Exporting and importing components
- Module 5: Props
- What are props?
- Passing props to components
- Props destructuring
- Default props
- Props vs State
- Module 6: State & Hooks
- What is state?
- useState hook
- Updating state
- Multiple states
- Rules of hooks
- Module 7: Event Handling
- Handling events in React
- onClick, onChange, onSubmit
- Passing parameters to events
- Synthetic events
- Module 8: Conditional Rendering
- if / else conditions
- Ternary operator
- Logical && operator
- Conditional components
- Module 9: Lists & Keys
- Rendering lists using map()
- Keys and their importance
- Dynamic list rendering
- Module 10: Forms in React
- Controlled components
- Handling input fields
- Form submission
- Basic validation
- Module 11: useEffect Hook
- Side effects in React
- Component lifecycle overview
- Dependency array
- Cleanup function
- Module 12: Styling in React
- CSS in React
- Inline styles
- CSS Modules
- Bootstrap / Tailwind integration
- Module 13: React Router
- Routing concepts
- BrowserRouter
- Routes & Route
- Link & NavLink
- 404 Page handling
- Module 14: API Integration
- What is an API?
- Fetch API
- Axios
- GET & POST requests
- Handling loading & errors
- Module 15: Advanced React Concepts
- useRef
- useMemo
- useCallback
- Context API
- Custom Hooks
- Module 16: Mini Projects
- Counter App
- Todo App
- Weather App
- Quiz Application
- API Dashboard