React.js

Module 1: Introduction to React

Fundamentals

• What is React? (Library vs Framework)

• React's Virtual DOM concept

• JSX syntax and rules

• Setting up React environment:

  • Create React App (CRA)

  • Vite setup

  • Next.js overview

First React Application

• Folder structure of React project

• Functional vs Class components

• Basic component creation

• Props introduction

Module 2: Core React Concepts

Components Deep Dive

• Component composition

• Props drilling

• Children prop

• PropTypes

• Default props

• Fragments (<></> syntax)

State Management

• useState hook

• State lifting

• Controlled vs uncontrolled components

• Class component state (setState)

Module 3: React Hooks

Essential Hooks

• useEffect (side effects)

• useReducer

• useContext

• useRef

• useMemo

• useCallback

Custom Hooks

• Building reusable hooks

• useFetch example

• useLocalStorage

• useForm handling

Module 4: React Router

• Setting up React Router

• Route configuration

• Dynamic routing

• Nested routes

• Protected routes

• useNavigate hook

• useParams hook

• Lazy loading routes

Module 5: Advanced React Patterns

Performance Optimization

• React.memo

• useMemo/useCallback patterns

• Code splitting

• React.lazy

• Suspense

• Error boundaries

Advanced Patterns

• Render props

• Higher-Order Components (HOCs)

• Compound components

• Context API patterns

• Prop getters

Module 6: State Management

Context API

• Creating contexts

• useContext hook

• Performance considerations

Redux Toolkit

• Redux fundamentals

• RTK Query

• Slices

• Middleware

• Persisting state

Alternative State Managers

• Zustand

• Jotai

• Recoil

• MobX comparison

Module 7: Styling in React

• CSS Modules

• Styled Components

• Emotion

• Tailwind CSS integration

• CSS-in-JS patterns

• Theming solutions

Module 8: Forms in React

• Controlled forms

• Form validation

• Formik library

• React Hook Form

• Yup validation

• Form submission patterns

Module 9: Testing React Apps

• Jest fundamentals

• React Testing Library

• Testing components

• Testing hooks

• Mocking API calls

• Snapshot testing

• E2E testing with Cypress

Module 10: React Ecosystem

Server-Side Rendering

• Next.js fundamentals

• getStaticProps/getServerSideProps

• Static Site Generation

TypeScript with React

• Typing props

• Typing hooks

• Typing events

• Generic components

React Native Basics

• Core concepts

• Differences from React web

• Expo overview

Module 11: Advanced Topics

• WebSockets with React

• Web Workers

• Progressive Web Apps

• Performance profiling

• React 18 features:

  • Concurrent rendering

  • Transitions

  • Suspense for data fetching

Module 12: Real-World Projects

1. E-commerce Site

   • Product listing

   • Shopping cart

   • Checkout flow

2. Social Media Dashboard

   • Infinite scrolling

   • Real-time updates

   • Authentication

3. Task Management App

   • Drag and drop

   • Local storage

   • Offline capability

4. Portfolio Website

   • Animations

   • Theme switching

   • Contact form