Modern React with Redux [2024 Update]

• How to Get Help

• Join Our Community!

• Course Resources

• Let's Build an App!

• Critical Questions

• Core Concepts

• A Few More Critical Questions

• Node Setup

• Creating a React Project

• What is Create React App?

• Using Vite as an Alternative to Create React App

• Showing Basic Content

• What is JSX?

• Printing JavaScript Variables in JSX

• Shorthand JS Expressions

• Showing Javascript Values in JSX

• Exercise Overview

• Quick Practice with JSX

• Exercise Solution

• Typical Component Layouts

• Customizing Elements with Props

• Converting HTML to JSX

• Applying Styling in JSX

• More on JSX

• Practice JSX Conversion

• Extracting Components

• Module Systems Overview

• Imports and Exports

• Cheatsheet for JSX

• Project Overview

• Creating Core Components

• Introducing the Props System

• Picturing the Movement of Data

• Adding Props

• Using Argument Destructuring

• Practice with Props

• Exercise Solution

• The React Developer Tools

• The Most Common Props Mistake

• Communicating With Props

• Images for the App

• Including Images

• Handling Image Accessibility

• Review on how CSS Works

• Adding CSS Libraries with NPM

• A Big Pile of HTML!

• Last Bit of Styling

• App Overview

• Initial App Setup

• Introducing the Event System

• Events in Detail

• Variations on Event Handlers

• Quiz on Events

• Exercise with Events

• Exercise Solution

• Introducing the State System

• More on State

• Understanding the Re-Rendering Process

• Got These Five Points?

• Why Array Destructuring?

• Back to the App

• Picking a Random Element

• List Building in React

• Images for the App

• Loading and Showing SVGs

• Increasing Image Size

• Adding Custom CSS

• Finalizing Styling

• App Wrapup and Review

• App Overview

• Project Setup

• The Path Forward

• Overview of HTTP Requests

• Note About the Unsplash API

• Understanding the API

• Making an HTTP Request

• [Optional] Using Async:Await

• Data Fetching Cleanup

• Thinking About Data Flow

• Child to Parent Communication

• Implementing Child to Parent Communication

• Upward Communication

• Handling Form Submission

• Handling Input Elements

• [Optional] OK But Why?

• Creating a Controlled Input

• Exercise Solution

• Running the Search

• Reminder on Async:Await

• Communicating the List of Images Down

• Building a List of Images

• Handling List Updates

• Notes on Keys

• Displaying Images

• A Touch of Styling

• App Wrapup

• App Overview

• Initial Setup

• State Location

• Reminder on Event Handlers

• Extra CSS

• Receiving New Titles

• Adding Styling

• Updating State

• Don't Mutate That State!

• State Updates - Cheat Sheet

• [Optional] Adding Elements to the Start or End

• Adding Elements

• [Optional] Exercise Solution

• [Optional] Inserting Elements

• Inserting Elements

• [Optional] Removing Elements

• Removing Elements

• [Optional] Modifying Elements

• [Super Optional] Why the Special Syntax?

• Modifying Elements

• [Optional] Adding, Changing, or Removing Object Properties

• Cheatsheet for State Changes

• Adding a Book, For Real!

• Generating Random ID's

• Displaying the List

• Deleting Records

• Toggling Form Display

• Default Form Values

• Updating the Title

• Closing the Form on Submit

• A Better Solution!

• Collapsing Two Handlers into One

• Adding Images

• Adding Data Persistence

• JSON Server Issues and Required Version

• Server Setup

• What Just Happened?

• How the API Works

• Introducing the REST Client

• ECONNREFUSED 127.0.0.1:3001 Errors in VSCode

• Using the REST Client

• Creating a New Record

• Fetching a List of Records

• Introducing useEffect

• useEffect in Action

• More on useEffect

• When Does it Run?

• Updating a Record

• Thinking About Updates

• Deleting a Record

• Introducing Context

• Context in Action

• Changing Context Values

• More on Changing Context

• Application vs Component State

