Advanced React and Redux

Walkthroughs on advanced React v16.6.3 and Redux v4.0.0 – Authentication, Testing, Middlewares, HOC’s, and Deployment
Advanced React and Redux
File Size :
11.24 GB
Total length :
20h 59m



Stephen Grider


Last update




Advanced React and Redux

What you’ll learn

Build a scaleable API with authentication using Express, Mongo, and Passport
Learn the differences between cookie-based and token-based authentication
Figure out what a Higher Order Component and how to use it to write dramatically less code
Write Redux middleware from scratch to uncover what is happening behind the scenes with Redux
Set up your own testing environment with Jest and Enzyme
Realize the power of building composable components

Advanced React and Redux


Solid understanding of React
Intermediate understanding of Redux; you should have knowledge of reducers, actions, and action creators


Knowledge of React + Redux is 100% required! If you are familiar with reducers and action creators you will be fine.Course includes content specific to React v16.6.3 and Redux v4.0.1! For React v14, start with the section titled “Testing with React v14″This is the tutorial you’ve been looking for to take your React and Redux skills to the next level.Authentication with Express/Mongo?  Yes!  Middleware/Higher Order Components? We got it.  Testing with Mocha/Chai?  It’s here!This course wastes no time diving right into interesting topics, and teaches you the core knowledge you need to deeply understand and build React components and structure applications with Redux.Mastering React and Redux can get you a position in web development or help you build that personal project you’ve been dreaming of. It’s a skill that will put you more in demand in the modern web development industry, especially with the release of Redux and ReactNative.There are dozens of great tutorials online for React and Redux, but none of them teach the challenging, core features of these two fantastic libraries.  I created this course to push you beyond “just getting started.”Learn how to thoroughly test React and Redux code, including tests for action creators and reducersGet familiar with Higher Order Components.  Don’t know what they are?  No problem, you have been using them without even knowing it!Rewrite a popular Redux Middleware from scratch to handle asynchronous actionsBecome a master of the trickiest topic in Javascript: authentication.  You will write a server with enterprise-grade authentication from scratch that can scale to hundreds of thousands of users.  No shortcuts, no dummy data.I have built the course that I would have wanted to take when I was learning React and Redux.  A course that explains the concepts and how they’re implemented in the best order for you to learn and deeply understand them.


Section 1: Welcome! Let’s Get Started!

Lecture 1 Introduction

Lecture 2 Course Resources

Lecture 3 Join Our Community!

Section 2: Testing

Lecture 4 Required Boilerplate – DO NOT SKIP

Lecture 5 Project Generation

Lecture 6 Our First Test

Lecture 7 Introduction to Jest

Lecture 8 App Overview

Lecture 9 Installing Dependencies

Lecture 10 React and Redux Design

Lecture 11 What Do We Test?

Lecture 12 Starting from Scratch

Lecture 13 Rendering the App

Lecture 14 Showing Components in the App

Lecture 15 Valid Test File Names

Lecture 16 Test Structure

Lecture 17 Tricking React with JSDOM

Lecture 18 Verifying Component Existence

Lecture 19 Test Expectations

Lecture 20 Limiting Test Knowledge

Lecture 21 Enzyme Setup

Lecture 22 Enzyme Renderers

Lecture 23 Expectations for Component Instances

Lecture 24 Exercise Time!

Lecture 25 Expecting the Comment List

Lecture 26 Absolute Path Imports

Lecture 27 Code Reuse with BeforeEach

Lecture 28 Comment Box Component

Lecture 29 TextArea Implementation

Lecture 30 CommentBox Test File

Lecture 31 Asserting Element Existence

Lecture 32 AfterEach Statements

Lecture 33 Simulating Change Events

Lecture 34 Providing Fake Events

Lecture 35 Forcing Component Updates

Lecture 36 Retrieving Prop Values

Lecture 37 Form Submit Exercise

Lecture 38 Exercise Solution

Lecture 39 Describe Statements

Lecture 40 Redux Setup

Lecture 41 The Provider Tag

Lecture 42 The SaveComment Action Creator

Lecture 43 Bonding React with Redux

Lecture 44 Redux Test Errors

Lecture 45 Adding a Root Component

Lecture 46 Testing Reducers

