Share Description
In this course, you will :
- 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.
Syllabus :
1. Testing
- npx Create React App Generation
- Project Generation
- Our First Test
- Introduction to Jest
- 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
2. Higher Order Components
- An Introduction to Higher Order Components
- Connect - A Higher Order Component
- 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
3. 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
4. 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
5. Client Side Auth
- 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
6. Testing With React v14
- Note
- A First Spec
- Core Testing - Describe, It, Expect
- Test Reporting
- 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
7. Test Environment Setup with React v14
- 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
8. Higher Order Components with React v14
- 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
9. Middleware with React v14
- 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
10. Client Side Authentication with React v14
- 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
- Securing Individual Routes
- Root IndexRoute
- Automatically Authenticating Users
- Making Authenticated API Requests
- Handling Data from Authenticated Requests
- Authentication Wrapup