• Refactoring to Use Context

• Refactoring the App

• Quick Note

• Reminder on Sharing with Context

• Props and Context Together

• Last Bit of Refactoring

• A Small Taste of Reusable Hooks

• Return to useEffect

• Quick Note

• Understanding the Issue

• Applying the Fix

• ESLint is Good, but be Careful!

• Stable References with useCallback

• Fixing Bugs with useCallback

• Fixing UseEffect Bugs

• useEffect Cleanup Functions

• The Purpose of Cleanup Functions

• Important Info About the Following Sections and Lectures

• Project Overview

• Project Setup

• Some Button Theory

• Underlying Elements

• The Children Prop

• Props Design

• Validating Props with PropTypes

• PropTypes in Action

• Introducing TailwindCSS

• Updated Guidance for Installing and Configuring Tailwind

• Installing Tailwind

• How to use Tailwind

• Review on Styling

• The ClassNames Library

• Building Some Variations

• text-white Overriding Other Colors

• Finalizing the Variations

• Using Icons in React Projects

• Issues with Event Handlers

• Passing Props Through

• Handling the Special ClassName Case

• Exclusive Props with TypeScript instead of PropTypes

• Project Organization

• Refactoring with Organization

• Component Overview

• Component Setup

• Reminder on Building Lists

• Quick Note

• State Design Process Overview

• Finding the Expanded Item

• Conditional Rendering

• Inline Event Handlers

• Variation on Event Handlers

• Conditional Icon Rendering

• Displaying Icons

• Adding Styling

• Toggling Panel Collapse

• [Optional] Delayed State Updates

• [Optional] Functional State Updates

• Event Handlers with Lists

• Exercise Solution

• Component Overview

• Designing the Props

• Component Creation

• [Optional] More State Design

• Finally... Implementation!

• Reminder on Event Handlers in Maps

• Dropdown as a Controlled Component

• Controlled Component Implementation

• Existence Check Helper

• Community Convention with Props Names

• Form Controls - Prop Naming Convention

• Exercise Solution

• Adding Styling

• The Panel Component

• Creating the Reusable Panel

• A Challenging Extra Feature

• Document-Wide Click Handlers

• Event Capture and Bubbling

• Putting it All Together

• Why a Capture Phase Handler?

• Reminder on the useEffect Function

• Reminder on useEffect Cleanup

• Issues with Element References

• useRef in Action

• Checking Click Location

• Traditional Browser Navigation

• Theory of Navigation in React

• Extracting the DropdownPage

• Answering Critical Questions

• The PushState Function

• Handling Link Clicks

• Handling Back:Forward Buttons

• Navigation Context

• Listening to Forward and Back Clicks

• Programmatic Navigation

• A Link Component

• A Route Component

• Handling Control and Command Keys

• Link Styling

• Custom Navigation Hook

• Adding a Sidebar Component

• Highlighting the Active Link

• Navigation Wrapup

• Modal Component Overview

• Toggling Visibility

• At First Glance, Easy!

• We're Lucky it Works At All!

• Fixing the Modal with Portals

• Closing the Modal

• Customizing the Modal

• Additional Styling

• One Small Bug

• Modal Wrapup

• Creating a Reusable table

• Communicating Data to the Table

• Reminder on Table HTML Structure

• Building the Rows

• Better Styling

• Done! But It's Not Reusable

• Here's the Idea

• Dynamic Table Headers

• Rendering Individual Cells

• Fixed Cell Values

• Nested Maps

• Fixing the Color

• Adding a Key Function

• Adding Sorting to the Table

• Reminder on Sorting in JavaScript

• Sorting Strings

• Sorting Objects

• Object Sort Implementation

• Reversing Sort Order

• Optional Sorting

• A Small Extra Feature

• Customizing Header Cells

• React Fragments

• The Big Reveal

• Adding SortableTable

• Watching for Header Cell Clicks

• Quick State Design

• Adding Sort State

• Yessssss, It Worked!

• Determining Icon Set

