Mô tả

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.


Bạn sẽ học được gì

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

Yêu cầu

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

Nội dung khoá học

8 sections

Welcome! Let's Get Started!

2 lectures
Course Resources
00:28
Join Our Community!
00:07

Testing

62 lectures
Required Boilerplate - DO NOT SKIP
00:15
Project Generation
02:05
Our First Test
03:51
Introduction to Jest
03:43
App Overview
02:01
Installing Dependencies
00:44
React and Redux Design
02:44
What Do We Test?
04:24
Starting from Scratch
02:48
Rendering the App
04:07
Showing Components in the App
03:16
Valid Test File Names
03:31
Test Structure
03:56
Tricking React with JSDOM
07:52
Verifying Component Existence
04:11
Test Expectations
04:11
Limiting Test Knowledge
06:13
Enzyme Setup
07:25
Enzyme Renderers
06:19
Expectations for Component Instances
07:06
Exercise Time!
01:18
Expecting the Comment List
01:56
Absolute Path Imports
05:00
Code Reuse with BeforeEach
04:25
Comment Box Component
03:16
TextArea Implementation
05:08
CommentBox Test File
03:22
Asserting Element Existence
06:48
AfterEach Statements
04:02
Simulating Change Events
05:15
Providing Fake Events
06:35
Forcing Component Updates
03:55
Retrieving Prop Values
04:19
Form Submit Exercise
02:08
Exercise Solution
06:41
Describe Statements
06:18
Redux Setup
04:30
The Provider Tag
05:00
The SaveComment Action Creator
04:11
Bonding React with Redux
03:57
Redux Test Errors
06:56
Adding a Root Component
07:36
Testing Reducers
05:21
Handling Unknown Types
02:46
Testing Action Creators
05:31
Comment List Wireup
04:34
Getting Data Into Redux
04:55
Redux Initial State
07:51
Cheerio Queries
08:29
One More Feature
03:51
Fetching a Remote Resource
04:37
Parsing Comment List
05:08
Integration Tests
03:31
Integration Tests in Action
03:03
Fixing a Broken Test
02:30
Simulating Button Clicks
03:04
Why the Failure?
04:32
Faking Requests with Moxios
05:58
The Reason for Failure
02:47
Introducing a Pause
06:55
Moxios's Wait Function
02:43
App Wrapup
02:01

Higher Order Components

14 lectures
An Introduction to Higher Order Components
01:42
Connect - A Higher Order Component
01:58
App Overview
04:30
Adding React Router
01:45
Adding Routes
03:34
Auth Reducer
05:04
Rendering a Header
04:05
Wiring Up State
04:18
Changing Auth State
03:47
Steps for Building a HOC
06:29
Forced Navigation with React Router
04:27
Creating the HOC
10:06
Placing Reusable Logic
03:26
Passing Through Props
09:10

MIddlewares with Redux

12 lectures
Introduction to Middlewares
02:30
The Purpose of Redux Promise
09:04
How Async Middlewares Work
08:33
Crazy Middleware Syntax
08:42
Forwarding Actions
04:06
Waiting for Promise Resolution
05:57
Observing the Middleware
07:02
State Validation Middleware
04:34
JSON Schema
05:13
Generating JSON Schema
04:13
Middleware Creation
06:08
Emitting Warnings
05:52

Server Setup - Authentication

27 lectures
Introduction to Authentication
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

Client Side Auth

30 lectures
Required Boilerplate - DO NOT SKIP
00:25
Client Overview
03:25
Lib Installs
01:49
The App Component
03:51
Creating the Header
06:02
Wiring Up React Router
05:23
Scaffolding the Signup Form
04:37
Including Redux
07:45
ReduxForm for Signup
06:27
Handling Form Submission
05:05
Wiring Up Middleware
02:16
Basics of Redux Thunk
09:20
Calling the API
05:01
Code Cleanup with Compose
05:50
CORS in a Nutshell
11:21
Solution to CORS Errors
05:26
Dispatching Actions
04:04
Displaying Auth Errors
05:16
Redirect on Signup
02:37
Feature Component
02:28
The Require Auth HOC
04:02
Reference - HOC Code
00:12
Persisting Login State
04:54
Signing Out a User
04:20
Automatic Sign Out
02:26
The Signin Component
02:14
The Signin Action Creator
02:35
Updating the Header
03:20
Header Styling
03:09
Auth Wrapup
02:55

Important - OLD VERSION OF COURSE - React v14

93 lectures
Note on the Following Lectures
00:14
Note
00:08
Project Setup
03:29
A First Spec
12:42
Core Testing - Describe, It, Expect
09:39
Purpose of Describe, It, and Expect
3 questions
Test Reporting
04:05
Test Structure
2 questions
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
Simulating Events
07:24
Testing Controlled Components
07:23
Form Submit Event
07:13
Stub Comment List
06:00
Expectations on Content
07:43
Assertions with Lists
05:42
Testing Action Creators
09:34
Action Creator Shortcuts
04:47
TDD Comments Reducer
12:37
Spec Failures After Code Change
03:36
Purpose of Chai and Mocha
05:19
App Review
03:07
Test Helper From Scratch
02:43
JSDom Setup
07:14
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
What is a Higher Order Component?
03:06
Connect and Provider
05:49
Authentication HOC Overview
04:19
Header Setup
06:54
React Router Setup
07:36
Authentication Reducer
07:05
Action Creator Hookup
08:04
Authentication Higher Order Component
04:57
HOC Scaffold Code
09:09
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
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
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
Action Creator with Many Responsibilities
08:22
Introducing Redux Thunk
07:10
Signin Action Creator
10:38
CORS In a Nutshell
09:13
Serverside Solution for CORS
06:16
Programmatic Navigation
07:11
Updating Auth State
06:29
Breather and Review
05:39
LocalStorage and JWT
06:39
Auth Error Messaging
04:36
Displaying Errors
04:40
Header Logic
10:29
Signout Component
05:32
Signout Action Creator
04:45
Signup Component
04:12
Signup Form Scaffolding
08:02
Redux Form Validation
04:30
Implementing Validation Logic
09:28
More On Validation
05:40
Signup Action Creator
07:11
Finish Up Signup
08:55
Securing Individual Routes
10:21
Root IndexRoute
02:34
Automatically Authenticating Users
07:11
Making Authenticated API Requests
08:01
Handling Data from Authenticated Requests
05:13
Authentication Wrapup
03:29

Extras

1 lectures
Bonus!
00:36

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.