Introduction to Part 1

Useful Resources for Part 1

Section Overview

Why Do Front-End Frameworks Exist?

React vs. Vanilla JavaScript

What is React?

Setting Up Our Development Environment

Pure React

A Quick Look at React's Official Documentation

Setting Up a New React Project: The Options

Setting Up a Project With Create-React-App

Section Overview

Destructuring Objects and Arrays

Rest/Spread Operator

Template Literals

Ternaries Instead of if/else Statements

Arrow Functions

Short-Circuiting And Logical Operators: &&, ||, ??

Optional Chaining

The Array map Method

The Array filter Method

The Array reduce Method

The Array sort Method

Working With Immutable Arrays

Asynchronous JavaScript: Promises

Asynchronous JavaScript: Async/Await

Section Overview

Rendering the Root Component and Strict Mode

Before We Start Coding: Debugging

Components as Building Blocks

Creating And Reusing a Component

What is JSX?

Creating More Components

JavaScript Logic in Components

Separation of Concerns

Styling React Applications

Passing and Receiving Props

Props, Immutability, and One-Way Data Flow

CHALLENGE #1: Profile Card (v1)

The Rules of JSX

Rendering Lists

Conditional Rendering With &&

Conditional Rendering With Ternaries

Conditional Rendering With Multiple Returns

Extracting JSX Into a New Component

Destructuring Props

React Fragments

Setting Classes and Text Conditionally

Section Summary

CHALLENGE #2: Profile Card (v2)

Section Overview

Let's Build a Steps Component

Handling Events the React Way

What is State in React?

Creating a State Variable With useState

Don't Set State Manually!

The Mechanics of State

Adding Another Piece of State

React Developer Tools

Updating State Based on Current State

More Thoughts About State + State Guidelines

A Vanilla JavaScript Implementation

CHALLENGE #1: Date Counter (v1)

Starting a New Project: The "Far Away" Travel List

Building the Layout

Rendering the Items List

Building a Form and Handling Submissions

Controlled Elements

State vs. Props

EXERCISE #1: Flashcards

CHALLENGE #2: Date Counter (v2)

Section Overview

What is "Thinking in React"?

Fundamentals of State Management

Thinking About State and Lifting State Up

Reviewing "Lifting Up State"

Deleting an Item: More Child-to-Parent Communication!

Updating an Item: Complex Immutable Data Operation

Derived State

Calculating Statistics as Derived State

Sorting Items

Clearing the List

Moving Components Into Separate Files

EXERCISE #1: Accordion Component (v1)

The "children" Prop: Making a Reusable Button

More Reusability With the "children" Prop

EXERCISE #2: Accordion Component (v2)

CHALLENGE #1: Tip Calculator

Section Overview

Project Setup

Building the Static App: List of Friends

Building the Static App: Forms

Displaying the New Friend Form

Adding a New Friend

Selecting a Friend

Creating Controlled Elements

Splitting a Bill

Introduction to Part 2

Useful Resources for Part 2

Section Overview

Setting Up the "usePopcorn" Project

How to Split a UI Into Components

Splitting Components in Practice

Component Categories

Prop Drilling

Component Composition

Fixing Prop Drilling With Composition (And Building a Layout)

Using Composition to Make a Reusable Box

Passing Elements as Props (Alternative to children)

Building a Reusable Star Rating Component

Creating the Stars

Handling Hover Events

Props as a Component API

Improving Reusability With Props

PropTypes

CHALLENGE #1: Text Expander Component

Section Overview

Project Setup and Walkthrough

Components, Instances, and Elements

Instances and Elements in Practice

How Rendering Works: Overview

How Rendering Works: The Render Phase

How Rendering Works: The Commit Phase

How Diffing Works

Diffing Rules in Practice

The Key Prop

Resetting State With the Key Prop

Using the Key Prop to Fix Our Eat-'N-Split App

Rules for Render Logic: Pure Components

State Update Batching

State Update Batching in Practice

How Events Work in React

