The Complete React & Next.js Course: From Beginner to Pro

Course Curriculum

Chapter 1: Introduction

Lecture 1: What is React ?

Lecture 2: Environment Setup

Lecture 3: IMPORTANT: Source Code Repository

Chapter 2: React Basics

Lecture 1: Creating React Project

Lecture 2: Creating Our First React Component

Lecture 3: Function Components

Lecture 4: Adding Styles

Lecture 5: Displaying Data

Lecture 6: Conditional Rendering

Lecture 7: Event Handling

Lecture 8: Props

Lecture 9: Project 1 – Profile Card

Lecture 10: Props Validation

Lecture 11: State

Lecture 12: Stale State

Chapter 3: Project 2 – Task Manager

Lecture 1: Project Overview

Lecture 2: TaskList Component

Lecture 3: TaskInput Component

Lecture 4: App Component

Lecture 5: Adding Event Handling

Lecture 6: Styling

Chapter 4: React Hooks

Lecture 1: Introduction to React Hooks

Lecture 2: Context Hook

Lecture 3: Reducer Hook

Lecture 4: Project 2 Follow Up: Using Reducers

Lecture 5: useRef

Lecture 6: useMemo

Lecture 7: Custom Hooks

Chapter 5: Side Effects in React

Lecture 1: Introduction to Side Effects

Lecture 2: useEffect Hook

Lecture 3: useEffect with Dependecies

Lecture 4: Cleanup Functions

Chapter 6: Project 3 – SpaceX Launches Tracker

Lecture 1: Creating LaunchTracker Component

Lecture 2: Adding Pagination

Lecture 3: Styling the Website

Chapter 7: Debugging and Deploying React Applications

Lecture 1: React Development Tools

Lecture 2: Deploying to Github Pages

Lecture 3: Deploying With Vercel

Chapter 8: Using Tailwind CSS with React

Lecture 1: What is Tailwind CSS ?

Lecture 2: Margin and Padding

Lecture 3: Colors in Tailwind

Lecture 4: Font Size and Color

Lecture 5: Background Color

Lecture 6: Shadows

Lecture 7: Grids

Lecture 8: Hover Event

Lecture 9: Setting Up Tailwind CSS with React

Lecture 10: Project 4 – Card Gallery Project Overview

Lecture 11: Creating the Card Component

Lecture 12: Creating the Cards Gallery

Lecture 13: Final Touches

Chapter 9: GraphQL with React

Lecture 1: Introduction to GraphQL

Lecture 2: GitHub GraphQL API

Lecture 3: Creating a Github Personal Token

Lecture 4: Setting Up Apollo Client

Lecture 5: Retrieving Github User Repositories via GraphQL

Chapter 10: React The Legacy Way: Class Components

Lecture 1: Introduction to Class Components

Lecture 2: Managing State in Class Components

Lecture 3: Class Components Life-Cycle Methods

Chapter 11: Project 5 – Weather Dashboard Using Class Components

Lecture 1: Fetching the Weather Data via OpenWeather API

Lecture 2: Writing the JSX code

Lecture 3: Implementing the Event Handlers

Chapter 12: React Router

Lecture 1: Introduction to React Router

Lecture 2: Navigation with NavLink

Lecture 3: Nested Routing

Lecture 4: Navigating Programmatically

Lecture 5: URL Parameters

Chapter 13: Project 6 – Online Shopping Website

Lecture 1: Project Overview

Lecture 2: Setting Up the Project

Lecture 3: Create the JSON Data

Lecture 4: Setting Up React Router

Lecture 5: Creating the Home Page

Lecture 6: Creating the Product Detail Page

Lecture 7: Creating the Profile Page

Chapter 14: Using Next.js

Lecture 1: Introduction to Next.js

Lecture 2: IMPORTANT: Next.js Project Source Code

Lecture 3: Creating a Project with Next.js

Lecture 4: Styling

Lecture 5: Fonts Optimization

Lecture 6: Optimizing Images

Lecture 7: Layouts and Pages

Lecture 8: Navigation with Links

Lecture 9: Creating a Database and Deploying

Lecture 10: Fetching Data from the Database

Chapter 15: Project 7 – Building a Blog Website with Next.js

Lecture 1: IMPORTANT: Project's Source Code