Modern React with Redux [2024 Update]

Master React and Redux. Apply modern design patterns to build apps with React Router, TailwindCSS, Context, and Hooks!

4.72 (86248 reviews)

Udemy

platform

English

language

Web Development

What you will learn

Create dynamic web apps using the latest in web technology

Acquire the programming skills needed to obtain a software engineering job

Practice your skills with many large projects, exercises, and quizzes

Implement client-side navigation and routing using React Router for seamless multi-page user experiences

Leverage the power of TypeScript with React for safer coding practices and reducing runtime errors

Master form handling techniques, including robust validation patterns to improve user input experience

Get a deep dive into state management with Redux and the Redux Toolkit to manage complex app states effortlessly

Gain proficiency in handling API requests and managing data flow in your applications

Enhance application performance with immutable state management using Immer

Develop dynamic and responsive data tables to display, sort, and filter large datasets efficiently

Streamline your development process by integrating TailwindCSS for rapid UI development

Why take this course?

This course gets updated frequently! Here are the latest changes

February 21st, 2024: Added 2.5 hours of video showing routing and data loading with React Router
February 12th, 2024: Added 1 hour of video to demonstrate integrating Typescript with React
February 5th, 2024: Added 2.25 hours of video and 5 quizzes covering the basics of Typescript

Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning React and Redux!

Thousands of other engineers have learned React and Redux, and you can too. This course uses a time-tested, battle-proven method to make sure you understand exactly how React and Redux work, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.

The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.

React is the most popular Javascript library, and the job market is still hotter than ever. Companies large and small can't hire engineers who understand React and Redux fast enough, and salaries for engineers are at an all-time high. It's a great time to learn React!

___________________

What will you build?

This course features hundreds of videos with hundreds of custom diagrams to help you understand how React and Redux work. No prior experience with either is necessary. Through tireless, patient explanations and many interesting practical examples, you'll learn the fundamentals of building dynamic and live web apps using React.

Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge. You'll find plenty of discussion added in to help you understand exactly when and where to use each feature of React and Redux.

Adding to your experience, the course shows modern techniques and tools, equipping you with the latest skills needed for the dynamic web development landscape. You’ll get hands-on experience with cutting-edge features like Context API for state management, TailwindCSS for styling, React Router for navigation, and Typescript to add type safety to your React apps. This holistic approach ensures not only do you learn React and Redux but also the surrounding ecosystem that makes modern web development efficient and enjoyable.

Practical projects are at the heart of this learning experience. By integrating APIs, managing app state with Redux, and using React Hooks for component lifecycle management, you’ll have the opportunity to build applications that are both complex and high-performing. These projects are designed to simulate real-world web development scenarios, preparing you for the challenges that professional developers face daily.

My guarantee to you: there is no other course online that teaches more features of React and Redux Toolkit. This is the most comprehensive resource there is.

Below is a partial list of the topics you'll find in this course:

Master the fundamental features of React, including JSX, state, and props
From square one, understand how to build reusable components
Dive into the source code of Redux to understand how it works behind the scenes
Test your knowledge and hone your skills with numerous coding exercises
Use popular styling libraries to build beautiful apps
See different methods of building UI's through composition of components
Integrate Redux Toolkit for efficient state management
Leverage React Hooks for more intuitive component logic
Manage app-wide state with the Context API for simpler global state
Style components with TailwindCSS for rapid UI development
Utilize TypeScript with React for safer and more predictable code
Implement navigation within your app with React Router
Utilize Redux with forms for consistent state updates and user experience
Learn to use portals for rendering components outside the DOM hierarchy
Develop and interact with APIs for data-driven applications
Master the implementation of data tables to handle and display large sets of data
Get to grips with Immer for writing reducers with ease

Besides just React and Redux, you'll pick up countless other tidbits of knowledge, including design techniques, popular design patterns, and repeatable steps to build new components.

This is the course I wanted to take when I first learned React: complete, up-to-date, and clear.

Content

Let's Dive In!

How to Get Help

Important Codepen Info

Our First App

CodePen Solution and Blank White Screen Help

Critical Questions!

Installing Node JS

Important Update About React App Generation

Generating a React Project

Why Create React App?

Exploring a Create-React-App Project

Starting and Stopping a React App

Javascript Module Systems

Displaying Content with Functional Components

Link to Completed Github Repo

Common Questions About My Environment

Building Content with JSX

What is JSX?