Libraries vs. Frameworks & The React Ecosystem

Section Summary: Practical Takeaways

Section Overview

The Component Lifecycle

How NOT to Fetch Data in React

UseEffect to the Rescue

A First Look at Effects

Using an async Function

Adding a Loading State

Handling Errors

The useEffect Dependency Array

Synchronizing Queries With Movie Data

Selecting a Movie

Loading Movie Details

Adding a Watched Movie

Adding a New Effect: Changing Page Title

The useEffect Cleanup Function

Cleaning Up the Title

Cleaning Up Data Fetching

One More Effect: Listening to a Keypress

CHALLENGE #1: Currency Converter

Section Overview

React Hooks and Their Rules

The Rules of Hooks in Practice

More Details of useState

Initializing State With a Callback (Lazy Initial State)

UseState Summary

How NOT to Select DOM Elements in React

Introducing Another Hook: useRef

Refs to Select DOM Elements

Refs to Persist Data Between Renders

What are Custom Hooks? When to Create One?

Creating our First Custom Hook: useMovies

Creating useLocalStorageState

Creating useKey

CHALLENGE #1: useGeolocate

Section Overview

Our First Class Component

Working With Event Handlers

Class Components vs. Function Components

Starting the "Classy Weather" App

Fetching Weather Data

Displaying the Weather

Removing Boilerplate Code With Class Fields

Child to Parent Communication

Lifecycle Methods

Introduction to Part 3

Useful Resources for Part 3

Section Overview

Yet Another Hook: useReducer

Managing Related Pieces of State

Managing State With useReducer

The "React Quiz" App

Loading Questions from a Fake API

Handling Loading, Error, and Ready Status

Starting a New Quiz

Displaying Questions

Handling New Answers

Moving to the Next Question

Displaying Progress

Finishing a Quiz

Restarting a Quiz

Setting Up a Timer With useEffect

Section Summary: useState vs. useReducer

CHALLENGE #1: Creating a Bank Account With useReducer

Section Overview

Creating Our First App With Vite: "WorldWise"

Routing and Single-Page Applications (SPAs)

Implementing Main Pages and Routes

Linking Between Routes With <Link /> and <NavLink />

Styling Options For React Applications

Using CSS Modules

Building the Pages

Building the App Layout

Nested Routes and Index Route

Implementing the Cities List

Implementing the Countries List

Storing State in the URL

Dynamic Routes With URL Parameters

Reading and Setting a Query String

Programmatic Navigation with useNavigate

Programmatic Navigation with <Navigate />

Section Overview

CHALLENGE #1: Understand "The Atomic Blog" App

What is the Context API?

Creating and Providing a Context

Consuming the Context

Advanced Pattern: A Custom Provider and Hook

Thinking In React: Advanced State Management

Back to "WorldWise": Creating a CitiesContext

Consuming the CitiesContext

Finishing the City View

Including a Map With the Leaflet Library

Displaying City Markers on Map

Interacting With the Map

Setting Map Position With Geolocation

Fetching City Data in the Form

Creating a New City

Deleting a City

Advanced State Management System: Context + useReducer

Adding Fake Authentication: Setting Up Context

Adding Fake Authentication: Implementing "Login"

Adding Fake Authentication: Protecting a Route

CHALLENGE #2: Refactoring "React Quiz" to Context API

Section Overview

Performance Optimization and Wasted Renders

The Profiler Developer Tool

A Surprising Optimization Trick With children

Understanding memo

Memo in Practice

Understanding useMemo and useCallback

UseMemo in Practice

UseCallback in Practice

Optimizing Context Re-Renders

Back to The "WorldWise" App

Optimizing Bundle Size With Code Splitting

Don't Optimize Prematurely!

UseEffect Rules and Best Practices

CHALLENGE #1: Fix Performance Issues in "Workout Timer"

Setting State Based on Other State Updates

Using Helper Functions In Effects

Closures in Effects

Section Overview

Introduction to Redux