Lecture 47 Handling Unknown Types

Lecture 48 Testing Action Creators

Lecture 49 Comment List Wireup

Lecture 50 Getting Data Into Redux

Lecture 51 Redux Initial State

Lecture 52 Cheerio Queries

Lecture 53 One More Feature

Lecture 54 Fetching a Remote Resource

Lecture 55 Parsing Comment List

Lecture 56 Integration Tests

Lecture 57 Integration Tests in Action

Lecture 58 Fixing a Broken Test

Lecture 59 Simulating Button Clicks

Lecture 60 Why the Failure?

Lecture 61 Faking Requests with Moxios

Lecture 62 The Reason for Failure

Lecture 63 Introducing a Pause

Lecture 64 Moxios’s Wait Function

Lecture 65 App Wrapup

Section 3: Higher Order Components

Lecture 66 An Introduction to Higher Order Components

Lecture 67 Connect – A Higher Order Component

Lecture 68 App Overview

Lecture 69 Adding React Router

Lecture 70 Adding Routes

Lecture 71 Auth Reducer

Lecture 72 Rendering a Header

Lecture 73 Wiring Up State

Lecture 74 Changing Auth State

Lecture 75 Steps for Building a HOC

Lecture 76 Forced Navigation with React Router

Lecture 77 Creating the HOC

Lecture 78 Placing Reusable Logic

Lecture 79 Passing Through Props

Section 4: MIddlewares with Redux

Lecture 80 Introduction to Middlewares

Lecture 81 The Purpose of Redux Promise

Lecture 82 How Async Middlewares Work

Lecture 83 Crazy Middleware Syntax

Lecture 84 Forwarding Actions

Lecture 85 Waiting for Promise Resolution

Lecture 86 Observing the Middleware

Lecture 87 State Validation Middleware

Lecture 88 JSON Schema

Lecture 89 Generating JSON Schema

Lecture 90 Middleware Creation

Lecture 91 Emitting Warnings

Section 5: Server Setup – Authentication

Lecture 92 Introduction to Authentication

Lecture 93 Cookies vs Tokens

Lecture 94 Scalable Architecture

Lecture 95 Server Setup

Lecture 96 More Server Setup

Lecture 97 Express Middleware

Lecture 98 Express Route Handler

Lecture 99 Mongoose Models

Lecture 100 MongoDB Setup

Lecture 101 Inspecting the Database

Lecture 102 Authentication Controller

Lecture 103 Searching for Users

Lecture 104 Creating User Records

Lecture 105 Encrypting Passwords with Bcrypt

Lecture 106 Salting a Password

Lecture 107 JWT Overview

Lecture 108 Creating a JWT

Lecture 109 Installing Passport

Lecture 110 Passport Strategies

Lecture 111 Using Strategies with Passport

Lecture 112 Making an Authenticated Request

Lecture 113 Signing in with Local Strategy

Lecture 114 Purpose of Local Strategy

Lecture 115 Bcrypt Full Circle

Lecture 116 Protecting Signin Route

Lecture 117 Signing Users In

Lecture 118 Server Review

Section 6: Client Side Auth

Lecture 119 Required Boilerplate – DO NOT SKIP

Lecture 120 Client Overview

Lecture 121 Lib Installs

Lecture 122 The App Component

Lecture 123 Creating the Header

Lecture 124 Wiring Up React Router

Lecture 125 Scaffolding the Signup Form

Lecture 126 Including Redux

Lecture 127 ReduxForm for Signup

Lecture 128 Handling Form Submission

Lecture 129 Wiring Up Middleware

Lecture 130 Basics of Redux Thunk

Lecture 131 Calling the API

Lecture 132 Code Cleanup with Compose

Lecture 133 CORS in a Nutshell

Lecture 134 Solution to CORS Errors

Lecture 135 Dispatching Actions

Lecture 136 Displaying Auth Errors

Lecture 137 Redirect on Signup

Lecture 138 Feature Component

Lecture 139 The Require Auth HOC

Lecture 140 Reference – HOC Code

Lecture 141 Persisting Login State

Lecture 142 Signing Out a User

Lecture 143 Automatic Sign Out

Lecture 144 The Signin Component

