Advanced React and Redux

Detailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and Deployment
4.7 (1,721 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
9,930 students enrolled
$19
$140
86% off
Take This Course
  • Lectures 118
  • Length 12 hours
  • Skill Level Intermediate Level
  • Languages English, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English Closed captions available

Course Description

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.


What are the requirements?

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

What am I going to get from this course?

  • 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

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Welcome! Let's Get Started!
01:46

Get an introduction to this course.  We'll focus on the critical aspects of React and Redux.

Github Links - Get Source Code Here!
Article
Section 2: Testing
03:29

Project setup for our first React and Redux project.

Core Testing - Describe, It, Expect
Preview
09:39
3 questions

Solidify your knowledge

12:42

Testing of React applications is critical.  In this section we'll write our first test.

Test Reporting
04:05
2 questions

Solidify your knowledge.

Feature Mockups
06:09
Test Structure Setup
06:55
Comment Box Tests
08:19
Testing Class Names
07:50
Using beforeEach to Condense Tests
06:22
Expecting Child Elements
05:13
07:24

Testing React and Redux apps must include simulating user input, like clicking or typing.

07:23

With React, controlled components get their value set by state.

07:13

Simulating change events isn't enough with React testing, we must also simulate form submit events as well.

Stub Comment List
06:00
Expectations on Content
07:43
Assertions with Lists
05:42
09:34

React and Redux's action creators can be tested as plain functions.

Action Creator Shortcuts
04:47
TDD Comments Reducer
12:37
Spec Failures After Code Change
03:36
App Review
03:07
Section 3: Test Environment Setup
Purpose of Chai and Mocha
05:19
Test Helper From Scratch
02:43
07:14

JSDOM is a browser simulation library for testing React and Redux apps.

More JSDom Setup
05:28
TestUtils Library
07:53
Defining RenderComponent
07:52
Finishing RenderComponent Helper
05:12
Simulate Helper
07:09
Test Helper Review
03:08
Section 4: Higher Order Components
What is a Higher Order Component?
03:06
Connect and Provider
05:49
04:19

Higher Order Components enable fantastic code reuse with React.

Header Setup
06:54
React Router Setup
07:36
Authentication Reducer
07:05
Action Creator Hookup
08:04
Authentication Higher Order Component
04:57
09:09

Nearly all React Higher Order Components end up looking identical.

Nesting Higher Order Components
04:48
Accessing React Router on Context
05:30
Class Level Properties
02:12
Handling HOC Edge Cases
05:03
Higher Order Components Review
03:05
Section 5: Middleware
Middleware Overview
03:26
App Building Plan
03:50
Users Reducer
04:14
Static Users Action Creator
02:15
Rendering a List of Users
07:32
CSS Cleanup
04:20
Pains Without Middleware
07:15
Middleware Stack
04:43
Middleware Internals
07:55
Handling Unrelated Actions
05:17
Handling Promises
08:05
Middleware Review
06:50
Section 6: Server Setup - Authentication
Introduction to Authentication
Preview
04:32
Cookies vs Tokens
04:57
Scalable Architecture
04:49
Server Setup
03:45
More Server Setup
05:41
Express Middleware
06:29
Express Route Handler
06:09
Mongoose Models
10:22
MongoDB Setup
06:29
Inspecting the Database
06:19
Authentication Controller
04:57
Searching for Users
07:57
Creating User Records
06:31
Encrypting Passwords with Bcrypt
08:12
Salting a Password
06:16
JWT Overview
04:58
Creating a JWT
07:13
Installing Passport
05:50
Passport Strategies
08:55
Using Strategies with Passport
04:02
Making an Authenticated Request
05:55
Signing in with Local Strategy
05:37
Purpose of Local Strategy
04:17
Bcrypt Full Circle
05:08
Protecting Signin Route
04:12
Signing Users In
04:04
Server Review
02:39
Section 7: Client Side Authentication
Client Setup
02:28
App Architecture
05:48
Component and State Design
07:30
Header Component
04:17
Scaffolding the Signin Form
11:03
Adding Signin Form
05:58

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Stephen Grider, Engineering Architect

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

Ready to start learning?
Take This Course