CF

The Ultimate React Course 2024: React, Redux & More

83h 56m 37s
English
Paid

The Ultimate React Course 2024: React, Redux & More is a 496-lesson 83 hours 56 minutes self-paced course by Udemy. In 2023, React remains the #1 skill to master for aspiring front-end developers!

Course facts

Lessons
496
Duration
83 hours 56 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

In 2023, React remains the #1 skill to master for aspiring front-end developers! Yet, with numerous libraries and tutorials, navigating the landscape can be challenging.

That’s why you're here, at the right place! This is THE ultimate React course for 2023 and beyond.

Engage in a practice-heavy journey to master React by creating polished apps, supported by diagrams, theory, and insights into React's inner workings.

This all-in-one package transforms you from beginner to proficient, capable of building modern, powerful, and professional web applications.

Real projects. Real explanations. Real React.

Why is This the Right React Course for You?

This course is Udemy's most comprehensive React offering, different from all others, because:

  • It includes the largest and most professional project, featuring the implementation of many common app features (refer to the promo video!).
  • Extremely detailed explanations of critical concepts with meticulously crafted and animated diagrams.
  • A profound concentration on "how to think in React" and modern best practices.
  • A thorough section on React's inner workings builds the confidence to utilize React effectively.
  • Advanced design patterns such as compound components help you evolve into a senior React engineer.

These are just highlights! Check the full list below, along with the promo video and curriculum.

And remember, "React course" signifies "Front-end development with React and modern libraries."

Learn and master React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, and more.

We prepare, develop, and deploy professional projects using industry-standard tools like Supabase (comprehensive back-end), GitHub, Netlify, and Vercel.

This course is 100% project-oriented, allowing you to build a portfolio of 8+ high-quality React apps, showcasing the skills acquired.

Upon course completion, you will possess the skills and confidence to excel in job interviews and become a sought-after React developer.

Why Am I the Right React Teacher for You?

I'm Jonas, an experienced web developer and designer, and a top instructor on Udemy. Since 2015, I've taught web development to over 1,500,000 developers, understanding how students learn and master concepts.

I designed this curriculum to be a unique mix of real-world projects, detailed explanations, and theoretical insights, transforming you into a confident React developer in weeks.

Ready to become a proficient and autonomous React developer, able to create your own applications? Start your journey today!

Still Not Sure? Here Are All the Details of What We'll Cover:

  • React fundamentals [necessity, components, JSX, props, events, forms, state, props vs. state]
  • Understanding state management [placement, guidelines, lifting state, local vs. global, UI vs. remote state]
  • Component strategy [component splitting, props as API, reusable components, children prop]
  • Effects and useEffect deep dive [data fetching, lifecycle vs. synchronization, effects usage, event handlers]
  • Hooks deep dive [rules, functionality, useRef, custom hooks]
  • Performance optimization [waste reduction, memoization techniques, Context API, code splitting, Suspense]
  • Advanced state management [useReducer, Context API, Redux, Redux Toolkit, Thunks, React Query]
  • Building SPAs [Vite, React Router, state management with URL parameters, data loaders (v6.4+)]
  • Real-world feature development [authentication, data handling, dark mode, dashboard creation]
  • Creating a back-end with Supabase [full-stack app development]
  • Styling React apps [Tailwind CSS, CSS Modules, Styled Components]
  • Advanced React patterns [render props, HOCs, compound components]
  • React's internal mechanics [rendering, virtual DOM, reconciliation, fiber tree, state batching]