• Styling Header Cells

• Resetting Sort Order

• Table Wrapup

• Exploring Code Reuse

• Revisiting Custom Hooks

• Creating the Demo Component

• Custom Hook Creation

• Quick Note

• Hook Creation Process in Depth

• Making a Reusable Sorting Hook

• App Overview

• Adding the Form

• More on the Form

• useReducer in Action

• Rules of Reducer Functions

• Understanding Action Objects

• Constant Action Types

• Refactoring to a Switch

• Adding New State Updates

• A Few Design Considerations Around Reducers

• A Few Questions on Reducers

• Introducing Immer

• Immer in Action

• Into the World of Redux

• Redux vs Redux Toolkit

• App Overview

• The Path Forward

• Implementation Time!

• Understanding the Store

• The Store's Initial State

• Understanding Slices

• Understanding Action Creators

• Connecting React to Redux

• Updating State from a Component

• Accessing State in a Component

• Removing Content

• Practice Updating State!

• Practice Accessing State!

• Even More State Updating!

• Resetting State

• Multiple State Updates

• Understanding Action Flow

• Watching For Other Actions

• Getting an Action Creator's Type

• Manual Action Creation

• File and Folder Structure

• Refactoring the Project Structure

• Link to Completed Project

• Project Overview

• Adding Component Boilerplate

• Thinking About Derived State

• Thinking About Redux Design

• Adding the Form Slice

• Maintaining a Collection with a Slice

• Creating the Store

• Form Values to Update State

• Receiving the Cost

• Dispatching During the Form Submission

• Awkward Double Keys

• Listing the Records

• Deleting Records

• CSS File for Download

• Adding Styling

• Form Reset on Submission

• Reminder on ExtraReducers

• Adding a Searching Input

• Addressing Selector unknown returned a different result warning

• Derived State in useSelector

• Total Car Cost

• Update for Adding Name Selector to CarList

• Highlighting Existing Cars

• App Overview

• Adding a Few Dependencies

• Initial App Boilerplate

• API Server Setup

• Component Files

• Adding a Few Components

• Creating the Redux Store

• Thinking About Data Structuring

• Reminder on Request Conventions

• Data Fetching Techniques

• Optional Async Thunks Section

• Adding State for Data Loading

• Understanding Async Thunks

• Steps for Adding a Thunk

• More on Adding Thunks

• Wrapping up the Thunk

• Using Loading State

• Adding a Pause for Testing

• Adding a Skeleton Loader

• Animations with TailwindCSS

• Rendering the List of Users

• Creating New Users

• Unexpected Loading State

• Strategies for Fine-Grained Loading State

• Local Fine-Grained Loading State

• More on Loading State

• Handling Errors with User Creation

• Creating a Reusable Thunk Hook

• Creating a Fetch-Aware Button Component

• Better Skeleton Display

• A Thunk to Delete a User

• Updating the Slice

• Refactoring the Component

• Deleting the User

• Fixing a Delete Error

• Album Feature Overview

• Additional Components

• Adding the ExpandablePanel

• Wrapping Up the ExpandablePanel

• Adding the Albums Listing

• Skipping to this Section?

• [Optional] Getting Caught Up

• Introducing Redux Toolkit Query

• Creating a RTK Query API

• Creating an Endpoint

• Using the Generated Hook

• A Few Immediate Notes

• Rendering the List

• Changing Data with Mutations

• Differences Between Queries and Mutations

• Options for Refetching Data

• Request De-Duplication

• Some Internals of Redux Toolkit Query

• Refetching with Tags

• Fine-Grained Tag Validation

• Styling Fixups

• Adding a Pause for Testing

• Refactoring the List

• Remove Implementation

• Easy Tag Invalidation

• Getting Clever with Cache Tags

• More Clever Tag Implementation

• Photos Feature Overview

• Lots of Photos Setup!

• Adding the Endpoints

• Creating the Photo

• Showing the List of Photos

• Adding Mouse-Over Deletes

