Build Web Apps with React & Firebase

Course Curriculum

Chapter 1: Introduction & Setup

Lecture 1: Welcome to the Course

Lecture 2: React at a Glance

Lecture 3: What You Should Already Know

Lecture 4: Environment Setup

Lecture 5: Using the Course Files

Lecture 6: Extra Resources & Tutorials

Chapter 2: React Basics

Lecture 1: Using React with a CDN

Lecture 2: Making a React Component

Lecture 3: JSX & Templates

Lecture 4: Template Expressions & Variables

Lecture 5: Click Events & Event Handlers

Chapter 3: Using Create-React-App

Lecture 1: Making a React Site (create-react-app)

Lecture 2: Project Structure Walkthrough

Lecture 3: Running the Application

Lecture 4: Using Images

Lecture 5: Using Stylesheets

Chapter 4: Intro to State & useState

Lecture 1: Why We Need State

Lecture 2: Using the useState Hook

Lecture 3: How State & Rendering Works

Lecture 4: Outputting Lists

Lecture 5: Using the Previous State

Lecture 6: Conditional Templates

Lecture 7: useState Limitations

Chapter 5: Components & Props

Lecture 1: Using Mutliple Components

Lecture 2: Creating a Title Component

Lecture 3: Intro to Props

Lecture 4: React Fragments

Lecture 5: Children Prop (Making a Modal Component)

Lecture 6: Functions as Props

Lecture 7: CHALLENGE – Showing the Modal

Lecture 8: Portals

Lecture 9: CHALLENGE – Reusable Event List Component

Lecture 10: Class Components Overview

Chapter 6: Styling React Applications

Lecture 1: Using Global Stylesheets

Lecture 2: Component Stylesheets

Lecture 3: Using Inline Styles

Lecture 4: Dynamic Inline Styles

Lecture 5: Conditional CSS Classes

Lecture 6: CSS Modules

Chapter 7: User Input & Events

Lecture 1: Forms & Labels in React

Lecture 2: The onChange Event

Lecture 3: Controlled Inputs

Lecture 4: Submitting Forms (onSubmit)

Lecture 5: Adding Events to the Event List

Lecture 6: Using the useRef Hook

Lecture 7: Select Boxes

Chapter 8: Fetching Data & useEffect

Lecture 1: New Project & JSON Server

Lecture 2: Why We Need useEffect

Lecture 3: Fetching Data with useEffect

Lecture 4: The useEffect Dependency Array

Lecture 5: useCallback for Function Dependencies

Lecture 6: Creating a Custom Fetch Hook

Lecture 7: Adding a Loading/Pending State

Lecture 8: Handling Errors

Lecture 9: Why We Need a Cleanup Function

Lecture 10: Aborting Fetch Requests

Lecture 11: useEffect Gotcha – Infinite Loops

Chapter 9: PROJECT BUILD – Memory Game

Lecture 1: Project Preview & Setup

Lecture 2: Setting up & Shuffling Cards

Lecture 3: Creating a Card Grid

Lecture 4: CHALLENGE – Creating a Card Component

Lecture 5: Making Card Choices

Lecture 6: CHALLENGE – Comparing Choices

Lecture 7: Adding a 'matched' Property to Cards

Lecture 8: Flipping Cards

Lecture 9: Flipping Animation (CSS)

Lecture 10: Making Cards "disabled"

Lecture 11: Finishing Touches

Chapter 10: The React Router

Lecture 1: Multi-Page React Sites

Lecture 2: React Router Setup

Lecture 3: Switch & Exact Match

Lecture 4: Links & Nav Links

Lecture 5: Fetching Data

Lecture 6: Route Parameters

Lecture 7: The useParams Hook

Lecture 8: Programmatic Redirects

Lecture 9: Redirect Component

Lecture 10: Query Parameters

Chapter 11: PROJECT BUILD – Recipe Directory

Lecture 1: Project Preview & Setup

Lecture 2: Router & Pages Setup

Lecture 3: Making a Navbar Component

Lecture 4: Fetching Data

Lecture 5: Recipe List Component

Lecture 6: CHALLENGE – Fetching a Single Recipe

Lecture 7: Recipe Details Template

Lecture 8: Making a "Create Recipe" Form

Lecture 9: Adding Multiple Ingredients

Lecture 10: Making a POST Request

Lecture 11: CHALLENGE – Redirecting the User