ReactJS – The Beginner Masterclass [NEW]

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction & Course Prerequisites

Lecture 2: Build a Simple React App – Part 1

Lecture 3: Build a Simple React App – Finalize

Chapter 2: Course Code

Lecture 1: Get the Source code

Chapter 3: Introduction to React JS – What is React & How it Works & Hands-on

Lecture 1: The Old vs New Way of Building Web Apps – SPA

Lecture 2: Why React JS – Motivation for Using React JS

Lecture 3: What is React JS – How React Works

Lecture 4: Check in

Chapter 4: Development Environment Setup (MacOS and Windows)

Lecture 1: Setup Development Environment – Install VS Code and Chrome Browser and NodeJS

Lecture 2: Install VS Code Extensions for React Development

Lecture 3: Create and Run a React Project with Vite – Full Overview

Chapter 5: Deep Dive into React – React Project and Components

Lecture 1: React Project Files and Folder Walkthrough

Lecture 2: Create our First React Component

Lecture 3: JSX and How React Treats the DOM – Deep Dive

Lecture 4: JSX Compilation Process – Babeljs – Demo

Lecture 5: Understanding the Main Project Files

Lecture 6: Writing JavaScript inside of JSX Code – The Book Component

Lecture 7: Introduction to Props – Refactor book Component to Use Props

Lecture 8: Adding an Array of Books & Pulling Data from an Array -Manually

Lecture 9: Using the map Function to Show Book List Items

Lecture 10: Understanding the React Key Prop

Lecture 11: Props and One-Way Data Flow Concept in React

Lecture 12: Destructuring Props

Lecture 13: CHALLENGE: User Profile Card Challenge & Solution

Lecture 14: Section Summary

Chapter 6: React State and Styling React Components

Lecture 1: Introduction to state Management – Forms and Interactivity in React

Lecture 2: Restructuring the Project – UserProfile Components

Lecture 3: Pulling Book Data from a Different Data File

Lecture 4: Introduction to State in React – The Wrong way to Change State

Lecture 5: using React Hook – useState to Fix State Management Issues

Lecture 6: How State Works in React – Overview

Lecture 7: Hands-On – Random Quote App – Setup

Lecture 8: Hands-on Random Quote App – Full setup & Final

Lecture 9: How State Works in React – Review

Lecture 10: Styling Components in React – CSS files Overview

Lecture 11: Installing Bootstrap and Using it in RandomQuotes App

Lecture 12: Adding Another Piece of State – Random Color

Lecture 13: Lifting State Up – React Patterns Overview

Lecture 14: Lifting State Up – Hands-on – RandomQuote App

Lecture 15: Lift State Up – Hands-on – Review – A Simple Counter App

Chapter 7: React Forms and Interactivity – Build the GroceryList App

Lecture 1: Introduction to Forms in React – Overview

Lecture 2: Setting up a Simple Form

Lecture 3: The onSubmit Event Handler and preventDefault method

Lecture 4: Controlled Elements

Lecture 5: Adding Form Inputs – Show the List Items on Page

Lecture 6: Multi-input Form Setup – Hands-on

Lecture 7: Multi-form Input and the handleChange Event Handler

Lecture 8: onHandle Submit – Add Simple Validation and Show the Person Card

Lecture 9: The Grocery List App – Demo

Lecture 10: Hands-on: GroceryList Component – Adding Dummy Data & Show on the List

Lecture 11: Hands-on – Creating the Footer and Nav Components

Lecture 12: Styling the GroceryList Item

Lecture 13: Add Grocery Form

Lecture 14: Fix – Clear form Issues

Lecture 15: Adding Bootstrap Icon

Lecture 16: Passing the toggleBought Event as Prop

Lecture 17: Implementing the toggling – Testing in the Console

Lecture 18: Changing the circle Color and List Item Text when Clicked

Lecture 19: Adding the handleRemoveItem Prop and Function to Remove and Item

Lecture 20: Adding Stats in the Footer Component

Lecture 21: Section Summary

Chapter 8: Connecting to the Backend – Consuming APIs & the useEffect Hook & Custom Hooks

Lecture 1: Connecting to the Backend and useEffect – Overview

Lecture 2: Fetching data from an API the Wrong Way

Lecture 3: Fetching Data from an API with useEffect Hook

Lecture 4: Setting up Loading State

Lecture 5: Using the Dependency Array & Adding Values to Control the Component Lifecycle

Chapter 9: Build a BookSearch React App

Lecture 1: The Project Setup

Lecture 2: Setup NavBar Component

Lecture 3: Create the Footer Component

Lecture 4: Pulling in Books from an API

Lecture 5: Set up the URL Search Query

Lecture 6: Setup SearchBar and Props

Lecture 7: Making sure the SearchTerm State is Updating Correctly – Debugging

Lecture 8: Showing Books on Screen

Lecture 9: Adding Loading State and Indicator

Lecture 10: Clearing the Search Form

Lecture 11: Setup the API-Client – Implementing FetchBooks Function

Lecture 12: Introduction to Custom Hooks & Creating a Custom Hook – useBooks

Lecture 13: Adding the AbortController Interface

Lecture 14: The Book Details Component – Part 1

Lecture 15: Conditional Rendering with && – Testing SelectedBook

Lecture 16: Show Book Details in a Modal View

Lecture 17: Handling Missing Fields from the API

Chapter 10: Deploying a React App

Lecture 1: Build and setup Vercel and Deploying the App

Lecture 2: Connecting to Github repo and Automate Deployment workflow

Lecture 3: The BookSearch App – Summary

Chapter 11: Wrap up

Lecture 1: Course Wrap up