Modern React with Redux [2020 Update]

Let's Dive In!

How to Get Help

Important Codepen Info

Our First App

CodePen Solution and Blank White Screen Help

Critical Questions!

Installing Node JS

Important Update About React App Generation

Generating a React Project

Why Create React App?

Exploring a Create-React-App Project

Starting and Stopping a React App

Javascript Module Systems

Displaying Content with Functional Components

Link to Completed Github Repo

Common Questions About My Environment

Building Content with JSX

What is JSX?

Converting HTML to JSX

Inline Styling with JSX

Converting Styling to JSX Format

Class vs ClassName

Referencing JS Variables in JSX

Values JSX Can't Show

Finding Forbidden Property Names

Exercise Introduction

Test Your Knowledge: JSX Interpolation

JSX Exercise Solution

Communicating with Props

Three Tenets of Components

Application Overview

Getting Some Free Styling

Naive Component Approach

Specifying Images in JSX

Duplicating a Single Component

Extracting JSX to New Components

Component Nesting

React's Props System

Passing and Receiving Props

Passing Multiple Props

Passing Props - Solutions

Component Reuse

Implementing an Approval Card

Showing Custom Children

Component Reuse

Exercise - Props

Test Your Knowledge: Props

Props Exercise Solution

Exercise - Children

Test Your Knowledge: Children Through Props

Children Exercise Solution

Structuring Apps with Class-Based Components

Class-Based Components

Application Overview

Scaffolding the App

Getting a Users Physical Location

Resetting Geolocation Preferences

Handling Async Operations with Functional Components

Refactoring from Functional to Class Components

State in React Components

The Rules of State

Initializing State Through Constructors

Updating State Properties

App Lifecycle Walkthrough

Handling Errors Gracefully

Conditionally Rendering Content

Understanding Lifecycle Methods

Introducing Lifecycle Methods

Why Lifecycle Methods?

Refactoring Data Loading to Lifecycle Methods

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

Class-Based Components

Exercise Solution - Class-Based Components

Updating Components with State

Updating Components with State

Handling User Input with Forms and Events

App Overview

Component Design

Adding Some Project Structure

Showing Forms to the User

Adding a Touch of Style

Creating Event Handlers

Alternate Event Handler Syntax

Uncontrolled vs Controlled Elements

More on Controlled Elements

Handling Form Submittal

Understanding 'this' In Javascript

Solving Context Issues

Communicating Child to Parent

Invoking Callbacks in Children

Making API Requests with React

Fetching Data

Axios vs Fetch

Viewing Request Results

Handling Requests with Async Await

Setting State After Async Requests

Binding Callbacks

Creating Custom Clients

Building Lists of Records

Rendering Lists

Review of Map Statements

Rendering Lists of Components

The Purpose of Keys in Lists

Implementing Keys in Lists

Using Ref's for DOM Access

Grid CSS

Issues with Grid CSS

Creating an Image Card Component

Accessing the DOM with Refs

Accessing Image Height

Callbacks on Image Load

Dynamic Spans

App Review

Let's Test Your React Mastery!

App Overview

Component Design

Scaffolding the App

Reminder on Event Handlers

Handling Form Submittal

Accessing the Youtube API

Axios Version Bug & 400 "Required Parameter: part" Error

Searching for Videos

Adding a Video Type

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 Child to Parent

Deeply Nested Callbacks

Conditional Rendering

Styling the VideoDetail

Displaying a Video Player

Fixing a Few Warnings

Defaulting Video Selection

On We Go...To Redux!

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 Cooperating 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

The Connect Function

Configuring Connect with MapStateToProps

Building a List with Redux Data

Calling Action Creators from Components

Redux is Not Magic!

Functional Components with Connect

Conditional Rendering

Connecting Components to Redux

Exercise Solution - Connecting Components to Redux

Async Actions with Redux Thunk

App Overview and Goals

Initial App Setup

Tricking Redux with Dummy Reducers

