Advanced React and Redux

• Course Resources

• Join Our Community!

• Required Boilerplate - DO NOT SKIP

• Project Generation

• Our First Test

• Introduction to Jest

• App Overview

• Installing Dependencies

• React and Redux Design

• What Do We Test?

• Starting from Scratch

• Rendering the App

• Showing Components in the App

• Valid Test File Names

• Test Structure

• Tricking React with JSDOM

• Verifying Component Existence

• Test Expectations

• Limiting Test Knowledge

• Enzyme Setup

• Enzyme Renderers

• Expectations for Component Instances

• Exercise Time!

• Expecting the Comment List

• Absolute Path Imports

• Code Reuse with BeforeEach

• Comment Box Component

• TextArea Implementation

• CommentBox Test File

• Asserting Element Existence

• AfterEach Statements

• Simulating Change Events

• Providing Fake Events

• Forcing Component Updates

• Retrieving Prop Values

• Form Submit Exercise

• Exercise Solution

• Describe Statements

• Redux Setup

• The Provider Tag

• The SaveComment Action Creator

• Bonding React with Redux

• Redux Test Errors

• Adding a Root Component

• Testing Reducers

• Handling Unknown Types

• Testing Action Creators

• Comment List Wireup

• Getting Data Into Redux

• Redux Initial State

• Cheerio Queries

• One More Feature

• Fetching a Remote Resource

• Parsing Comment List

• Integration Tests

• Integration Tests in Action

• Fixing a Broken Test

• Simulating Button Clicks

• Why the Failure?

• Faking Requests with Moxios

• The Reason for Failure

• Introducing a Pause

• Moxios's Wait Function

• App Wrapup

• An Introduction to Higher Order Components

• Connect - A Higher Order Component

• App Overview

• Adding React Router

• Adding Routes

• Auth Reducer

• Rendering a Header

• Wiring Up State

• Changing Auth State

• Steps for Building a HOC

• Forced Navigation with React Router

• Creating the HOC

• Placing Reusable Logic

• Passing Through Props

• Introduction to Middlewares

• The Purpose of Redux Promise

• How Async Middlewares Work

• Crazy Middleware Syntax

• Forwarding Actions

• Waiting for Promise Resolution

• Observing the Middleware

• State Validation Middleware

• JSON Schema

• Generating JSON Schema

• Middleware Creation

• Emitting Warnings

• Introduction to Authentication

• Cookies vs Tokens

• Scalable Architecture

• Server Setup

• More Server Setup

• Express Middleware

• Express Route Handler

• Mongoose Models

• MongoDB Setup

• Inspecting the Database

• Authentication Controller

• Searching for Users

• Creating User Records

• Encrypting Passwords with Bcrypt

• Salting a Password

• JWT Overview

• Creating a JWT

• Installing Passport

• Passport Strategies

• Using Strategies with Passport

• Making an Authenticated Request

• Signing in with Local Strategy

• Purpose of Local Strategy

• Bcrypt Full Circle

• Protecting Signin Route

• Signing Users In

• Server Review

• Required Boilerplate - DO NOT SKIP

• Client Overview

• Lib Installs

• The App Component

• Creating the Header

• Wiring Up React Router

• Scaffolding the Signup Form

• Including Redux

• ReduxForm for Signup

• Handling Form Submission

• Wiring Up Middleware

• Basics of Redux Thunk

• Calling the API

• Code Cleanup with Compose

• CORS in a Nutshell

• Solution to CORS Errors

• Dispatching Actions

• Displaying Auth Errors

• Redirect on Signup

• Feature Component

• The Require Auth HOC

• Reference - HOC Code

• Persisting Login State

• Signing Out a User

• Automatic Sign Out

• The Signin Component

• The Signin Action Creator

• Updating the Header

• Header Styling

• Auth Wrapup

• Note on the Following Lectures

• Note

• Project Setup

• A First Spec

• Core Testing - Describe, It, Expect

• Purpose of Describe, It, and Expect

• Test Reporting

• Test Structure

• Feature Mockups

• Test Structure Setup

• Comment Box Tests

• Testing Class Names

• Using beforeEach to Condense Tests

• Expecting Child Elements

• Simulating Events

• Testing Controlled Components

• Form Submit Event

• Stub Comment List

• Expectations on Content

• Assertions with Lists

• Testing Action Creators

• Action Creator Shortcuts

• TDD Comments Reducer

• Spec Failures After Code Change

• Purpose of Chai and Mocha

• App Review

• Test Helper From Scratch

• JSDom Setup

• More JSDom Setup

• TestUtils Library

• Defining RenderComponent

• Finishing RenderComponent Helper

• Simulate Helper

• Test Helper Review

• What is a Higher Order Component?

• Connect and Provider

• Authentication HOC Overview

• Header Setup

• React Router Setup

• Authentication Reducer

• Action Creator Hookup

• Authentication Higher Order Component

• HOC Scaffold Code

• Nesting Higher Order Components

• Accessing React Router on Context

• Class Level Properties

• Handling HOC Edge Cases

• Higher Order Components Review

• Middleware Overview

• App Building Plan

• Users Reducer

• Static Users Action Creator

• Rendering a List of Users

• CSS Cleanup

• Pains Without Middleware

• Middleware Stack

• Middleware Internals

• Handling Unrelated Actions

• Handling Promises

• Middleware Review

• Client Setup

• App Architecture

• Component and State Design

• Header Component

• Scaffolding the Signin Form

• Adding Signin Form

• Action Creator with Many Responsibilities

• Introducing Redux Thunk

• Signin Action Creator

• CORS In a Nutshell

• Serverside Solution for CORS

• Programmatic Navigation

• Updating Auth State

• Breather and Review

• LocalStorage and JWT

• Auth Error Messaging

• Displaying Errors

• Header Logic

• Signout Component

• Signout Action Creator

• Signup Component

• Signup Form Scaffolding

• Redux Form Validation

• Implementing Validation Logic

• More On Validation

• Signup Action Creator

• Finish Up Signup

• Securing Individual Routes

• Root IndexRoute

• Automatically Authenticating Users

• Making Authenticated API Requests

• Handling Data from Authenticated Requests

• Authentication Wrapup

• Bonus!