Creating a Reducer: Bank Account

Creating a Redux Store

Working With Action Creators

Adding More State: Customer

Professional Redux File Structure: State Slices

Back to React! Connecting our Redux App With React

Dispatching Actions from Our React App

The Legacy Way of Connecting Components to Redux

Redux Middleware and Thunks

Making an API Call With Redux Thunks

The Redux DevTools

What is Redux Toolkit (RTK)?

Creating the Store With RTK

Creating the Account Slice

Back to Thunks

Creating the Customer Slice

Redux vs. Context API

Introduction to Part 4

Useful Resources for Part 4

Section Overview

Setting Up a New Project: "Fast React Pizza Co."

Application Planning

Setting Up a Professional File Structure

A New Way Of Implementing Routes

Building the App Layout

Fetching Data With React Router "Loaders": Pizza Menu

Displaying a Loading Indicator

Handling Errors With Error Elements

Fetching Orders

Writing Data With React Router "Actions"

Error Handling in Form Actions

Section Overview

What is Tailwind CSS?

Setting Up Tailwind CSS

Working With Color

Styling Text

The Box Model: Spacing, Borders, and Display

Responsive Design

Using Flexbox

Using CSS Grid

Styling Buttons: Element States and Transitions

Styling Form Elements

Reusing Styles With @apply

Reusing Styles With React Components

Absolute Positioning, z-index, and More

Configuring Tailwind: Custom Font Family

Styling the Menu

Styling the Cart

Styling the Order Form

Styling the Order Overview

Section Overview

Modeling the "User" State With Redux Toolkit

Reading and Updating the User State

Modeling the "Cart" State

Adding Menu Items to the Cart

Building the Cart Overview With Redux Selectors

Building the Cart Page

Deleting Cart Items

Updating Cart Quantities

Using the Cart for New Orders

Redux Thunks With createAsyncThunk

Integrating Geolocation

Fetching Data Without Navigation: useFetcher

Updating Data Without Navigation

Section Overview

Application Planning

Help Isabelle to Plan an App

Setting Up the Project: "The Wild Oasis"

Introduction to Styled Components

Global Styles With Styled Components

Styled Component Props and the "css" Function

Building More Reusable Styled Components

Setting Up Pages and Routes

Building the App Layout

Building the Sidebar and Main Navigation

Section Overview

What is Supabase?

Creating a New Database

Modeling Application State

Creating Tables

Relationships Between Tables

Adding Security Policies (RLS)

Connecting Supabase With Our React App

Setting Up Storage Buckets

Section Overview

What is React Query?

Setting Up React Query

Make Sure to Use React Query v4!

Fetching Cabin Data

Mutations: Deleting a Cabin

Displaying Toasts (Notifications)

Introducing Another Library: React Hook Form

Creating a New Cabin

Handling Form Errors

Uploading Images to Supabase

Editing a Cabin

Abstracting React Query Into Custom Hooks

Duplicating Cabins

Fetching Applications Settings

Updating Application Settings

Section Overview

An Overview of Reusability in React

Setting Up an Example

The Render Props Pattern

A Look at Higher-Order Components (HOC)

The Compound Component Pattern

Building a Modal Window Using a React Portal

Converting the Modal to a Compound Component

Detecting a Click Outside the Modal

Confirming Cabin Deletions

Building a Reusable Table

Applying the Render Props Pattern

Building a Reusable Context Menu

Section Overview

Client-Side Filtering: Filtering Cabins

Client-Side Sorting: Sorting Cabins

Building the Bookings Table

Uploading Sample Data

API-Side Filtering: Filtering Bookings

API-Side Sorting: Sorting Bookings

Building a Reusable Pagination Component

API-Side Pagination: Paginating Bookings

Prefetching With React Query

Building the Single Booking Page

Checking In a Booking

Adding Optional Breakfast

Checking Out a Booking (+ Fixing a Small Bug)

Deleting a Booking

Authentication: User Login With Supabase

