🚀  We just launched hackr for designers. Visit it here

Hackr.io is a programming community to find and share the best online programming courses & tutorials. Join them, it only takes 30 seconds.

Here's how it works:


Anybody can submit a course or a tutorial


Community upvotes the useful tutorials


The best tutorials rise to the top

Advanced React and Redux (udemy.com)

Visit Tutorial
Paid Video Advanced
#7 out of total 35 React tutorials & courses

Why developers like this tutorial (one-liner reviews):

Content quality

Qualified Instructor

Video quality

Course Pace

Course depth and Coverage

Add your one-liner review here:

Tutorial Info

Self Paced
12 hours on-demand video
Available On Completion
Taught by:
Submitted by:
Visit Tutorial

Tutorial Details

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 Mocha and Chai
  • Realize the power of building composable components


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



NOTE: Knowledge of React + Redux is 100% required! If you are familiar with reducers and action creators you will be fine.

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 reducers
  • Get 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 actions
  • Become 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.

Who is the target audience?
  • Programmers with experience on React and Redux
  • NOT for programmers with no previous React/Redux experience!


Welcome! Let's Get Started!


Github Links - Get Source Code Here!


Project Setup

Core Testing - Describe, It, Expect

Purpose of Describe, It, and Expect

A First Spec

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

App Review

Test Environment Setup

Purpose of Chai and Mocha

Test Helper From Scratch

JSDom Setup

More JSDom Setup

TestUtils Library

Defining RenderComponent

Finishing RenderComponent Helper

Simulate Helper

Test Helper Review

Higher Order Components

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

Server Setup - Authentication

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

Client Side Authentication

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



Wanna find a programming buddy?

Learning a new programming language can be tough especially if you are a beginner in programming. Find a programming buddy and learn this tutorial in a more engaged & fun way.

Discuss this tutorial:

Ask a question or write your feedback/review of this course or tell anything to the people taking this course.

Kickstart the conversation!