Advanced React and Redux

Advanced React and Redux

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 21 Hours | 12.2 GB

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

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

Course includes content specific to React v16.6.3 and Redux v4.0.1! For React v14, start with the section titled “Testing with React v14”

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 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 Jest and Enzyme
  • Realize the power of building composable components
Table of Contents

Welcome! Let’s Get Started!
1 Introduction
2 Github Links – Get Source Code Here!

Testing
3 npx Create React App Generation
4 Project Generation
5 Our First Test
6 Introduction to Jest
7 App Overview
8 Installing Dependencies
9 React and Redux Design
10 What Do We Test
11 Starting from Scratch
12 Rendering the App
13 Showing Components in the App
14 Valid Test File Names
15 Test Structure
16 Tricking React with JSDOM
17 Verifying Component Existence
18 Test Expectations
19 Limiting Test Knowledge
20 Enzyme Setup
21 Enzyme Renderers
22 Expectations for Component Instances
23 Exercise Time!
24 Expecting the Comment List
25 Update for Handling Absolute Imports
26 Absolute Path Imports
27 Code Reuse with BeforeEach
28 Comment Box Component
29 TextArea Implementation
30 CommentBox Test File
31 Getting an Empty ReactWrapper in your console.log
32 Asserting Element Existence
33 AfterEach Statements
34 Simulating Change Events
35 Providing Fake Events
36 Forcing Component Updates
37 Retrieving Prop Values
38 Form Submit Exercise
39 Exercise Solution
40 Describe Statements
41 Redux Setup
42 The Provider Tag
43 The SaveComment Action Creator
44 Bonding React with Redux
45 Redux Test Errors
46 Adding a Root Component
47 Testing Reducers
48 Handling Unknown Types
49 Testing Action Creators
50 Comment List Wireup
51 Getting Data Into Redux
52 Redux Initial State
53 Cheerio Queries
54 One More Feature
55 Fetching a Remote Resource
56 Parsing Comment List
57 Integration Tests
58 Integration Tests in Action
59 Fixing a Broken Test
60 Simulating Button Clicks
61 Why the Failure
62 Faking Requests with Moxios
63 The Reason for Failure
64 Introducing a Pause
65 Moxios’s Wait Function
66 App Wrapup

Higher Order Components
67 An Introduction to Higher Order Components
68 Connect – A Higher Order Component
69 App Overview
70 Adding React Router
71 Adding Routes
72 Auth Reducer
73 Rendering a Header
74 Wiring Up State
75 Changing Auth State
76 Steps for Building a HOC
77 Forced Navigation with React Router
78 Creating the HOC
79 Placing Reusable Logic
80 Passing Through Props

MIddlewares with Redux
81 Introduction to Middlewares
82 The Purpose of Redux Promise
83 How Async Middlewares Work
84 Crazy Middleware Syntax
85 Forwarding Actions
86 Waiting for Promise Resolution
87 Observing the Middleware
88 State Validation Middleware
89 JSON Schema
90 Generating JSON Schema
91 Middleware Creation
92 Emitting Warnings

Server Setup – Authentication
93 Introduction to Authentication
94 Cookies vs Tokens
95 Scalable Architecture
96 Server Setup
97 More Server Setup
98 Express Middleware
99 Express Route Handler
100 Mongoose Models
101 MongoDB Setup
102 Inspecting the Database
103 Authentication Controller
104 Searching for Users
105 Creating User Records
106 Encrypting Passwords with Bcrypt
107 Salting a Password
108 JWT Overview
109 Creating a JWT
110 Installing Passport
111 Passport Strategies
112 Using Strategies with Passport
113 Making an Authenticated Request
114 Signing in with Local Strategy
115 Purpose of Local Strategy
116 Bcrypt Full Circle
117 Protecting Signin Route
118 Signing Users In
119 Server Review

Client Side Auth
120 Client Overview
121 Lib Installs
122 The App Component
123 Creating the Header
124 Wiring Up React Router
125 Scaffolding the Signup Form
126 Including Redux
127 ReduxForm for Signup
128 Handling Form Submission
129 Wiring Up Middleware
130 Basics of Redux Thunk
131 Calling the API
132 Code Cleanup with Compose
133 CORS in a Nutshell
134 Solution to CORS Errors
135 Dispatching Actions
136 Displaying Auth Errors
137 Redirect on Signup
138 Feature Component
139 The Require Auth HOC
140 Reference – HOC Code
141 Persisting Login State
142 Signing Out a User
143 Automatic Sign Out
144 The Signin Component
145 The Signin Action Creator
146 Updating the Header
147 Header Styling
148 Auth Wrapup

Testing With React v14
149 Note
150 Project Setup
151 A First Spec
152 Core Testing – Describe, It, Expect
153 Test Reporting
154 Feature Mockups
155 Test Structure Setup
156 Comment Box Tests
157 Testing Class Names
158 Using beforeEach to Condense Tests
159 Expecting Child Elements
160 Simulating Events
161 Testing Controlled Components
162 Form Submit Event
163 Stub Comment List
164 Expectations on Content
165 Assertions with Lists
166 Testing Action Creators
167 Action Creator Shortcuts
168 TDD Comments Reducer
169 Spec Failures After Code Change
170 App Review

Test Environment Setup with React v14
171 Purpose of Chai and Mocha
172 Test Helper From Scratch
173 JSDom Setup
174 More JSDom Setup
175 TestUtils Library
176 Defining RenderComponent
177 Finishing RenderComponent Helper
178 Simulate Helper
179 Test Helper Review

Higher Order Components with React v14
180 What is a Higher Order Component
181 Connect and Provider
182 Authentication HOC Overview
183 Header Setup
184 React Router Setup
185 Authentication Reducer
186 Action Creator Hookup
187 Authentication Higher Order Component
188 HOC Scaffold Code
189 Nesting Higher Order Components
190 Accessing React Router on Context
191 Class Level Properties
192 Handling HOC Edge Cases
193 Higher Order Components Review

Middleware with React v14
194 Middleware Overview
195 App Building Plan
196 Users Reducer
197 Static Users Action Creator
198 Rendering a List of Users
199 CSS Cleanup
200 Pains Without Middleware
201 Middleware Stack
202 Middleware Internals
203 Handling Unrelated Actions
204 Handling Promises
205 Middleware Review

Client Side Authentication with React v14
206 Client Setup
207 App Architecture
208 Component and State Design
209 Header Component
210 Scaffolding the Signin Form
211 Adding Signin Form
212 Action Creator with Many Responsibilities
213 Introducing Redux Thunk
214 Signin Action Creator
215 CORS In a Nutshell
216 Serverside Solution for CORS
217 Programmatic Navigation
218 Updating Auth State
219 Breather and Review
220 LocalStorage and JWT
221 Auth Error Messaging
222 Displaying Errors
223 Header Logic
224 Signout Component
225 Signout Action Creator
226 Signup Component
227 Signup Form Scaffolding
228 Redux Form Validation
229 Implementing Validation Logic
230 More On Validation
231 Signup Action Creator
232 Finish Up Signup
233 Securing Individual Routes
234 Root IndexRoute
235 Automatically Authenticating Users
236 Making Authenticated API Requests
237 Handling Data from Authenticated Requests
238 Authentication Wrapup

Extras
239 Bonus!