• Adding Automatic Data Refetching

• Why Use Typescript?

• Basic Types and Type Annotations

• Function Type Annotations

• Type Inference

• Quiz - Type Annotations and Type Inference

• Describing Objects with Interfaces

• Using Interfaces to Annotate Props

• Quiz - Props with Interfaces

• Downsides to Type Inference

• Function Types

• Function Types in Props Interfaces

• Quiz - Function Types

• Extending an Interface

• Type Unions

• Type Narrowing with Type Guards

• Tricky Cases with Type Guards

• Quiz - Type Narrowing and Guards

• Type Predicates

• Optional Properties

• Quiz - Optional Properties

• The "Any" and "Unknown" Types

• Type Aliases

• Life Without Generics

• Introduction to Function Generics

• More on Function Generics

• Multiple Generic Types

• More Generic Examples!

• Generics with Fetch

• Generic Type Inference

• More on Generic Type Inference

• Issues with Generic Type Inference

• Generic Type Constraints

• More on Generic Type Constraints

• TypeScript Wrapup

• Project Overview

• Project Setup

• Component Creation

• App Architecture

• Defining an Interface

• Typing of Props

• Type Inference Around useState

• Typing a Callback

• Form Submissions with TypeScript

• Searching with the OSM API

• Why Use Interfaces?

• Rendering the Locations

• Showing and Panning a Map

• App Review

• App Overview

• Project Setup

• Introducing React Router

• React Router Setup

• Navigating with a Link

• Programmatic Navigation

• Form Submission Navigation Shortcut

• A Touch of Styling

• The Registry API

• Fetching Data with React Router

• More on Fetching with a Loader

• Designing New Types

• An Improved Project Structure

• Mapping the Response

• Extracting the Loader

• Connecting the Page and Loader

• Rendering the List of Results

• Focusing on the Details Page

• Details Interface

• Fetching Details

• Creating the Details Loader

• Accessing Route Params

• Typing the Page and Loader Together

• Rendering Package Details

• Error Around the Name Property

• Fetching Packages in Parallel

• Creating the Home Loader

• Accessing the Data from a Loader

• Assembling the Home Page

• React Router Review

• Note About This Legacy Course

• What is JSX? / Converting HTML

• Inline Styling / Converting Styling

• Class vs. ClassName / Referencing JS Variables

• Important Note About Viewing Errors

• Three Tenants of Components / App Overview

• IMPORTANT Info About Faker Installation

• Getting Some Free Styling / Naive Component Approach

• Specifying Images / Duplicating a Single Component

• Extracting JSX / Component Nesting

• React Props System / Passing and Receiving Props

• Component Reuse / Implementing an Approval Card

• Showing Custom Children / Component Reuse

• Class Based Components

• Application Overview / Scaffolding the App

• Getting a User's Physical Location / Resetting Geolocation Preferences

• Handling Async Operations / Refactoring to Class Components

• Rules of State / Initializing State Through Constructors

• Updating State Properties / App Lifecycle Walkthrough

• Handling Errors Gracefully / Conditionally Rendering Content

• Introducing Lifecycle Methods / Why Lifecycle Methods

• Refactoring Data Loading / Alternate State initialization

• Passing State as Props

• Determining Season

• Ternary Expressions in JSX / Showing Icons

• Extracting Options to Config Objects / Adding Some Styling

• Showing a Loading Spinner / Specifying Default Props

• Avoiding Conditionals in Render / Breather and Review

• App Overview / Component Design

• Adding Some Project Structure / Showing Forms

• Adding a Touch of Styling / Creating Event Handlers

• Alternate Event Handlers / Uncontrolled vs Controlled Elements

• More on Controlled Elements / Handling Form Submittal

• Understanding "this" in JS / Solving Context Issues

• Communicating Child to Parent / Invoking Callbacks in Children

• Fetching Data / Axios vs. Fetch

• Viewing Request Results / Handling Requests with Async Await

• Setting State After Async Requests / Binding Callbacks

• Creating Custom Clients