A Touch More Setup

How to Fetch Data in a Redux App

Wiring Up an Action Creator

Making a Request From an Action Creator

Understanding Async Action Creators

More on Async Action Creators

Middlewares in Redux

Behind the Scenes of Redux Thunk

Shortened Syntax with Redux Thunk

Redux Store Design

Rules of Reducers

Return Values from Reducers

Argument Values

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 to MapStateToProps

That's the Issue!

Memoizing Functions

Memoization Issues

One Time Memoization

Alternate Overfetching Solution

Action Creators in Action Creators!

Finding Unique User Ids

Quick Refactor with Chain

App Wrapup

Navigation with React Router

App Outline

Mockups in Detail

App Challenges

Initial Setup

Introducing React Router

How React Router Works

How Paths Get Matched

How to *Not* Navigate with React Router

Navigating with React Router

[Optional] - Different Router Types

Component Scaffolding

Wiring Up Routes

Always Visible Components

Connecting the Header

Links Inside Routers

Handling Authentication with React

OAuth-Based Authentication

OAuth for Servers vs Browser Apps

Creating OAuth Credentials

Wiring Up the Google API Library

Sending a User Into the OAuth Flow

Rendering Authentication Status

Updating Auth State

Displaying Sign In and Sign Out Buttons

On-Demand Sign In and Sign Out

Redux Architecture Design

Redux Setup

Connecting Auth with Action Creators

Building the Auth Reducer

Handling Auth Status Through Redux

Fixed Action Types

Recording the User's ID

Redux Dev Tools

Using Redux Dev Tools to Inspect the Store

Debug Sessions with Redux Dev Tools

Handling Forms with Redux Form

Forms with Redux Form

Useful Redux Form Examples

Connecting Redux Form

Creating Forms

Automatically Handling Events

Customizing Form Fields

Handling Form Submission

Validation of Form Inputs

Displaying Validation Messages

Showing Errors on Touch

Highlighting Errored Fields

REST-Based React Apps

Creating Streams

REST-ful Conventions

Setting Up an API Server

Creating Streams Through Action Creators

Creating a Stream with REST Conventions

Dispatching Actions After Stream Creation

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 All Streams

Rendering All Streams

Associating Streams with Users

Conditionally Showing Edit and Delete

Linking to Stream Creation

When to Navigate Users

History References

History Object Deprecation Warning

Creating a Browser History Object

Implementing Programmatic Navigation

Manually Changing API Records

URL-Based Selection

Wildcard Navigation

More on Route Params

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

Using React Portals

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

Implementing Streaming Video

Viewing a Stream

Switches with React-Router

Showing a Stream

RTMP NodeMediaServer is not a constructor error fix

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 with ComponentWillUnmount

The Context System with React

The Context System

An App with Context

App Generation

Selecting a Language

A Touch More Setup

Getting Data Out of Context

Creating Context Objects

Consuming the Context Value

The Context Provider

Gotchas Around Providers

Accessing Data with Consumers

Pulling From Multiple Contexts

Replacing Redux with Context

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 to the Store

Context vs Redux Recap

Hooks with Functional Components

Introducing Hooks

App Overview

Building Stateful Class Components

The UseState Hook

UseState in Detail

Building the ResourceList

Fetching a Given Resource

ComponentDidUpdate vs ComponentDIdMount

Refactoring a Class to a Function

Lifecycles with UseEffect

Updates with UseEffect

Does It Get Called?

Quick Gotcha with UseEffect

Rendering a List

Actual Code Reuse!

Code Reuse with Hooks

More Fun with Hooks

Weather Hooks

Project Zip

App Overview

Refactoring a Class to a Function

Extracting Reusable Logic

That's All For Now

[Legacy] An Intro to React

Introduction - Github Links for Project Files!

Completed Projects - Github Links

The Purpose of Boilerplate Projects

Environment Setup

Project Setup

Support for Create React App

