The Ultimate React Course 2024: React, Redux & More

67h 14m 41s
English
Paid

Course description

In 2023, React is still the #1 skill to learn if you want to become a successful front-end developer!

But it can be hard. There are so many moving parts, so many different libraries, so many tutorials out there.

That's why you came here... And you came to the right place! This is THE ultimate React course for 2023 and beyond.

A practice-heavy approach to master React by building polished apps, backed up by diagrams, theory, and looks under the hood of React.

The all-in-one package that takes you from zero to truly understanding React and building modern, powerful, and professional web applications.

Real projects. Real explanations. Real React.

[01] Why is this the right React course for you?

This is the most in-depth React course on Udemy, and it's fundamentally different from all the other ones.

Here's why:

  • Contains the biggest and most professional project, where we implement many common app features (see promo video!)

  • Super detailed explanations of all important concepts with carefully crafted and animated diagrams

  • A huge focus on "how to think in React" and modern best practices

  • A long section that explores how React actually works behind the scenes will give you the confidence to use React effectively on your own

  • Advanced design patterns like compound components will make you think like a senior React engineer

And these are just the highlights! Check out the full list below (+ the promo video and curriculum).

Also, make no mistake: "React course" actually means "Front-end development with React and modern libraries course".

That's right, besides the React library itself, you will learn and master them all: React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, and more.

This is how we plan, build, and deploy professional projects! We even use industry-standard tools such as Supabase (fully-fledged back-end), GitHub, Netlify, and Vercel.

As you expect, this course is 100% project-based. So throughout the course, you'll start building your portfolio of 8+ beautiful and high-quality React apps, where each one will showcase a few of the new skills you will be learning.

By the end of the course, you will have all the knowledge and confidence that you need to ace your job interviews and become the professional React developer that companies are looking for.

Read more about the course

[02] Why am I the right React teacher for you?

My name is Jonas, I'm an experienced web developer and designer, and one of Udemy's top instructors. I've been teaching web development courses since 2015 to over 1,500,000 developers, so I know exactly how students learn and what is needed to master any subject.

With this in mind, I designed the ideal curriculum for this course: a unique blend of real-world projects, deep explanations, and theory lectures, to turn you into a confident React developer in just a couple of weeks.

Ready to become a confident and independent React developer, highly capable of building your own apps? Then don't wait any longer, and start your React journey today!

[03] Still not sure? Here are all the nerdy details of what we'll cover:

  • React fundamentals [why we even need React, components, JSX, props, events, forms, state, props vs. state]

  • How to think about state [where to place state, guidelines, lifting state up, local vs. global state, UI vs. remote state]

  • How to think about components [how to split components, props as API, how to build reusable and composable components, the children prop]

  • Deep dive into effects and useEffect [data fetching, lifecycle vs. synchronization, when to use effects, effects vs. event handlers]

  • Deep dive into hooks [rules of hooks, how hooks work, useRef, building super-reusable custom hooks]

  • Performance optimization [wasted renders, memoization with memo, useMemo, and useCallback, optimizing Context API, code splitting + Suspense]

  • Advanced state management [useReducer hook, the Context API, Redux, Redux Toolkit, Thunks, React Query]

  • Building Single-Page Applications (SPA) [Vite, routing with React Router, URL parameters and query strings for state management, data loaders and actions (v6.4+)]

  • Building real-world features found in many apps [authentication and authorization, data sorting, filtering and pagination, dark mode, dashboard with charts, etc.]

  • Creating your own back-end with a DB and API using Supabase [gain the power to build full-stack apps on your own!]

  • How to style React apps [Tailwind CSS, CSS Modules, and Styled Components (CSS-in-JS)]

  • Advanced React patterns used by senior developers [render props, higher-order components, compound components (to build a modal, a context menu, and more)]

  • How React works behind the scenes [rendering, virtual DOM, reconciliation, fiber tree, key prop, events, state batching, etc.]

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 405 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online The Ultimate React Course 2024: React, Redux & More