Converting HTML to JSX

Inline Styling with JSX

Converting Styling to JSX Format

Class vs ClassName

Referencing JS Variables in JSX

Values JSX Can't Show

Finding Forbidden Property Names

Exercise Introduction

Test Your Knowledge: JSX Interpolation

JSX Exercise Solution

Communicating with Props

Three Tenets of Components

Application Overview

Getting Some Free Styling

Naive Component Approach

Specifying Images in JSX

Duplicating a Single Component

Extracting JSX to New Components

Component Nesting

React's Props System

Passing and Receiving Props

Passing Multiple Props

Passing Props - Solutions

Component Reuse

Implementing an Approval Card

Showing Custom Children

Component Reuse

Exercise - Props

Test Your Knowledge: Props

Props Exercise Solution

Exercise - Children

Test Your Knowledge: Children Through Props

Children Exercise Solution

Structuring Apps with Class-Based Components

Class-Based Components

Application Overview

Scaffolding the App

Getting a Users Physical Location

Resetting Geolocation Preferences

Handling Async Operations with Functional Components

Refactoring from Functional to Class Components

State in React Components

The Rules of State

Initializing State Through Constructors

Updating State Properties

App Lifecycle Walkthrough

Handling Errors Gracefully

Conditionally Rendering Content

Understanding Lifecycle Methods

Introducing Lifecycle Methods

Why Lifecycle Methods?

Refactoring Data Loading to Lifecycle Methods

Alternate State Initialization

Passing State as Props

Determining Season

Ternary Expressions in JSX

Showing Icons

Extracting Options to Config Objects

Adding Some Styling

Showing a Loading Spinner

Specifying Default Props

Avoiding Conditionals in Render

Breather and Review

Class-Based Components

Exercise Solution - Class-Based Components

Updating Components with State

Handling User Input with Forms and Events

App Overview

Component Design

Adding Some Project Structure

Showing Forms to the User

Adding a Touch of Style

Creating Event Handlers

Alternate Event Handler Syntax

Uncontrolled vs Controlled Elements

Making API Requests with React

Fetching Data

Axios vs Fetch

Viewing Request Results

Handling Requests with Async Await

Setting State After Async Requests

Binding Callbacks

Creating Custom Clients

Building Lists of Records

Rendering Lists

Review of Map Statements

Rendering Lists of Components

The Purpose of Keys in Lists

Implementing Keys in Lists

Using Ref's for DOM Access

Grid CSS

Issues with Grid CSS

Creating an Image Card Component

Accessing the DOM with Refs

Accessing Image Height

Callbacks on Image Load

Dynamic Spans

App Review

Let's Test Your React Mastery!

App Overview

Component Design

Scaffolding the App

Reminder on Event Handlers

Handling Form Submittal

Accessing the Youtube API

Axios Version Bug & 400 "Required Parameter: part" Error

Searching for Videos

Adding a Video Type

Putting it All Together

Updating State with Fetched Data

Passing State as Props

Rendering a List of Videos

Rendering Video Thumbnails

Styling a List

Communicating from Child to Parent

Deeply Nested Callbacks

Conditional Rendering

Styling the VideoDetail

Displaying a Video Player

Fixing a Few Warnings

Defaulting Video Selection

On We Go...To Redux!

Introduction to Redux

Redux by Analogy

A Bit More Analogy

Finishing the Analogy

Mapping the Analogy to Redux

Modeling with Redux

Creating Reducers

Rules of Reducers

Testing Our Example

Important Redux Notes

Integrating React with Redux

React Cooperating with Redux

React, Redux, and...React-Redux!?

Design of the Redux App

How React-Redux Works

Redux Project Structure

Named vs Default Exports

Building Reducers

Wiring Up the Provider

The Connect Function

Configuring Connect with MapStateToProps

Building a List with Redux Data

Calling Action Creators from Components

Redux is Not Magic!

Functional Components with Connect

Conditional Rendering

Connecting Components to Redux

Exercise Solution - Connecting Components to Redux

Async Actions with Redux Thunk

App Overview and Goals

Initial App Setup

Tricking Redux with Dummy Reducers

A Touch More Setup

How to Fetch Data in a Redux App

Wiring Up an Action Creator

Making a Request From an Action Creator

Understanding Async Action Creators

Redux Store Design

Rules of Reducers

Return Values from Reducers

Argument Values

Pure Reducers

Mutations in Javascript