Who teaches The Ultimate React Course 2024: React, Redux & More? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in The Ultimate React Course 2024: React, Redux & More?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 496 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 (496)
#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:43
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:28
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:45
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:28
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:41
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
Introduction to Part 5
01:24
406
Section Overview
00:47
407
An Overview of Server-Side Rendering (SSR)
15:46
408
Experiment: Manual SSR With React DOM + Node.js
26:34
409
The Missing Piece: Hydration
06:34
410
Implementing Hydration
15:05
411
What is Next.js?
12:04
412
Setting Up a Next.js Project
10:12
413
Defining Routes and Pages
09:40
414
Navigating Between Pages
09:26
415
Creating a Layout
12:14
416
What are React Server Components? (RSC – Part 1)
32:05
417
Fetching Data in a Page
06:37
418
Adding Interactivity With Client Components
08:03
419
Displaying a Loading Indicator
06:30
420
How RSC Works Behind the Scenes (RSC – Part 2)
18:36
421
RSC vs. SSR: How are They Related? (RSC – Part 3)
12:16
422
Section Overview
00:52
423
Project Planning: "The Wild Oasis" Customer Website
13:10
424
Project Organization
11:02
425
Styling With Tailwind CSS
09:25
426
Adding Page Metadata and Favicon
10:26
427
Loading and Optimizing Fonts
06:25
428
Improving the Navigation and Root Layout
07:03
429
Optimizing Images With Next.js <Image /> Component
08:40
430
Building the Home Page
09:48
431
Building the About Page With Responsive Images
13:31
432
Adding Nested Routes and Pages
06:56
433
Adding a Nested Layout
12:14
434
Section Overview
01:04
435
Setting Up Supabase
11:45
436
Fetching and Displaying Cabin List
11:14
437
Streaming Route Segments With loading.js File
07:16
438
What is React Suspense?
12:19
439
Streaming UI With Suspense: Cabin List
10:30
440
Dynamic Route Segments: Building the Cabin Page
10:26
441
Generating Dynamic Metadata
03:40
442
Error Handling: Setting Up Error Boundaries
09:04
443
Error Handling: "Not Found" Errors
05:46
444
Different Types of SSR: Static vs. Dynamic Rendering
14:15
445
Analyzing Rendering in Our App
04:49
446
Making Dynamic Pages Static With generateStaticParams
08:34
447
Static Site Generation (SSG)
09:13
448
Partial Pre-Rendering
06:58
449
How Next.js Caches Data
18:29
450
Experimenting With Caching and ISR
20:40
451
CHALLENGE #1: Fetching the Number of Cabins
03:47
452
Section Overview
01:14
453
Blurring the Boundary Between Server and Client (RSC – Part 4)
15:07
454
Client Components in Server Components
08:16
455
Highlighting Current Side Navigation Link
07:46
456
Sharing State Between Client and Server: The URL
34:29
457
Advanced: Server Components in Client Components
10:41
458
Data Fetching Strategies for the Reservation Section
27:01
459
Using the Context API for State Management
25:48
460
Creating an API Endpoint With Route Handlers
11:36
461
Section Overview
00:55
462
Setting Up NextAuth
21:39
463
Getting the User Session
14:12
464
What is Middleware in Next.js?
04:13
465
Protecting Routes With NextAuth Middleware
10:54
466
Building a Custom Sign In Page
12:19
467
Building a Custom Sign Out Button
03:23
468
Creating a New Guest on First Sign In
14:36
469
Section Overview
01:08
470
What are Server Actions?
12:02
471
Updating the Profile Using a Server Action
30:44
472
Manual Cache Revalidation
05:53
473
Displaying a Loading Indicator: The useFormStatus Hook
07:56
474
Building the Guest's Reservations Page
10:28
475
Deleting a Reservation
19:31
476
Another Loading Indicator: The useTransition Hook
07:28
477
CHALLENGE #1: Updating a Reservation
30:25
478
Removing Reservations Immediately: The useOptimistic Hook
22:23
479
Back to the Cabin Page: Finishing the Date Selector
12:10
480
Creating a New Reservation
32:29
481
Section Overview
00:49
482
Setting Up the GitHub Repository
03:25
483
Deploying to Vercel
06:19
484
Updating Environment Variables and OAuth Credentials
08:12
485
Section Overview
01:08
486
Setting Up Another Project
08:53
487
Routes, Pages, and Navigation
07:37
488
Dynamic Routes
03:34
489
Creating a Layout With a Custom _App
06:38
490
Creating Pages
02:29
491
Defining Page Title and Favicon
06:04
492
Fetching Data With getStaticProps (SSG)
08:13
493
Fetching Data With getServerSideProps (SSR)
10:51
494
API Routes
11:57
495
Handling Form Submissions
15:42
496
Where to Go from Here
03:21
Unlock unlimited learning

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

Learn more about subscription

What courses are similar to The Ultimate React Course 2024: React, Redux & More?

Frequently asked questions

What are the prerequisites for enrolling in this course?
Before enrolling, you should have a basic understanding of JavaScript, as the course includes lessons on advanced JavaScript concepts like destructuring, async/await, and array methods. Familiarity with HTML and CSS is also recommended, as these are fundamental to understanding React application styling and component creation.
What kind of projects will I build in this course?
Throughout the course, you will build a variety of React applications. The curriculum emphasizes real projects, including challenges like creating a 'Profile Card' and components such as a 'Steps Component.' These projects are designed to help you master React's core concepts and apply modern best practices.
Who is the target audience for this course?
This course is ideal for aspiring front-end developers who want to master React, as well as those looking to deepen their understanding of React's inner workings and modern design patterns. It's suitable for beginners with a basic grasp of JavaScript and experienced developers aiming to refine their React skills.
How does this course compare in depth and scope to other React courses?
This course is described as Udemy's most comprehensive React offering. It provides detailed explanations with animated diagrams and focuses on how to think in React, covering advanced topics like compound components and React's inner workings, which are less emphasized in most other courses.
What specific tools and platforms will I use during the course?
You will use Create-React-App to set up new React projects, which is covered in the lessons. Additionally, the course requires setting up a development environment tailored for React applications, which is detailed early in the course.
What topics are not covered in this course?
The course does not cover backend development or server-side rendering. It focuses exclusively on front-end development using React and associated modern libraries, ensuring a deep dive into client-side application development.
How much time should I allocate to complete the course?
The course consists of 496 lessons, which suggests a significant time commitment. While the exact runtime is unspecified, prospective students should be prepared to dedicate a substantial amount of time to engage with the practice-heavy material and complete the projects thoroughly.