Lecture 145 The Signin Action Creator

Lecture 146 Updating the Header

Lecture 147 Header Styling

Lecture 148 Auth Wrapup

Section 7: Important – OLD VERSION OF COURSE – React v14

Lecture 149 Note on the Following Lectures

Lecture 150 Note

Lecture 151 Project Setup

Lecture 152 A First Spec

Lecture 153 Core Testing – Describe, It, Expect

Lecture 154 Test Reporting

Lecture 155 Feature Mockups

Lecture 156 Test Structure Setup

Lecture 157 Comment Box Tests

Lecture 158 Testing Class Names

Lecture 159 Using beforeEach to Condense Tests

Lecture 160 Expecting Child Elements

Lecture 161 Simulating Events

Lecture 162 Testing Controlled Components

Lecture 163 Form Submit Event

Lecture 164 Stub Comment List

Lecture 165 Expectations on Content

Lecture 166 Assertions with Lists

Lecture 167 Testing Action Creators

Lecture 168 Action Creator Shortcuts

Lecture 169 TDD Comments Reducer

Lecture 170 Spec Failures After Code Change

Lecture 171 Purpose of Chai and Mocha

Lecture 172 App Review

Lecture 173 Test Helper From Scratch

Lecture 174 JSDom Setup

Lecture 175 More JSDom Setup

Lecture 176 TestUtils Library

Lecture 177 Defining RenderComponent

Lecture 178 Finishing RenderComponent Helper

Lecture 179 Simulate Helper

Lecture 180 Test Helper Review

Lecture 181 What is a Higher Order Component?

Lecture 182 Connect and Provider

Lecture 183 Authentication HOC Overview

Lecture 184 Header Setup

Lecture 185 React Router Setup

Lecture 186 Authentication Reducer

Lecture 187 Action Creator Hookup

Lecture 188 Authentication Higher Order Component

Lecture 189 HOC Scaffold Code

Lecture 190 Nesting Higher Order Components

Lecture 191 Accessing React Router on Context

Lecture 192 Class Level Properties

Lecture 193 Handling HOC Edge Cases

Lecture 194 Higher Order Components Review

Lecture 195 Middleware Overview

Lecture 196 App Building Plan

Lecture 197 Users Reducer

Lecture 198 Static Users Action Creator

Lecture 199 Rendering a List of Users

Lecture 200 CSS Cleanup

Lecture 201 Pains Without Middleware

Lecture 202 Middleware Stack

Lecture 203 Middleware Internals

Lecture 204 Handling Unrelated Actions

Lecture 205 Handling Promises

Lecture 206 Middleware Review

Lecture 207 Client Setup

Lecture 208 App Architecture

Lecture 209 Component and State Design

Lecture 210 Header Component

Lecture 211 Scaffolding the Signin Form

Lecture 212 Adding Signin Form

Lecture 213 Action Creator with Many Responsibilities

Lecture 214 Introducing Redux Thunk

Lecture 215 Signin Action Creator

Lecture 216 CORS In a Nutshell

Lecture 217 Serverside Solution for CORS

Lecture 218 Programmatic Navigation

Lecture 219 Updating Auth State

Lecture 220 Breather and Review

Lecture 221 LocalStorage and JWT

Lecture 222 Auth Error Messaging

Lecture 223 Displaying Errors

Lecture 224 Header Logic

Lecture 225 Signout Component

Lecture 226 Signout Action Creator

Lecture 227 Signup Component

Lecture 228 Signup Form Scaffolding

Lecture 229 Redux Form Validation

Lecture 230 Implementing Validation Logic

Lecture 231 More On Validation

Lecture 232 Signup Action Creator

Lecture 233 Finish Up Signup

Lecture 234 Securing Individual Routes

Lecture 235 Root IndexRoute

Lecture 236 Automatically Authenticating Users

Lecture 237 Making Authenticated API Requests

Lecture 238 Handling Data from Authenticated Requests

Lecture 239 Authentication Wrapup

Section 8: Extras

Lecture 240 Bonus!

Programmers with experience on React and Redux,NOT for programmers with no previous React/Redux experience!

Course Information:

Udemy | English | 20h 59m | 11.24 GB
Created by: Stephen Grider

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top