Equality of Arrays and Objects

A Misleading Rule

Safe State Updates in Reducers

Switch Statements in Reducers

Dispatching Correct Values

List Building!

Displaying Users

Fetching Singular Records

Displaying the User Header

Finding Relevant Users

Extracting Logic to MapStateToProps

That's the Issue!

Memoizing Functions

Memoization Issues

One Time Memoization

Alternate Overfetching Solution

Action Creators in Action Creators!

Finding Unique User Ids

Quick Refactor with Chain

App Wrapup

Navigation with React Router

App Outline

Mockups in Detail

App Challenges

Initial Setup

Introducing React Router

How React Router Works

How Paths Get Matched

How to *Not* Navigate with React Router

Navigating with React Router

[Optional] - Different Router Types

Component Scaffolding

Wiring Up Routes

Always Visible Components

Connecting the Header

Links Inside Routers

Handling Authentication with React

OAuth-Based Authentication

OAuth for Servers vs Browser Apps

Creating OAuth Credentials

Wiring Up the Google API Library

Sending a User Into the OAuth Flow

Rendering Authentication Status

Updating Auth State

Displaying Sign In and Sign Out Buttons

On-Demand Sign In and Sign Out

Redux Architecture Design

Redux Setup

Connecting Auth with Action Creators

Building the Auth Reducer

Handling Auth Status Through Redux

Fixed Action Types

Recording the User's ID

Redux Dev Tools

Using Redux Dev Tools to Inspect the Store

Debug Sessions with Redux Dev Tools

Handling Forms with Redux Form

Forms with Redux Form

Useful Redux Form Examples

Connecting Redux Form

Creating Forms

Automatically Handling Events

Customizing Form Fields

Handling Form Submission

Validation of Form Inputs

Displaying Validation Messages

Showing Errors on Touch

Highlighting Errored Fields

REST-Based React Apps

Creating Streams

REST-ful Conventions

Setting Up an API Server

Creating Streams Through Action Creators

Creating a Stream with REST Conventions

Dispatching Actions After Stream Creation

Bulk Action Creators

Object-Based Reducers

Key Interpolation Syntax

Handling Fetching, Creating, and Updating

Deleting Properties with Omit

Merging Lists of Records

Fetching a List of All Streams

Rendering All Streams

Associating Streams with Users

Conditionally Showing Edit and Delete

Linking to Stream Creation

When to Navigate Users

History References

History Object Deprecation Warning

Creating a Browser History Object

Implementing Programmatic Navigation

Manually Changing API Records

URL-Based Selection

Wildcard Navigation

Using React Portals

Why Use Portals?

Implementing Streaming Video

Viewing a Stream

Switches with React-Router

Showing a Stream

RTMP NodeMediaServer is not a constructor error fix

RTMP Server Setup

OBS Installation

OBS Scene Setup

Video Player Setup

Implementing FLV JS

Creating a FLV Player

Optional Player Building

It Works!

Cleaning Up with ComponentWillUnmount

The Context System with React

The Context System

An App with Context

App Generation

Selecting a Language

A Touch More Setup

Getting Data Out of Context

Creating Context Objects

Consuming the Context Value

The Context Provider

Gotchas Around Providers

Accessing Data with Consumers

Pulling From Multiple Contexts

Replacing Redux with Context

Replacing Redux with Context?

Creating a Store Component

Implementing a Language Store

Rendering the Language Store

Connecting the Selector to the Store

Connecting the Field and Button to the Store

Context vs Redux Recap

Hooks with Functional Components

Introducing Hooks

App Overview

Building Stateful Class Components

The UseState Hook

UseState in Detail

Building the ResourceList

Fetching a Given Resource

ComponentDidUpdate vs ComponentDIdMount

Refactoring a Class to a Function

Lifecycles with UseEffect

Updates with UseEffect

Does It Get Called?

Quick Gotcha with UseEffect

Rendering a List

Actual Code Reuse!

Code Reuse with Hooks

More Fun with Hooks

Weather Hooks

Project Zip

App Overview

Refactoring a Class to a Function

Extracting Reusable Logic

That's All For Now

[Legacy] An Intro to React

Introduction - Github Links for Project Files!

Completed Projects - Github Links

The Purpose of Boilerplate Projects

Environment Setup

Project Setup

Support for Create React App

A Taste of JSX

[Legacy] Ajax Requests with React

Youtube Search Response