• Rendering Lists / Review of Map Statements

• Rendering Lists of Components / Purpose of Keys

• Implementing Keys in Lists

• Grid CSS / Issues with Grid CSS

• Creating an ImageCard Component / Accessing the DOM with Refs

• Accessing Image Height / Callbacks on Image Load

• Dynamic Spans / App Review

• Scaffolding the App / Reminder on Event Handlers

• Handling Form Submittal / Accessing the YouTube API

• Searching for Videos / Putting it All Together

• Updating State with Fetched Data / Passing State as Props

• Rendering a List of Videos / Rendering Video Thumbnails

• Styling a List / Communicating from Children to Parent

• Deeply Nested Callbacks / Conditional Rendering

• Styling the VideoDetail / Displaying a Video Player

• Fixing a few Warnings / Defaulting Video Selection

• React Hooks / App Architecture

• Communicating the Items Prop / Building and Styling the Accordion

• Helper Functions / Introducing useState

• Understanding useState / Setter Functions

• Expanding the Accordion / Creating Additional Widgets

• Search Widget Architecture / Scaffolding the Widget

• Text Inputs with Hooks / When do We Search

• useEffect Hook / Testing Execution

• Async Code in useEffect / Executing the Request from useEffect

• Default Search Terms / List Building

• XSS Server Code

• XSS Attacks in React / Linking to a Wikipedia Page

• Only Search with a Term / Throttling API Requests

• Reminder on setTimeout / useEffect's Cleanup Function

• Implementing a Delayed Request / Searching on Initial Render

• Edge Case When Clearing Out Input Form

• Fixing a Warning / Dropdown Architecture

• Scaffolding the Dropdown / A Lot of JSX

• Selection State / Filtering the Option List

• Hiding and Showing the Option List / Why is this Hard?

• React v17 Update - capture: true

• Reminder on Event Bubbling / Applying What We've Learned

• Binding an Event Handler / Why Stay Open

• Important Update for Event Listeners

• Which Element was Clicked / Making use of useRef

• Body Event Listener Cleanup / Translate Widget

• Scaffolding the Translate Component / Adding the Language Input

• Google Translate API Key

• Understanding the Convert Component / Building the Convert Component

• Using the Google Translate API / Displaying Translated Text

• Debouncing Translation Updates / Navigation in React

• Basic Component Routing / Building Reusable Route Component

• Implementing Header for Navigation / Handling Navigation

• Building a Link / Changing the URL

• Detecting Navigation / Updating the Route

• Handling Command Clicks

• Project Overview / Refactoring the SearchBar

• Refactoring the App / Removing a Callback

• Overview of Custom Hooks / Process for Building Custom Hooks

• Extracting Video Logic / Using the Custom Hook

• Deployment Overview / Deployment with Vercel

• Deployment with Netlify

• Introduction to Redux / Redux by Analogy

• A Bit More Analogy / Finishing the Analogy

• Mapping the Analogy to Redux / Modeling with Redux

• Creating Reducers / Rules of Reducers

• Testing Our Example / Important Redux Notes

• Integrating React with Redux / React, Redux and React-Redux

• Design of the Redux App / How React-Redux Works

• Redux Project Structure / Named vs Default Exports

• Building Reducers / Wiring up the Provider

• Connect Function / Configuring Connect with mapStateToProps

• Building a List with Redux Data / Calling Action Creators

• Redux is Not Magic / Functional Components with Connect

• Conditional Rendering

• App Overview / Initial App Setup

• Tricking Redux with Dummy Reducers / A Touch More Setup

• How to Fetch Data in a Redux App / Wiring Up Action Creators

• Making a Request from an Action Creator / Understanding Async Action Creators

• Behind the Scenes of Redux Thunk / Shortened Syntax with Redux Thunk

• Rules of Reducers / Return Values from Reducers

• Argument Values in Reducers / Pure Reducers

• Mutations in JavaScript / Equality of Arrays and Objects

• A Misleading Rule / Safe State Updates in Reducers

