Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 21 hours on-demand video
  • 7 articles
  • Full lifetime access
  • Access on mobile and TV
Development Web Development React

Advanced React and Redux

Walkthroughs on advanced React v16.6.3 and Redux v4.0.0 - Authentication, Testing, Middlewares, HOC's, and Deployment
Rating: 4.6 out of 54.6 (9,623 ratings)
69,539 students
Created by Stephen Grider
Last updated 1/2021
English
English [Auto], Indonesian [Auto], 
30-Day Money-Back Guarantee

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
Curated for the Udemy for Business collection

Course content

12 sections • 239 lectures • 20h 57m total length

  • Preview01:46
  • Github Links - Get Source Code Here!
    00:03

  • npx Create React App Generation
    00:21
  • 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
  • Update for Handling Absolute Imports
    00:22
  • 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
  • Getting an Empty ReactWrapper in your console.log?
    00:10
  • 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

  • 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

  • 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

  • Preview04: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 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

  • Note
    00:08
  • Preview03:29
  • A First Spec
    12:42
  • Preview09: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
  • App Review
    03:07

  • Purpose of Chai and Mocha
    05:19
  • 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

Requirements

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

Description

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.


Who this course is for:

  • Programmers with experience on React and Redux
  • NOT for programmers with no previous React/Redux experience!

Featured review

Jeffrey L. Greene
Jeffrey L. Greene
48 courses
9 reviews
Rating: 5.0 out of 5a year ago
Course content so far is both comprehensive and thorough. The instructor takes the time to explain his inner thoughts while setting up the development environment and writing code. Additionally, the instructor uses object diagrams to define and show execution flow. I have found the use of such diagrams helpful to stay focused on what needs to be implemented in both writing test cases and the functions/classes themselves.

Instructor

Stephen Grider
Engineering Architect
Stephen Grider
  • 4.7 Instructor Rating
  • 278,454 Reviews
  • 732,868 Students
  • 29 Courses

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area.  With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers.  Invest in yourself by learning from Stephen's published courses.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.