Refactoring Functional Components to Class Components

Props

Building Lists with Map

List Item Keys

Video List Items

Detail Component and Template Strings

Handling Null Props

Video Selection

Styling with CSS

Searching for Videos

Throttling Search Term Input

React Wrapup

[Legacy] Modeling Application State

Foreword on Redux

What is Redux?

[Legacy] Managing App State with Redux

Putting Redux to Practice

Reducers

Containers - Connecting Redux to React

Containers Continued

Implementation of a Container Class

Containers and Reducers Review

Actions and Action Creators

Binding Action Creators

Creating an Action

Consuming Actions in Reducers

Consuming Actions in Reducers Continued

Conditional Rendering

Reducers and Actions Review

[Legacy] Intermediate Redux: Middleware

App Overview and Planning

Component Setup

Controlled Components and Binding Context

Form Elements in React

Working with API's

Introduction to Middleware

Ajax Requests with Axios

Redux-Promise in Practice

Redux-Promise Continued

Avoiding State Mutations in Reducers

Building a List Container

Mapping Props to a Render Helper

Adding Sparkline Charts

Making a Reusable Chart Component

Labeling of Units

Google not Defined Errors

Google Maps Integration

Google Maps Integration Continued

Project Review

[Legacy] React Router + Redux Form v6

App Overview and Goals

Posts API

Quick Note

Installing React Router

What React Router Does

The Basics of React Router

Route Design

Our First Route Definition

State as an Object

Back to Redux - Index Action

Implementing Posts Reducer

Action Creator Shortcuts

Rendering a List of Posts

Creating New Posts

A React Router Gotcha

Navigation with the Link Component

Redux Form

Setting Up Redux Form

The Field Component

Generalizing Fields

Validating Forms

Showing Errors to Users

Handling Form Submittal

Form and Field States

Conditional Styling

[Legacy - Do Not Take] Bonus - RallyCoding

Basics of Redux Thunk

Combining Redux and Firebase

Dynamic Forms with Redux Form

Logicless Components with Reselect

Data Loading Methods with Redux

Animation of React Components

The Best Way to Store Redux Data

Four Most Common Errors with React and Redux

Modals in React and Redux Apps

Deployment of React/Webpack Apps

BrowserHistory in Production

React Integration with 3rd Party Libraries

Introducing JSPlaygrounds for Rapid Prototyping

[Legacy - Do Not Take] React Router + Redux Form v4

Important Note - Do Not Skip!

App Overview and Goals

Exploring the Posts Api

Installing React Router

React Router - What is It?

Setting Up React Router

Route Configuration

Nesting Of Routes

IndexRoutes with React Router

Back To Redux - Index Action

Catching Data with Posts Reducer

Catching Data with Posts Reducer Continued

Fetching Data with Lifecycle Methods

Fetching Data with Lifecycle Methods Continued

Creating New Posts

Navigation with the Link Component

Forms and Form Submission

Extras

Bonus!

Screenshots

Modern React with Redux [2024 Update] - Screenshot_01

Modern React with Redux [2024 Update] - Screenshot_02

Modern React with Redux [2024 Update] - Screenshot_03

Modern React with Redux [2024 Update] - Screenshot_04

Reviews

Raphael

November 1, 2023

I enrolled in this course after dabbling in React and finding it perplexing. Despite the common perception that React simplifies complex website development, I was skeptical. However, Stephen Grider expertly demystifies React's intricacies in this course. He breaks down concepts from the ground up and ensures comprehensive understanding. This course is a must for anyone disillusioned by the overhyped simplicity of React. Highly recommended!

Nate

October 31, 2023

"Non-negotiable" if you are planning on learning react. VERY descriptive which was my goal! Take this into one of the other courses that has a final project. Very grateful i found this course. Good job!

Senibo

October 31, 2023

It has been a good match, a little confusing tho, but i guess its a good starting point into the world of react

Harika

October 30, 2023

Well prepared content and topics were taught in depth which is the best part of the course. Happy with my learning! Thank you so much.

Mohd

October 29, 2023

Too slow, like I was wishing for a 4x playback speed at some places. also many things now are outdated like using Create React App, which is officially advised against. Another thing is the tutor squandered too much on fundamentals rather than going hands on, with real-world projects.

Amine

October 27, 2023

