ES6 Features (15hrs – 500 examples + Assignments)

Basic Level

1. Introduction to React

• What is React?
• History and Evolution
• Key Features and Advantages
• Setup Development Environment
• Create a Simple React App

2. React Components

• Understanding Components
• Functional
• JSX Syntax
• Props and State
• Event Handling

3. JSX and Rendering

• JSX Basics
• Rendering Elements
• Conditional Rendering
• Lists and Keys

4. State and Props

• Managing State in Components
• Passing Data via Props
• Stateless vs. Stateful Components
• Lifting State Up

5. Handling Events

• Adding Event Listeners
• Handling Forms and Inputs

• Synthetic Events

6. Basic Hooks

• useState Hook
• useEffect Hook (Basic Usage)
• Rules of Hooks

7. Project: Simple React App

• Build a basic app integrating the above concepts
• Example: Todo List App

Intermediate Level

1. Advanced State Management

• useReducer Hook
• Context API for State Management
• Integrating useContext with useReducer

2. React Router

• Introduction to React Router
• Setting Up Routes
• Navigation between Routes
• Route Parameters
• Nested Routes

3. Advanced Hooks

• useRef Hook
• useMemo Hook
• useCallback Hook
• Custom Hooks

4. Form Handling

• Controlled vs. Uncontrolled Components
• Form Validation
• Third-Party Libraries (Formik)

5. Error Handling

• Error Boundaries
• Handling Errors Gracefully

6. Performance Optimization

• React.memo
• Lazy Loading and Suspense
• Profiling and Optimization Techniques

7. Project: Intermediate React App

• Build a more complex app
• Example: Blog

Advanced Level

1. Advanced Patterns

• Higher-Order Components (HOC)
• Render Props
• Compound Components

2. State Management with Redux

• Introduction to Redux
• Redux Toolkit
• Middleware (Redux Thunk, Redux Saga)
• Connecting Redux with React

3. Testing in React

• Unit Testing with Jest
• Testing Components with React Testing Library

4. Server-Side Rendering (SSR) and Static Site Generation (SSG)

• Introduction to Next.js
• SSR with Next.js
• SSG with Next.js

• Dynamic Routes in Next.js

5. TypeScript with React

• Introduction to TypeScript
• TypeScript with React Components
• Type Safety with Props and State
• Advanced TypeScript Patterns in React

6. Integrating with Backend Services

• Fetching Data with Fetch API/Axios
• Handling Authentication

7. Project: Advanced React App

• Full-fledged application incorporating advanced concepts
• Full-fledged Ecommerce application