Modern React with Redux [2024 Update]
All LevelsDevelopmentReact JS

Modern React with Redux [2024 Update]

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

Created by Stephen Grider
75.5 hours
Video Content
694
Lectures
326,860
Students
4.6
Rating
4.6
(326,860 students enrolled)

What you'll 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

Course Content

27 sections • 694 lectures • 75:33:42 total length

Let's Dive In!

9 lectures • 27:23

How to Get Help01:01
Join Our Community!00:07
Course Resources00:52
Let's Build an App!07:56
Critical Questions05:49
+5 more lectures

Creating Content with JSX

14 lectures • 01:03:41

Showing Basic Content06:41
What is JSX?05:48
Printing JavaScript Variables in JSX04:29
Shorthand JS Expressions01:51
Showing Javascript Values in JSX3 questions
+14 more lectures

Building with Reusable Components

17 lectures • 01:20:33

Starter Project Files00:20
Project Overview05:02
Creating Core Components05:00
Introducing the Props System04:51
Picturing the Movement of Data06:06
+14 more lectures

State: How to Change Your App

20 lectures • 01:50:01

Starter Project Files00:20
App Overview02:25
Initial App Setup05:09
Introducing the Event System03:14
Events in Detail08:11
+18 more lectures

Using an API with React

26 lectures • 02:39:32

Starter Project Files00:21
App Overview01:41
Project Setup05:53
The Path Forward04:06
Overview of HTTP Requests11:15
+23 more lectures

How to Handle Forms

33 lectures • 02:23:11

Starter Project Files00:21
App Overview02:55
Initial Setup05:56
State Location05:14
Reminder on Event Handlers04:51
+32 more lectures

Data Persistence with API Requests

16 lectures • 01:14:37

Adding Data Persistence07:48
JSON Server Issues and Required Version00:11
Server Setup03:44
What Just Happened?04:36
How the API Works05:20
+12 more lectures

Communication Using the Context System

12 lectures • 01:18:23

Introducing Context09:12
Context in Action06:15
Changing Context Values06:51
More on Changing Context08:46
Application vs Component State11:50
+7 more lectures

Deeper Dive into Hooks!

9 lectures • 59:25

Return to useEffect08:06
Quick Note00:16
Understanding the Issue07:17
Applying the Fix06:23
ESLint is Good, but be Careful!10:57
+5 more lectures

Custom Navigation and Routing Systems

22 lectures • 02:02:09

Starter Project Files00:43
Project Overview03:50
Project Setup01:54
Some Button Theory08:19
Underlying Elements03:48
+17 more lectures

Mastering the State Design Process

19 lectures • 01:59:34

Project Organization10:43
Refactoring with Organization05:56
Component Overview04:48
Component Setup03:42
Reminder on Building Lists04:04
+16 more lectures

Practicing Props and State Design

24 lectures • 02:16:38

Component Overview01:08
Designing the Props05:49
Component Creation04:14
[Optional] More State Design20:11
Finally... Implementation!06:45
+20 more lectures

Making Navigation Reusable

18 lectures • 01:29:32

Traditional Browser Navigation09:33
Theory of Navigation in React07:56
Extracting the DropdownPage02:43
Answering Critical Questions05:33
The PushState Function02:56
+13 more lectures

Creating Portals with ReactDOM

10 lectures • 46:20

Modal Component Overview04:20
Toggling Visibility05:49
At First Glance, Easy!03:05
We're Lucky it Works At All!09:26
Fixing the Modal with Portals07:09
+5 more lectures

Make a Feature-Full Data Table!

13 lectures • 49:59

Creating a Reusable table03:34
Communicating Data to the Table03:03
Reminder on Table HTML Structure04:25
Building the Rows02:52
Better Styling03:38
+8 more lectures

Getting Clever with Data Sorting

20 lectures • 01:51:45

Adding Sorting to the Table06:38
Reminder on Sorting in JavaScript06:24
Sorting Strings02:45
Sorting Objects03:56
Object Sort Implementation07:38
+15 more lectures

Custom Hooks In Depth

7 lectures • 35:58

Exploring Code Reuse03:39
Revisiting Custom Hooks03:10
Creating the Demo Component04:46
Custom Hook Creation03:16
Quick Note00:16
+2 more lectures

Into the World of Reducers

12 lectures • 01:21:01

App Overview03:03
Adding the Form04:26
More on the Form06:58
useReducer in Action09:47
Rules of Reducer Functions09:22
+8 more lectures

Dive Into Redux Toolkit

25 lectures • 02:28:43

Into the World of Redux05:23
Redux vs Redux Toolkit09:17
App Overview03:03
The Path Forward03:31
Implementation Time!04:41
+20 more lectures

Managing Multiple Slices with Redux Toolkit

25 lectures • 01:46:38

Starter Project Files00:20
Project Overview03:40
Adding Component Boilerplate06:08
Thinking About Derived State07:54
Thinking About Redux Design05:17
+20 more lectures

Interfacing with API's Using Async Thunks

39 lectures • 03:32:37

Starter Project Files00:31
App Overview08:08
API Server Setup02:51
Component Files00:06
Adding a Few Components03:13
+34 more lectures

Modern Async with Redux Toolkit Query

29 lectures • 03:01:55

Skipping to this Section?00:30
[Optional] Getting Caught Up02:47
Introducing Redux Toolkit Query08:00
Creating a RTK Query API06:20
Creating an Endpoint14:01
+24 more lectures

Diving Into TypeScript

29 lectures • 02:13:47

Why Use Typescript?05:44
Basic Types and Type Annotations04:49
Function Type Annotations01:57
Type Inference03:16
Quiz - Type Annotations and Type Inference2 questions
+29 more lectures

Build a Google Maps Clone with Typescript

15 lectures • 01:05:35

Project Overview02:32
Guidance for Installing and Configuring Tailwind v400:39
Project Setup03:04
Component Creation02:37
App Architecture04:24
+10 more lectures

Navigation and Data Fetching with React Router

31 lectures • 02:33:02

App Overview03:16
Guidance for Installing and Configuring Tailwind v400:39
Project Setup01:52
Introducing React Router05:44
React Router Setup10:10
+26 more lectures

Legacy Version of Modern React with Redux Course

199 lectures • 32:21:02

Note About This Legacy Course00:19
What is JSX? / Converting HTML10:50
Inline Styling / Converting Styling06:22
Class vs. ClassName / Referencing JS Variables05:13
Important Note About Viewing Errors00:43
+194 more lectures

Bonus!

1 lectures • 00:33

Bonus!00:33

Description

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.

Who this course is for:

  • Programmers looking to learn React
  • Engineers who have researched React but have had trouble mastering some concepts

This course includes:

  • 75.5 hours on-demand video
  • 52 articles
  • 262 downloadable resources
  • Access on mobile and TV
  • Full lifetime access
  • Certificate of completion

Instructor

Stephen Grider

Students also download

Explore related courses to expand your learning journey.