I am still a beginner with React but the pace was not to fast and the explanations are very clear . The diagrams to explains the differents concepts are very helpful . I really enjoyed this course, I learned a lot of concepts. The most difficult part for me was to use RTK Query. What I can suggest is to show us how to use the documentation. But overall, it was an amazing course.

Jason

October 27, 2023

Mic audio very low, I have to increase my overall volume. There are some places where the audio is clipped. Many of the videos before this have audio that seems to start 2-3 words into the first sentence. Thankfully I know the fundamentals of frameworks, so I can extrapolate but these things are kind of annoying.

Ryan

October 27, 2023

so far it is great. the instructor is clear, he breaks down the content nicely, i am following along easily.

Bill

October 26, 2023

Absolutely fantastic course! The instructor's delivery is top-notch, the training material is well prepared, and the presentation is outstanding! Exceptional course and I highly recommend it!

Umberto

October 23, 2023

Alcune cose le ripete troppe volte, buona la prima. Parla molto velocemente e non sempre capisco al primo colpo.

Xavier

October 23, 2023

It's starting out good for a beginner, we'll see how the rest of it goes. He does explain a lot too. Looking forward to it.

Renan

October 20, 2023

He knows how to teach. I was struggling to learn some concepts and he teaches in a manner that I could finally understand. The course has theory and exercises perfectly balanced, and it starts with basics concepts progressing to the advanced ones. This is greatest course that I made on my life.

Hutch

October 8, 2023

This is a fantastic course. Stephen clearly and simply explains everything you need to know to get started building UIs in React. I highly recommend taking this course if you know some Javascript and need to start using React.

Edgars

September 11, 2023

Excellent!!! So far it is one of the couple best courses on React, that explains a lot. Much kudos to Stephen!!! 10/10

Lnd

September 6, 2023

I've been learning many new things in a clear & thorough way. The lessons are very detailed and I like how they purposely pose new challenges or problems and cover their solutions neatly one by one. The instructor often helped me deeply understand the core of a problem or issue despite how small it might be.

Coupons

Submit by	Date	Coupon Code	Discount	Status
-	11/21/2019	F4D2A7161E3748C4F4FF	93% OFF	expired
-	1/2/2021	136016F722468D1C18BA	91% OFF	expired
-	1/15/2021	2DBEC5E02682F2A9B300	93% OFF	expired
-	3/31/2022	EB02CAF3E44-DISCORD	91% OFF	expired

Charts

Price

Rating

Enrollment distribution

Modern React with Redux [2024 Update] - Distribution chart

Modern React with Redux [2024 Update]

What you will learn

Create dynamic web apps using the latest in web technology

Acquire the programming skills needed to obtain a software engineering job

Practice your skills with many large projects, exercises, and quizzes

Implement client-side navigation and routing using React Router for seamless multi-page user experiences

Leverage the power of TypeScript with React for safer coding practices and reducing runtime errors

Master form handling techniques, including robust validation patterns to improve user input experience

Get a deep dive into state management with Redux and the Redux Toolkit to manage complex app states effortlessly

Gain proficiency in handling API requests and managing data flow in your applications

Enhance application performance with immutable state management using Immer

Develop dynamic and responsive data tables to display, sort, and filter large datasets efficiently

Streamline your development process by integrating TailwindCSS for rapid UI development

Why take this course?

Content

Let's Dive In!

Building Content with JSX

Communicating with Props

Structuring Apps with Class-Based Components

State in React Components

Understanding Lifecycle Methods

Handling User Input with Forms and Events

Making API Requests with React

Building Lists of Records

Using Ref's for DOM Access

Let's Test Your React Mastery!

On We Go...To Redux!

Integrating React with Redux

Async Actions with Redux Thunk

Redux Store Design

Navigation with React Router

Handling Authentication with React

Redux Dev Tools

Handling Forms with Redux Form

REST-Based React Apps

Using React Portals

Implementing Streaming Video

The Context System with React

Replacing Redux with Context

Hooks with Functional Components

More Fun with Hooks

[Legacy] An Intro to React

[Legacy] Ajax Requests with React

[Legacy] Modeling Application State

[Legacy] Managing App State with Redux

[Legacy] Intermediate Redux: Middleware

[Legacy] React Router + Redux Form v6

[Legacy - Do Not Take] Bonus - RallyCoding

[Legacy - Do Not Take] React Router + Redux Form v4

Extras

Screenshots

Reviews

Coupons

Charts

Price

Rating

Enrollment distribution

Related Topics