A Taste of JSX

More on JSX

Quick Note - Getting Different Error Messages

ES6 Import Statements

ReactDOM vs React

Differences Between Component Instances and Component Classes

Render Targets

Component Structure

Youtube Search API Signup

Export Statements

Class-Based Components

Handling User Events

Introduction to State

More on State

Controlled Components

Breather and Review

[Legacy] Ajax Requests with React

Youtube Search Response

Refactoring Functional Components to Class Components

Props

Building Lists with Map

List Item Keys

Video List Items

Detail Component and Template Strings

Handling Null Props

Video Selection

Styling with CSS

Searching for Videos

Throttling Search Term Input

React Wrapup

[Legacy] Modeling Application State

Foreword on Redux

What is Redux?

More on Redux

Even More on Redux!

[Legacy] Managing App State with Redux

Putting Redux to Practice

Reducers

Containers - Connecting Redux to React

Containers Continued

Implementation of a Container Class

Containers and Reducers Review

Actions and Action Creators

Binding Action Creators

Creating an Action

Consuming Actions in Reducers

Consuming Actions in Reducers Continued

Conditional Rendering

Reducers and Actions Review

[Legacy] Intermediate Redux: Middleware

App Overview and Planning

Component Setup

Controlled Components and Binding Context

Form Elements in React

Working with API's

Introduction to Middleware

Ajax Requests with Axios

Redux-Promise in Practice

Redux-Promise Continued

Avoiding State Mutations in Reducers

Building a List Container

Mapping Props to a Render Helper

Adding Sparkline Charts

Making a Reusable Chart Component

Labeling of Units

Google not Defined Errors

Google Maps Integration

Google Maps Integration Continued

Project Review

[Legacy] React Router + Redux Form v6

App Overview and Goals

Posts API

Quick Note

Installing React Router

What React Router Does

The Basics of React Router

Route Design

Our First Route Definition

State as an Object

Back to Redux - Index Action

Implementing Posts Reducer

Action Creator Shortcuts

Rendering a List of Posts

Creating New Posts

A React Router Gotcha

Navigation with the Link Component

Redux Form

Setting Up Redux Form

The Field Component

Generalizing Fields

Validating Forms

Showing Errors to Users

Handling Form Submittal

Form and Field States

Conditional Styling

More on Navigation

Create Post Action Creator

Navigation Through Callbacks

The Posts Show Component

Receiving New Posts

Selecting from OwnProps

Data Dependencies

Caching Records

Deleting a Post

Wrapup

[Legacy - Do Not Take] Bonus - RallyCoding

Basics of Redux Thunk

Combining Redux and Firebase

Dynamic Forms with Redux Form

Logicless Components with Reselect

Data Loading Methods with Redux

Animation of React Components

The Best Way to Store Redux Data

Four Most Common Errors with React and Redux

Modals in React and Redux Apps

Deployment of React/Webpack Apps

BrowserHistory in Production

React Integration with 3rd Party Libraries

Introducing JSPlaygrounds for Rapid Prototyping

[Legacy - Do Not Take] React Router + Redux Form v4

Important Note - Do Not Skip!

App Overview and Goals

Exploring the Posts Api

Installing React Router

React Router - What is It?

Setting Up React Router

Route Configuration

Nesting Of Routes

IndexRoutes with React Router

Back To Redux - Index Action

Catching Data with Posts Reducer

Catching Data with Posts Reducer Continued

Fetching Data with Lifecycle Methods

Fetching Data with Lifecycle Methods Continued

Creating New Posts

Navigation with the Link Component

Forms and Form Submission

More on Forms and Form Submission

Passing Control to Redux Form

CreatePost Action Creator

Form Validation

Form Validation Continued

Navigating on Submit

Posts Index

Dynamic Route Params

Loading Data on Render

Handling Null Props

Delete Action Creator

Navigate on Delete

ReactRouter and ReduxForm Wrapup

Extras

Bonus!