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

Here's how it works:

share-icon

Anybody can submit a course or a tutorial

thumbs-up

Community upvotes the useful tutorials

upwards-graph

The best tutorials rise to the top

Advanced React and Redux (udemy.com)

Visit Tutorial
Paid Video Advanced
#8 out of total 44 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

Session:
Self Paced
Video:
21 hours on-demand video
Certificate:
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

Requirements

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

About

Description

Course last updated May 30th, 2018.  Enjoy the latest versions of React, React Router, Redux, Redux Form, and more!

-------

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!

Syllabus

Welcome! Let's Get Started!

Introduction

Github Links - Get Source Code Here!

Testing

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

Higher Order Components

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

MIddlewares with Redux

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

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 Auth

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

Bonus!

RallyCoding

[Legacy] Testing

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

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

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

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!

More React Tutorials