Advanced React and Redux

Walkthroughs on advanced React v16.6.3 and Redux v4.0.0 - Authentication, Testing, Middlewares, HOC's, and Deployment

4.49 (11279 reviews)
Udemy
platform
English
language
Web Development
category
instructor
87,508
students
21 hours
content
Mar 2024
last update
$99.99
regular price

What you will 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

Description

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.


Content

Welcome! Let's Get Started!

Introduction
Github Links - Get Source Code Here!

Testing

npx Create React App Generation
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
Update for Handling Absolute Imports
Absolute Path Imports
Code Reuse with BeforeEach
Comment Box Component
TextArea Implementation
CommentBox Test File
Getting an Empty ReactWrapper in your console.log?
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

[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

[Legacy] 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

[Legacy] 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

[Legacy] 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

[Legacy] 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

Extras

Bonus!

Screenshots

Advanced React and Redux - Screenshot_01Advanced React and Redux - Screenshot_02Advanced React and Redux - Screenshot_03Advanced React and Redux - Screenshot_04

Reviews

Jamie
November 2, 2023
The progress included the skippable section. In order to get a certificate I needed to complete the skippable portion too.
Antonio
October 27, 2023
A very complete course, I liked the detail of each section and the simplicity of the explanations. Recommended to go beyond the basic concepts that may arise in real-life projects.
Saurav
October 24, 2023
backend part is legacy now as many function of mongoose now use promises instead of call backs and instead of robo 3t we can use mobodb compass which was pretty easy to use and almost same. overall course is really good, as we don't write a-lot of css which is unnecessary in a react redux advanced course.
Alex
September 7, 2023
lot of resources outdated! (e.g. creating a root element for testing, enyzme is not supported by React18
Sudhir
August 9, 2023
You didn't explain what react, why react, what tools and software required, directedly you created one app with command and started testing , I never found any such course in Udemy. First you should give you intro and course overview like what we are going to learn, and this course for whom , any prerequisite?
Joshua
August 2, 2023
Completely out of date. Took over an hour just to figure out how to make the proper changes to the code.
Vadym
July 11, 2023
Great course, but somewhat outdated. It would be a good fit for those who work with legacy projects. Stephen is a great instructor. He teaches to think as an engineer, explains everything in great detail, though sometimes a bit too verbose on explaining simple stuff.
Ina
July 3, 2023
This course is out of date. I had to use prepared boilerplates and deprecated features instead of modern React. I am not sure that I have learned much from the course. Unfortunately, it didn't live up to my expectations.
Luis
May 23, 2023
The testing part is very outdated, I know you can just go back to previous versions but honestly that practice is obsolete knowadays and a waste of time, employeers don't care if I know previous versions, they want the newest ones.
Luca
May 21, 2023
Wow Stephen. As I said in another of your course (cause i bought them all and usually gave you 5 stars) this is really bad. This is really bad as the other one I rated the same. And I really think I've found a third one... I hope there are no more. I HIGHLY RECOMMEND YOU GUYS TO NOT BUY THIS COURSE! HALF OF IT IS "TOTALLY OUTDATED" (IT MEANS YOU CAN'T EVEN TRY TO DO IT) AND THE OTHER HALF IS "PRETTY MUCH OUTDATED", IT MEANS THAT THINGS WILL NOT WORK TOTALLY AND YOU HAVE TO FIGURE OUT YOURSELF HOW TO DO IT. The first 4 sections endend with NOT-WORKING-TESTS. Cause he added some other lines of codes so the testing materials that you start with are not fixed so they will not work at all at the end. The 5th section is about mongoose connection and it's outdated! So your code will never connect to MongoDB except you figure out yourself how to do it. Stephen I'm founding really bad course of yours even if I think you're a good teacher. Fix these courses or just add [OUTDATED DON'T BUY] in the title!!!
Krys4
April 23, 2023
Stephen, as good as your other courses are, this one is as bad... Have mercy for the others and either remove or update this course. It's not even a waste of money, because I really value your work, but it's a waste of time to learn from the outdated resources... One can utilise this time better to learn the tools that are available on the market now... (and not 5 years ago)
Joakim
April 12, 2023
There are too many out of date issues. Enzyme, .env is not working. The code on github is more than 5 years old. I give up. Sadly since I learned so much from the react-redux course.
Luiz
March 28, 2023
So far it's good but a lot of configuration issues due to the fact that it's an older module. Needs so updates
Y
December 12, 2022
I almost took most of his lessons and learned a lot of valuable information. However, I can safely say that this course is really getting old. You must update the test using the "Testing Library" that comes with the React installation. If there is no new update, please unpublish this course. This course is a bad reference for your great courses. The 1-star course I gave here is related to the fact that it is very old. If the course is updated, it will be 4.5 or 5 stars. PS: Please set the video volumes higher.
Ayaz
October 14, 2022
very detailed course... if you re not understanding React from anywhere else this is the ideal place to come up to.

Charts

Price

Advanced React and Redux - Price chart

Rating

Advanced React and Redux - Ratings chart

Enrollment distribution

Advanced React and Redux - Distribution chart

Related Topics

781532
udemy ID
3/3/2016
course created date
8/13/2019
course indexed date
Bot
course submited by