Complete React.js Web Guide: From Beginner to Master

Course Curriculum

Chapter 1: 1. Introduction

Lecture 1: Introduction

Lecture 2: What we will build

Chapter 2: 2. React principles

Lecture 1: Environment setup

Lecture 2: Initialize a project

Lecture 3: Typescript vs. Javascript

Lecture 4: JSX explained

Lecture 5: Basics of HTML & CSS

Lecture 6: Understanding React Components

Lecture 7: Component Props

Lecture 8: Component State

Lecture 9: useEffect Explained

Lecture 10: Introducing Git

Chapter 3: 3. Building Landing Page

Lecture 1: Figma Overview

Lecture 2: Creating Header Component

Lecture 3: File Conventions in Next

Lecture 4: Introducing SASS

Lecture 5: Creating Button Component

Lecture 6: Using Next Images

Lecture 7: Making Layout Responsive

Lecture 8: Creating Custom Hook

Lecture 9: Building Responsive Header

Lecture 10: Adding Highlights Section

Lecture 11: Adding Map Section

Lecture 12: Building Footer: Part 1

Lecture 13: Building Footer: Part 2

Chapter 4: Authentication Modals

Lecture 1: Building Modal Layout

Lecture 2: Using React Context

Lecture 3: Styling Modal

Lecture 4: Building Input Component

Lecture 5: Sign In Form

Lecture 6: Adding Sign In Form Footer

Lecture 7: Create Account Form

Lecture 8: Building Checkbox Component

Lecture 9: Getting Form Values

Chapter 5: Website Routing

Lecture 1: Routing in Next.js

Lecture 2: Building FAQ Screen

Lecture 3: Adding Links in Header

Lecture 4: Adding Links in Footer

Chapter 6: Building Listings Page

Lecture 1: Redirecting when Authenticated

Lecture 2: Implementing Tags

Lecture 3: Building Card Component

Lecture 4: Handling Different Card Icons

Lecture 5: Handling Card Click Events

Lecture 6: Filtering Listings

Chapter 7: Building Settings Page

Lecture 1: Building Settings Page

Lecture 2: Highlighting Header Link

Chapter 8: Introduction to REST APIs

Lecture 1: REST APIs Explained

Lecture 2: HTTP Methods Explained

Lecture 3: Overview of Listicle API

Lecture 4: Making Http Requests

Chapter 9: Integrating Auth APIs

Lecture 1: Authentication Form Validation

Lecture 2: Error Handling

Lecture 3: Storing Auth Token

Lecture 4: Creating useUser Hook

Lecture 5: Higher Order Component (HOC): Protected Route

Lecture 6: Authentication Check Fixes

Chapter 10: Service Page UIs

Lecture 1: Building Service Details Page

Lecture 2: Adding New Listing Page

Lecture 3: Image Upload Input

Lecture 4: Custom Styles for Image Uploader

Lecture 5: Reusing Input and Button

Lecture 6: Using Textarea

Lecture 7: Using React Dropdown Package

Chapter 11: Integrating Service APIs

Lecture 1: Getting Services from Backend

Lecture 2: Favoriting Services

Lecture 3: Creating useServices Hook

Lecture 4: Favorite Listings Screen

Lecture 5: Adding New Listing

Lecture 6: Showing My Listings

Lecture 7: Deleting a Listing

Lecture 8: Add Listing Flow Improvements