Authorization: Protecting Routes

User Logout

Fixing an Important Bug

Building the Sign Up Form

User Sign Up

Authorization on Supabase: Protecting Database (RLS)

Building The App Header

Updating User Data and Password

Implementing Dark Mode With CSS Variables

Building the Dashboard Layout

Computing Recent Bookings and Stays

Displaying Statistics

Displaying a Line Chart With the Recharts Library

Displaying a Pie Chart

Displaying Stays for Current Day

Error Boundaries

Final Touches + Fixing Bugs

Section Overview

Deploying to Netlify

Setting Up a Git and GitHub Repository

Deploying to Vercel

Introduction to Part 5

Useful Resources for Part 5

Section Overview

Download Fresh Starter Files + Slides!

An Overview of Server-Side Rendering (SSR)

Experiment: Manual SSR With React DOM + Node.js

The Missing Piece: Hydration

Implementing Hydration

What is Next.js?

Setting Up a Next.js Project

Frequent Next.js Updates + Documentation

Defining Routes and Pages

Navigating Between Pages

Creating a Layout

What are React Server Components? (RSC – Part 1)

Fetching Data in a Page

Adding Interactivity With Client Components

Displaying a Loading Indicator

How RSC Works Behind the Scenes (RSC – Part 2)

RSC vs. SSR: How are They Related? (RSC – Part 3)

Section Overview

Project Planning: "The Wild Oasis" Customer Website

Project Organization

Styling With Tailwind CSS

Adding Page Metadata and Favicon

Loading and Optimizing Fonts

Improving the Navigation and Root Layout

Optimizing Images With Next.js <Image /> Component

Building the Home Page

Building the About Page With Responsive Images

Adding Nested Routes and Pages

Adding a Nested Layout

Section Overview

Setting Up Supabase

Fetching and Displaying Cabin List

Streaming Route Segments With loading.js File

What is React Suspense?

Streaming UI With Suspense: Cabin List

Dynamic Route Segments: Building the Cabin Page

Generating Dynamic Metadata

Error Handling: Setting Up Error Boundaries

Error Handling: "Not Found" Errors

Different Types of SSR: Static vs. Dynamic Rendering

Analyzing Rendering in Our App

Making Dynamic Pages Static With generateStaticParams

Static Site Generation (SSG)

Partial Pre-Rendering

How Next.js Caches Data

Experimenting With Caching and ISR

CHALLENGE #1: Fetching the Number of Cabins

Section Overview

Blurring the Boundary Between Server and Client (RSC – Part 4)

Client Components in Server Components

Highlighting Current Side Navigation Link

Sharing State Between Client and Server: The URL

Advanced: Server Components in Client Components

Data Fetching Strategies for the Reservation Section

Using the Context API for State Management

Creating an API Endpoint With Route Handlers

Section Overview

Setting Up NextAuth

Getting the User Session

What is Middleware in Next.js?

Protecting Routes With NextAuth Middleware

Building a Custom Sign In Page

Building a Custom Sign Out Button

Creating a New Guest on First Sign In

Section Overview

What are Server Actions?

Updating the Profile Using a Server Action

Manual Cache Revalidation

Displaying a Loading Indicator: The useFormStatus Hook

Building the Guest's Reservations Page

Deleting a Reservation

Another Loading Indicator: The useTransition Hook

CHALLENGE #1: Updating a Reservation

Removing Reservations Immediately: The useOptimistic Hook

Back to the Cabin Page: Finishing the Date Selector

Creating a New Reservation

Section Overview

Setting Up the GitHub Repository

Deploying to Vercel

Updating Environment Variables and OAuth Credentials

Section Overview

Setting Up Another Project

Routes, Pages, and Navigation

Dynamic Routes

Creating a Layout With a Custom _App

Creating Pages

Defining Page Title and Favicon

Fetching Data With getStaticProps (SSG)

Fetching Data With getServerSideProps (SSR)

API Routes

Handling Form Submissions

Where to Go from Here