Advanced React and Redux by Udemy
Walkthroughs on advanced React v16.6.3 and Redux v4.0.0 - Authentication, Testing, Middlewares, HOC's, and Deployment
Course Highlights
- 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
Skills you will learn!
Curriculum
2 Topics
Course Resources
Join Our Community!
62 Topics
Required Boilerplate - DO NOT SKIP
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
14 Topics
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
12 Topics
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
27 Topics
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
30 Topics
Required Boilerplate - DO NOT SKIP
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
93 Topics
Note on the Following Lectures
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
Purpose of Chai and Mocha
App Review
Test Helper From Scratch
JSDom Setup
More JSDom Setup
TestUtils Library
Defining RenderComponent
Finishing RenderComponent Helper
Simulate Helper
Test Helper Review
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
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
1 Topic
Bonus!
Advanced React and Redux
Related React JS Courses
Thank You!
Your review has been submitted successfully.