The Ultimate React JS Course 2026 [w/ Real-World Projects]

Introduction of this Section

Var vs Let vs Const

Arrow Function

Accessing the Objects

Object Destructuring

Map method [IMPORTANT]

Filter method

Spread Operator

Ternary Operator

Modules in JavaScript [IMPORTANT]

Export Default [IMPORTANT]

Summary - JavaScript ES6

Introduction of this Section

Setting up New Project

Build your own component

Solution of this exercise

How JSX and Babel works

Adding Elements in Component

JavaScript expression in JSX

Setting Elements Attributes

Events in React

What is State?

What are React hooks?

UseState hook in React

Handling user inputs

Mapping List

Summary - React Basics Concepts

Introduction of this Section

Project Overview and Planning

Creating the Website Layout

Creating Task Form Componen

Adding styles for Form Component

Creating Tag component

Props in React

Building Task List Component

Solution of the Exercise

Building TaskCard Component

Summary of this Section

Introduction of this Section

Handling Form

Shortcut trick to handle complex form

React Strict Mode

Handling Tag Selection

Display selected Tag on UI

Displaying the Task Cards

Deleting single task

Saving tasks in Local Storage

Basics of useEffect hook

Adding custom fonts

Wrapping up Project

[Optional] Implement Drag and Drop for Tasks

Summary of this Section

Introduction of this Section

Setting up New Project & Layout Style

Adding Custom Fonts

Buildling Navbar Component

Building MovieList Component

Building MovieCard Component

Styling the MovieCard Component

What is an API?

TMDB Website is not Working?

Register & Generating the API key

Calling API using Fetch Method

Exercise for calling API

Solution of this Exercise

Summary of this Section

Introduction of this Section

Filter vs Sort

Implementing Filter Feature

Creating Reusable Filter Feature

Handling Sorting Selection

Debugging React Application

Implementing Sorting Feature

Adding Switch for Dark-light Mode

Toggle Switch Tutorial with HTML and CSS

Dark Mode Implementation

Making MovieList component Reusable

Summary

Introduction of this Section

Setting up Project

Adding Routing for Application

Addingg Not-Found Page

Making Single Page Application

Route Parameters

Query String

Nested Routing in React Router

Programmatically Navigation

Exercise for Routing

Adding Routing to our project

Defining Route Parameter for Single Movie

Summary of Routing

Introduction of this Section

UseEffect hook in Details

Dependencies of useEffect

UseEffect Clean up Function

Basics of HTTP Requests

Fetching Sellers data

Adding Loading indicator

Handling Errors

Handling Promise with Async await

Adding new Seller

Deleting the Seller

Exercise - for calling API

Solution - for updating the Seller

Making axios variable for HTTP request

Summary

Introduction of Project 03

Setting up new Project & Layout style

Building Navbar Component

Adding Navbar Links

Building Hero Section for Home

Adding Featured Products section

Creating Product Card

Building Product Page

Creating Product List Section

Creating Single Product Component

Copy Product Object from here

Adding Details Section for Product

Building CartPage component

Creating Common Table Component

Modify Cart Page Component

Building MyOrder Page

Introduction of this Section

Building Login Form

Understanding useRef hook

Handling Form using useRef hook

Handling Form using State hook

Managing Form with React Hook Form

Form Validation

Form Validation based on Schema

Exercise for Forms

Solution of this Exercise

Handling Image Upload

Summary

Introduction of this Section

Installing MongoDB Compass in Windows

Installing MongoDB Compass in Mac

Setting up Backend

Implementing Routing in our Application

Fetching Producs

Making Product Card Dynamic

Fetching Categories

Creating Fetching Custom Hook

Adding Loading skeleton

Fetching Products by category

Pagination in React

Creatingg Pagination UI

Infinite Scrolling in React

Exercise- Single Product Page

Solution of this Exercise

Summary

Introduction of this section

Register new user API

FREE Alternative of ThunderClient [API Testing with Files]

Connecting Signup Page with API

Handling Errors for Signup

Login a user API

Connecting Login Page with API

What is JWT & How it works?

Storing the JSON Web Token

Getting user from Token

Hide/Show component depending on User

Implementing Logout functionality

Simplify the code

Summary

Introduction of this Section

Understanding Add to cart Feature

Add to cart Functionality

Calling Protected API

Calling Add to Cart API

Fetching User Cart From Backend

UseContext hook

Exercise - Creating Cart Context

Removing Items from Cart

Increase and Decrease Product Quantity

Add to Cart in Product Card

Calling API for Checkout

Exercise - getting users orders

Solution for this exercise

Creating Protected Routes

Redirect to previous Protected Page after login

Summary

Introduction of this Section

Fetching Featured Products

Fetching Products by Search Query

Auto Suggestion in Search Bar

Navigation for Auto Suggestion

Debouncing Method for Calling Suggestions API

Sorting Product List

Introduction of this Section

Understanding useMemo hook

Exercise for useMemo hook

Understanding useCallback hook

How to use useCallback hook

Exercise for useCallback hook

UseReducer hook

Exercise for useReducer hook

Complex Actions in useReducer hook

Summary

Introduction of this section

What is React Query and Why we need it?

Setting up React Query in our Project

Fetching Sellers Data

Error Handling & Loading

Creating custom hook with React Query

Adding React Query DevTools

Customize our React Query Properties

Exercise for Fetching Data

Understanding Query Params in React Query

Pagination in React Query

Infinite Scrolling in React Query

UseMutation hook for Mutation

Delete and Update Sellers

Handling Error in Mutation

Showing Progress During Mutations

Optimistic update in React Query

Custom hook for AddSellers Mutation

Summary - React Query

Introduction of this section

Do you really need React Query for your Project?

Setting up React Query

Fetching Data using useQuery

Implementing Infinite Query

Should we add caching in AutoSuggestions?

Code for Auto Suggestions with Caching

Updating getCart Query

Mutation for Add to Cart

Mutation for Remove from Cart

Mutation for Increase and Decrease

Bonus - Adding Animation in React Application

What you will learn in this Section

Latest React Compiler

Write Metadata in React Components

Latest use API of React 19

How to improve API call using use API?

Does use API replace useEffect hook?

Use API vs React Query [Which is best?]

New React Hooks - useEffectEvent

Manage Form using useActionState

Apply Optimistic Update using useOptimistic

Activity Component

Summary of React 19

Introduction of this Section

Beginning of Deployment

Adding MongoDB Cloud [LATEST UI]

How to upload projects on Github

Deploying Backend

Preparing our React application for deployment

Deploying React application

Thank You :)