0:00
/
#1: Course Roadmap and Projects

All Course Lessons (405)

#Lesson TitleDurationAccess
1
Course Roadmap and Projects Demo
02:58
2
Building Our First React App!
18:54
3
Watch Before You Start!
05:25
4
Downloading Course Material
03:35
5
Introduction to Part 1
00:56
6
Section Overview
00:40
7
Why Do Front-End Frameworks Exist?
10:28
8
React vs. Vanilla JavaScript
07:09
9
What is React?
09:18
10
Setting Up Our Development Environment
08:48
11
Pure React
14:50
12
A Quick Look at React's Official Documentation
03:17
13
Setting Up a New React Project: The Options
07:42
14
Setting Up a Project With Create-React-App
12:49
15
Section Overview
00:57
16
Destructuring Objects and Arrays
10:59
17
Rest/Spread Operator
09:54
18
Template Literals
04:51
19
Ternaries Instead of if/else Statements
05:50
20
Arrow Functions
05:00
21
Short-Circuiting And Logical Operators: &&, ||, ??
10:33
22
Optional Chaining
06:31
23
The Array map Method
08:36
24
The Array filter Method
08:37
25
The Array reduce Method
07:22
26
The Array sort Method
06:39
27
Working With Immutable Arrays
11:07
28
Asynchronous JavaScript: Promises
08:12
29
Asynchronous JavaScript: Async/Await
07:31
30
Section Overview
00:55
31
Rendering the Root Component and Strict Mode
07:26
32
Before We Start Coding: Debugging
09:47
33
Components as Building Blocks
04:35
34
Creating And Reusing a Component
09:41
35
What is JSX?
06:26
36
Creating More Components
08:08
37
JavaScript Logic in Components
04:27
38
Separation of Concerns
05:58
39
Styling React Applications
12:18
40
Passing and Receiving Props
09:09
41
Props, Immutability, and One-Way Data Flow
07:10
42
CHALLENGE #1: Profile Card (v1)
17:26
43
The Rules of JSX
03:38
44
Rendering Lists
11:25
45
Conditional Rendering With &&
09:17
46
Conditional Rendering With Ternaries
04:46
47
Conditional Rendering With Multiple Returns
05:04
48
Extracting JSX Into a New Component
04:33
49
Destructuring Props
04:53
50
React Fragments
05:37
51
Setting Classes and Text Conditionally
08:01
52
Section Summary
05:34
53
CHALLENGE #2: Profile Card (v2)
08:16
54
Section Overview
01:03
55
Let's Build a Steps Component
14:49
56
Handling Events the React Way
07:22
57
What is State in React?
06:09
58
Creating a State Variable With useState
09:08
59
Don't Set State Manually!
05:18
60
The Mechanics of State
04:52
61
Adding Another Piece of State
08:37
62
React Developer Tools
06:10
63
Updating State Based on Current State
05:17
64
More Thoughts About State + State Guidelines
06:34
65
A Vanilla JavaScript Implementation
06:35
66
CHALLENGE #1: Date Counter (v1)
13:10
67
Starting a New Project: The "Far Away" Travel List
04:09
68
Building the Layout
08:55
69
Rendering the Items List
08:43
70
Building a Form and Handling Submissions
11:56
71
Controlled Elements
18:27
72
State vs. Props
03:31
73
EXERCISE #1: Flashcards
13:57
74
CHALLENGE #2: Date Counter (v2)
10:32
75
Section Overview
00:59
76
What is "Thinking in React"?
05:00
77
Fundamentals of State Management
09:25
78
Thinking About State and Lifting State Up
14:42
79
Reviewing "Lifting Up State"
06:26
80
Deleting an Item: More Child-to-Parent Communication!
08:15
81
Updating an Item: Complex Immutable Data Operation
07:44
82
Derived State
03:04
83
Calculating Statistics as Derived State
10:44
84
Sorting Items
10:49
85
Clearing the List
05:04
86
Moving Components Into Separate Files
08:54
87
EXERCISE #1: Accordion Component (v1)
14:16
88
The "children" Prop: Making a Reusable Button
16:11
89
More Reusability With the "children" Prop
08:14
90
EXERCISE #2: Accordion Component (v2)
10:16
91
CHALLENGE #1: Tip Calculator
22:10
92
Section Overview
00:56
93
Project Setup
03:53
94
Building the Static App: List of Friends
12:03
95
Building the Static App: Forms
09:28
96
Displaying the New Friend Form
06:35
97
Adding a New Friend
18:39
98
Selecting a Friend
15:03
99
Creating Controlled Elements
09:54
100
Splitting a Bill
12:49
101
Introduction to Part 2
01:16
102
Section Overview
01:01
103
Setting Up the "usePopcorn" Project
04:11
104
How to Split a UI Into Components
12:36
105
Splitting Components in Practice
23:59
106
Component Categories
02:43
107
Prop Drilling
07:32
108
Component Composition
04:52
109
Fixing Prop Drilling With Composition (And Building a Layout)
08:50
110
Using Composition to Make a Reusable Box
06:31
111
Passing Elements as Props (Alternative to children)
04:45
112
Building a Reusable Star Rating Component
11:23
113
Creating the Stars
13:05
114
Handling Hover Events
07:44
115
Props as a Component API
04:29
116
Improving Reusability With Props
19:28
117
PropTypes
07:25
118
CHALLENGE #1: Text Expander Component
18:21
119
Section Overview
01:56
120
Project Setup and Walkthrough
11:12
121
Components, Instances, and Elements
05:10
122
Instances and Elements in Practice
07:54
123
How Rendering Works: Overview
06:56
124
How Rendering Works: The Render Phase
18:29
125
How Rendering Works: The Commit Phase
11:28
126
How Diffing Works
05:53
127
Diffing Rules in Practice
05:14
128
The Key Prop
07:42
129
Resetting State With the Key Prop
04:03
130
Using the Key Prop to Fix Our Eat-'N-Split App
04:08
131
Rules for Render Logic: Pure Components
09:25
132
State Update Batching
09:12
133
State Update Batching in Practice
15:44
134
How Events Work in React
13:43
135
Libraries vs. Frameworks & The React Ecosystem
09:53
136
Section Summary: Practical Takeaways
10:28
137
Section Overview
00:59
138
The Component Lifecycle
04:32
139
How NOT to Fetch Data in React
09:49
140
useEffect to the Rescue
04:41
141
A First Look at Effects
06:24
142
Using an async Function
05:41
143
Adding a Loading State
03:48
144
Handling Errors
13:03
145
The useEffect Dependency Array
12:18
146
Synchronizing Queries With Movie Data
15:09
147
Selecting a Movie
13:20
148
Loading Movie Details
17:44
149
Adding a Watched Movie
26:12
150
Adding a New Effect: Changing Page Title
08:45
151
The useEffect Cleanup Function
04:22
152
Cleaning Up the Title
05:23
153
Cleaning Up Data Fetching
10:17
154
One More Effect: Listening to a Keypress
14:07
155
CHALLENGE #1: Currency Converter
16:44
156
Section Overview
00:58
157
React Hooks and Their Rules
10:56
158
The Rules of Hooks in Practice
08:37
159
More Details of useState
12:31
160
Initializing State With a Callback (Lazy Initial State)
13:31
161
useState Summary
03:15
162
How NOT to Select DOM Elements in React
03:39
163
Introducing Another Hook: useRef
05:37
164
Refs to Select DOM Elements
10:10
165
Refs to Persist Data Between Renders
10:16
166
What are Custom Hooks? When to Create One?
04:23
167
Creating our First Custom Hook: useMovies
13:03
168
Creating useLocalStorageState
09:07
169
Creating useKey
08:20
170
CHALLENGE #1: useGeolocate
07:28
171
Section Overview
01:17
172
Our First Class Component
09:33
173
Working With Event Handlers
10:26
174
Class Components vs. Function Components
05:38
175
Starting the "Classy Weather" App
07:46
176
Fetching Weather Data
09:40
177
Displaying the Weather
14:11
178
Removing Boilerplate Code With Class Fields
04:06
179
Child to Parent Communication
04:20
180
Lifecycle Methods
15:37
181
Introduction to Part 3
01:12
182
Section Overview
01:04
183
Yet Another Hook: useReducer
18:00
184
Managing Related Pieces of State
12:24
185
Managing State With useReducer
14:15
186
The "React Quiz" App
07:58
187
Loading Questions from a Fake API
18:32
188
Handling Loading, Error, and Ready Status
09:06
189
Starting a New Quiz
04:55
190
Displaying Questions
07:46
191
Handling New Answers
16:43
192
Moving to the Next Question
06:23
193
Displaying Progress
08:58
194
Finishing a Quiz
15:08
195
Restarting a Quiz
07:06
196
Setting Up a Timer With useEffect
20:57
197
Section Summary: useState vs. useReducer
05:55
198
CHALLENGE #1: Creating a Bank Account With useReducer
19:51
199
Section Overview
01:02
200
Creating Our First App With Vite: "WorldWise"
15:42
201
Routing and Single-Page Applications (SPAs)
06:41
202
Implementing Main Pages and Routes
12:16
203
Linking Between Routes With <Link /> and <NavLink />
09:58
204
Styling Options For React Applications
05:51
205
Using CSS Modules
16:31
206
Building the Pages
17:00
207
Building the App Layout
08:45
208
Nested Routes and Index Route
13:26
209
Implementing the Cities List
18:43
210
Implementing the Countries List
11:08
211
Storing State in the URL
05:32
212
Dynamic Routes With URL Parameters
10:29
213
Reading and Setting a Query String
10:35
214
Programmatic Navigation with useNavigate
11:51
215
Programmatic Navigation with <Navigate />
04:13
216
Section Overview
01:00
217
CHALLENGE #1: Understand "The Atomic Blog" App
04:23
218
What is the Context API?
05:17
219
Creating and Providing a Context
09:27
220
Consuming the Context
10:54
221
Advanced Pattern: A Custom Provider and Hook
16:16
222
Thinking In React: Advanced State Management
11:39
223
Back to "WorldWise": Creating a CitiesContext
08:33
224
Consuming the CitiesContext
04:27
225
Finishing the City View
17:59
226
Including a Map With the Leaflet Library
09:26
227
Displaying City Markers on Map
05:59
228
Interacting With the Map
13:39
229
Setting Map Position With Geolocation
11:34
230
Fetching City Data in the Form
17:43
231
Creating a New City
23:29
232
Deleting a City
05:38
233
Advanced State Management System: Context + useReducer
22:39
234
Adding Fake Authentication: Setting Up Context
11:04
235
Adding Fake Authentication: Implementing "Login"
16:25
236
Adding Fake Authentication: Protecting a Route
11:22
237
CHALLENGE #2: Refactoring "React Quiz" to Context API
08:23
238
Section Overview
01:04
239
Performance Optimization and Wasted Renders
06:07
240
The Profiler Developer Tool
08:22
241
A Surprising Optimization Trick With children
11:50
242
Understanding memo
05:30
243
memo in Practice
13:18
244
Understanding useMemo and useCallback
06:40
245
useMemo in Practice
08:43
246
useCallback in Practice
10:10
247
Optimizing Context Re-Renders
14:49
248
Back to The "WorldWise" App
12:38
249
Optimizing Bundle Size With Code Splitting
15:53
250
Don't Optimize Prematurely!
03:00
251
useEffect Rules and Best Practices
10:02
252
CHALLENGE #1: Fix Performance Issues in "Workout Timer"
12:16
253
Setting State Based on Other State Updates
11:56
254
Using Helper Functions In Effects
15:05
255
Closures in Effects
09:53
256
Section Overview
01:08
257
Introduction to Redux
12:15
258
Creating a Reducer: Bank Account
10:48
259
Creating a Redux Store
09:47
260
Working With Action Creators
06:29
261
Adding More State: Customer
12:31
262
Professional Redux File Structure: State Slices
11:48
263
Back to React! Connecting our Redux App With React
05:47
264
Dispatching Actions from Our React App
17:22
265
The Legacy Way of Connecting Components to Redux
04:51
266
Redux Middleware and Thunks
04:29
267
Making an API Call With Redux Thunks
17:51
268
The Redux DevTools
10:22
269
What is Redux Toolkit (RTK)?
03:41
270
Creating the Store With RTK
04:38
271
Creating the Account Slice
21:44
272
Back to Thunks
05:03
273
Creating the Customer Slice
09:15
274
Redux vs. Context API
07:44
275
Introduction to Part 4
01:28
276
Section Overview
00:52
277
Setting Up a New Project: "Fast React Pizza Co."
08:14
278
Application Planning
21:25
279
Setting Up a Professional File Structure
08:21
280
A New Way Of Implementing Routes
10:31
281
Building the App Layout
11:19
282
Fetching Data With React Router "Loaders": Pizza Menu
11:51
283
Displaying a Loading Indicator
06:01
284
Handling Errors With Error Elements
06:25
285
Fetching Orders
12:41
286
Writing Data With React Router "Actions"
19:05
287
Error Handling in Form Actions
10:27
288
Section Overview
01:00
289
What is Tailwind CSS?
07:57
290
Setting Up Tailwind CSS
12:04
291
Working With Color
09:00
292
Styling Text
10:01
293
The Box Model: Spacing, Borders, and Display
11:18
294
Responsive Design
10:50
295
Using Flexbox
06:32
296
Using CSS Grid
12:21
297
Styling Buttons: Element States and Transitions
12:13
298
Styling Form Elements
10:23
299
Reusing Styles With @apply
04:29
300
Reusing Styles With React Components
12:28
301
Absolute Positioning, z-index, and More
06:31
302
Configuring Tailwind: Custom Font Family
10:54
303
Styling the Menu
18:28
304
Styling the Cart
11:47
305
Styling the Order Form
13:22
306
Styling the Order Overview
13:55
307
Section Overview
00:40
308
Modeling the "User" State With Redux Toolkit
13:25
309
Reading and Updating the User State
10:38
310
Modeling the "Cart" State
14:21
311
Adding Menu Items to the Cart
07:07
312
Building the Cart Overview With Redux Selectors
09:00
313
Building the Cart Page
07:06
314
Deleting Cart Items
14:45
315
Updating Cart Quantities
13:33
316
Using the Cart for New Orders
14:32
317
Redux Thunks With createAsyncThunk
16:05
318
Integrating Geolocation
16:05
319
Fetching Data Without Navigation: useFetcher
12:45
320
Updating Data Without Navigation
14:38
321
Section Overview
00:55
322
Application Planning
18:30
323
Setting Up the Project: "The Wild Oasis"
08:12
324
Introduction to Styled Components
12:23
325
Global Styles With Styled Components
14:37
326
Styled Component Props and the "css" Function
10:26
327
Building More Reusable Styled Components
11:04
328
Setting Up Pages and Routes
06:28
329
Building the App Layout
14:22
330
Building the Sidebar and Main Navigation
13:10
331
Section Overview
00:47
332
What is Supabase?
02:25
333
Creating a New Database
05:28
334
Modeling Application State
05:35
335
Creating Tables
09:32
336
Relationships Between Tables
08:30
337
Adding Security Policies (RLS)
06:19
338
Connecting Supabase With Our React App
08:46
339
Setting Up Storage Buckets
04:40
340
Section Overview
00:47
341
What is React Query?
06:21
342
Setting Up React Query
07:20
343
Fetching Cabin Data
21:42
344
Mutations: Deleting a Cabin
17:22
345
Displaying Toasts (Notifications)
08:42
346
Introducing Another Library: React Hook Form
11:18
347
Creating a New Cabin
12:14
348
Handling Form Errors
22:43
349
Uploading Images to Supabase
14:42
350
Editing a Cabin
30:40
351
Abstracting React Query Into Custom Hooks
17:27
352
Duplicating Cabins
06:50
353
Fetching Applications Settings
08:48
354
Updating Application Settings
11:29
355
Section Overview
01:14
356
An Overview of Reusability in React
05:45
357
Setting Up an Example
06:20
358
The Render Props Pattern
07:43
359
A Look at Higher-Order Components (HOC)
08:07
360
The Compound Component Pattern
18:18
361
Building a Modal Window Using a React Portal
19:55
362
Converting the Modal to a Compound Component
21:46
363
Detecting a Click Outside the Modal
13:38
364
Confirming Cabin Deletions
08:43
365
Building a Reusable Table
11:46
366
Applying the Render Props Pattern
04:39
367
Building a Reusable Context Menu
32:36
368
Section Overview
01:18
369
Client-Side Filtering: Filtering Cabins
18:50
370
Client-Side Sorting: Sorting Cabins
20:26
371
Building the Bookings Table
18:00
372
Uploading Sample Data
06:16
373
API-Side Filtering: Filtering Bookings
17:11
374
API-Side Sorting: Sorting Bookings
06:54
375
Building a Reusable Pagination Component
15:53
376
API-Side Pagination: Paginating Bookings
10:40
377
Prefetching With React Query
07:59
378
Building the Single Booking Page
15:18
379
Checking In a Booking
28:19
380
Adding Optional Breakfast
14:05
381
Checking Out a Booking (+ Fixing a Small Bug)
09:51
382
Deleting a Booking
13:34
383
Authentication: User Login With Supabase
22:07
384
Authorization: Protecting Routes
23:25
385
User Logout
09:01
386
Fixing an Important Bug
05:36
387
Building the Sign Up Form
11:00
388
User Sign Up
15:02
389
Authorization on Supabase: Protecting Database (RLS)
04:41
390
Building The App Header
10:19
391
Updating User Data and Password
28:27
392
Implementing Dark Mode With CSS Variables
21:30
393
Building the Dashboard Layout
04:27
394
Computing Recent Bookings and Stays
15:22
395
Displaying Statistics
12:03
396
Displaying a Line Chart With the Recharts Library
22:56
397
Displaying a Pie Chart
15:53
398
Displaying Stays for Current Day
20:42
399
Error Boundaries
09:45
400
Final Touches + Fixing Bugs
14:40
401
Section Overview
01:10
402
Deploying to Netlify
11:21
403
Setting Up a Git and GitHub Repository
16:17
404
Deploying to Vercel
05:55
405
Where to Go from Here
03:21

Unlock unlimited learning

Get instant access to all 404 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Complete DApp - Solidity & React - Blockchain Development

Complete DApp - Solidity & React - Blockchain Development

Sources: udemy
Become a Complete DApp Developer by learning the best in demand skills taught by renown engineer and full stack developer Clarian North. Join in early on an exciting technology...
15 hours 21 minutes 24 seconds
Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)

Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)

Sources: udemy, zerotomastery.io
Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.
39 hours 48 minutes
CodeFast | Learn to code in weeks, not months.

CodeFast | Learn to code in weeks, not months.

Sources: Marc Lou
CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively. Unlike traditional...
11 hours 38 minutes 42 seconds
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs

Sources: udemy
If you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies, then this course i...
13 hours 2 minutes 12 seconds
React Hooks

React Hooks

Sources: ui.dev (ex. Tyler McGinnis)
If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions ar...
3 hours 47 minutes 48 seconds