React Mega Course – Learn React and then build 6 projects

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Projects that are created throughout the course

Lecture 3: VS Code and Chrome extensions, course files and git repos

Chapter 2: React for beginners

Lecture 1: 01 Create react app with Vite

Lecture 2: Clean up and add bootstrap

Lecture 3: JSX

Lecture 4: Functions are components

Lecture 5: Extracting into separate components

Lecture 6: Variables, inputs and inline styling

Lecture 7: Props

Lecture 8: Children

Lecture 9: State

Lecture 10: More efficient useState

Lecture 11: Returning objects and spread in state

Lecture 12: Looping in jsx

Lecture 13: Add Customer

Lecture 14: If and else if in jsx

Lecture 15: useEffect

Lecture 16: Routing ( adding components )

Lecture 17: Routes and Links

Lecture 18: useParams and useSearchParams

Lecture 19: useNavigate and NavLink

Lecture 20: redux toolkit and store setup

Lecture 21: counterSlice and useSelector

Lecture 22: Actions and useDispatch

Lecture 23: useDispatch with payload

Lecture 24: productSlice

Lecture 25: ProductDetails

Lecture 26: extraReducers

Lecture 27: Custom actions

Chapter 3: Project 1: Counter

Lecture 1: Project intro

Lecture 2: Initial project setup

Lecture 3: App jsx and bootstrap theme

Lecture 4: Separate into components

Lecture 5: Card refactor

Lecture 6: Count state and prop

Lecture 7: Reset counter

Lecture 8: Reusable Button component

Lecture 9: Limit counter, change subtitle and reset icon

Lecture 10: Spacebar to increment

Chapter 4: Project 2: Wordlytics

Lecture 1: Project intro

Lecture 2: Initial project setup

Lecture 3: App jsx and css

Lecture 4: Separate into components

Lecture 5: Controlled textarea and basic validation

Lecture 6: Number of characters (lifting up the state)

Lecture 7: Other stats

Lecture 8: class below 0 and constants

Chapter 5: Project 3: TO-DO list

Lecture 1: Project intro

Lecture 2: Initial project setup

Lecture 3: App jsx and css

Lecture 4: Separate into components

Lecture 5: initialItems and better organization

Lecture 6: AddTask and useRef

Lecture 7: handleAddItem in App

Lecture 8: Handle other button events

Lecture 9: Toggle checkbox

Lecture 10: Delete item

Lecture 11: Counter and no tasks message

Lecture 12: Sorting items

Lecture 13: localStorage

Lecture 14: useMemo

Lecture 15: Public path fix

Chapter 6: Project 4: Customer-Management

Lecture 1: Project intro

Lecture 2: Initial project setup (customer-management)

Lecture 3: CustomerList

Lecture 4: store and apiSlice

Lecture 5: customersApiSlice

Lecture 6: Routing

Lecture 7: AddCustomer component

Lecture 8: Outlet

Lecture 9: AddCustomer functionality

Lecture 10: How RTK Query caching works

Lecture 11: Toast notifications

Lecture 12: EditCustomer endpoints and routing

Lecture 13: EditCustomer

Lecture 14: Loading and throttling

Lecture 15: Delete customer

Lecture 16: Styling

Chapter 7: Project 5: Easy Recipes

Lecture 1: Project intro

Lecture 2: Create React and Express apps

Lecture 3: Concurrently

Lecture 4: Mongoose, models and connect to DB

Lecture 5: Seed data

Lecture 6: Refactor DB Connection

Lecture 7: dotenv

Lecture 8: Recipes route

Lecture 9: API CRUD routes

Lecture 10: App JSX

Lecture 11: Routing

Lecture 12: store and apiSlice

Lecture 13: List recipes

Lecture 14: AddRecipe (slice and form)