CourseFlix

The Ultimate React Course 2024: React, Redux & More

67h 14m 41s
English
Paid

You want to learn React. But the React world can feel big. You see many tools, many guides, and many ideas. It can be hard to know where to start. This page gives you a clear path so you can learn React with focus and practice.

Why this course helps you

You learn React by building real apps. You also learn how React works under the hood, so you can solve problems on your own. Each topic is broken into small steps. You see why things work, not just how.

What you learn

  • Large real project with common features found in modern apps.
  • Clear diagrams that show how React updates and handles state.
  • How to think in React and follow modern best practices.
  • How React works behind the scenes, so you can debug with confidence.
  • Advanced patterns that senior developers use.

You do not learn React alone. You also learn key tools like React Router, Redux Toolkit, React Query, React Hook Form, Tailwind CSS, and Styled Components. You also build apps with Supabase, GitHub, Netlify, and Vercel.

By the end, you will have a portfolio of polished apps. Each app shows a clear skill, and each one builds on what you learned before.

Your instructor

Jonas has taught web development since 2015. Over 1.5 million students have taken his courses. He builds each lesson to match how students learn best. You get a mix of practice, clear theory, and real projects.

If you want to grow into a confident React developer who can build apps from scratch, this course gives you the structure and support you need.

What the course covers

React basics

  • Why React exists
  • Components, JSX, props, events, forms
  • State and how props differ from state

Thinking in state

  • Where to place state
  • Local and global state
  • UI state and remote state
  • How and when to lift state

Thinking in components

  • How to split components
  • Props as a clear API
  • Reusable and composable design
  • The children prop

Effects and useEffect

  • When you need effects
  • Data fetching
  • Sync logic vs. lifecycle ideas
  • Effects vs. event handlers

Hooks in depth

  • Rules of hooks
  • How hooks work
  • useRef and custom hooks

Performance

  • Wasted renders
  • memo, useMemo, useCallback
  • Context performance
  • Code splitting and Suspense

State management

  • useReducer
  • Context API
  • Redux and Redux Toolkit
  • Thunks and async flows
  • React Query

Single‑page apps

  • Vite setup
  • Routing with React Router
  • URL params and query strings
  • Loaders and actions (v6.4+)

Common real‑world features

  • Auth and roles
  • Sorting, filtering, pagination
  • Dark mode
  • Dashboards and charts

Back-end with Supabase

  • Build your own API
  • Use a hosted database

Styling apps

  • Tailwind CSS
  • CSS Modules
  • Styled Components

Advanced patterns

  • Render props
  • Higher‑order components
  • Compound components

How React works under the hood

  • Rendering and the virtual DOM
  • Reconciliation and the fiber tree
  • Why keys matter
  • Events and state batching

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 405 lessons

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
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