• Switch Statements in Reducers / Dispatching Correct Values

• List Building / Displaying Users

• Fetching Singular Records / Displaying the User Header

• Finding Relevant Users / Extracting Logic with mapStateToProps

• That's the Issue / Memoizing Functions

• Memoizing Issues / One Time Memoization

• Alternate Overfetching Solution / Action Creators in Action Creators

• Finding Unique User IDs / Quick Refactor with Chain

• App Wrapup

• App Outline / Mockups in Detail

• App Challenges / Initial Setup

• IMPORTANT - React Router Installation Update

• Introducing React Router / How React Router Works

• How Paths Get Matched / How Now to Navigate with React Router

• Navigating with React Router / Different Router Types

• Component Scaffolding / Wiring Up Routes

• Always Visible Components / Wiring Up the Header

• Links Inside Routers

• OAuth Based Authentication / OAuth for Servers vs Browser Apps

• Creating OAuth Credentials / Wiring Up the Google API Library

• Required plugin_name Parameter - Do Not Skip

• Sending a User into the OAuth Flow / Rendering Auth Status

• Updating Auth State / Displaying Sign In and Sign Out Buttons

• On Demand Sign In and Sign Out / Redux Architecture

• Redux Setup / Connecting Auth Action Creators

• Building the Auth Reducers / Handling Auth Status Through Redux

• Fixed Action Types / Recording the User's ID

• Redux Dev Tools / Debug Sessions with Redux Dev Tools

• Important Note about Redux Form Installation

• Forms with Redux Form / Useful Redux Form Examples

• Connecting Redux Form / Creating Forms with Redux Form

• Automatically Handling Events / Customizing Form Fields

• Handling Form Submission / Validation of Form Inputs

• Displaying Validation Messages / Showing Errors on Touch

• Highlighted Errored Fields

• Creating Streams / RESTful Conventions

• Setting Up an API Server / Creating Streams Through Action Creators

• Creating a Stream with REST Conventions / Dispatching Actions

• Bulk Action Creators

• Object Based Reducers

• Key Interpolation Syntax / Handling Fetching, Creating and Updating

• Deleting Properties with Omit / Merging Lists of Records

• Fetching a List of Streams / Rendering All Streams

• Associating Streams with Users / Conditionally Showing Edit and Delete

• Linking to Stream Creation / When to Navigate Users

• History Object Deprecation

• History References / Creating a Browser History Object

• Implementing Programmatic Navigation / Manually Changing API Records

• URL Based Selection / Wildcard Navigation

• More on Route Params / Pulling Streams Out of State

• Selecting Records from State / Component Isolation with React Router

• Fetching a Stream for Edit Stream / Real Code Reuse

• Refactoring Stream Creation / Setting Initial Values

• Avoiding Changes to Properties / Edit Form Submission

• PUT vs PATCH Requests

• Why Use Portals / More on Using Portals

• Creating a Portal / Hiding a Modal

• Making the Modal Reusable / React Fragments

• onDismiss From the Parent / Reminder on Path Params

• Fetching the Deletion Stream / Conditionally Showing Stream Details

• Deleting a Stream

• Viewing a Stream / Switches with React Router

• RTMP NodeMediaServer is not a constructor error fix

• Showing a Stream / RTMP Server Setup

• OBS Installation

• OBS Scene Setup

• Video Player Setup / Implementing FLV.js

• Creating a FLV Player / Optional Player Building

• It works! / Cleaning up Resources with componentWillUnmount

• Context System / An App with Context

• App Generation / Selecting a Language

• A Touch More Setup / Getting Data Into and Out of Context

• Creating Context Objects / Consuming the Context Value

• Context Provider / Gotchas Around Providers

• Accessing Data With Consumers / Pulling From Multiple Contexts

• Replacing Redux with Context / Creating a Store Component

• Implementing a Language Store / Rendering the Language Store

• Connecting the Selector to the Store / Connecting the Field and Button

• Context vs Redux

• Bonus!