CF

The Ultimate React Course 2024: React, Redux & More

83h 56m 37s
English
Paid

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]

About the Author: 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.

Watch Online 496 lessons

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

Course content

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

Related courses

  • Advanced Animating React with Framer Motion thumbnailUpdated 2y ago

    Advanced Animating React with Framer Motion

    By: Level Up Tutorials (Scott Tolinski)
    Welcome to Advanced Animating React with Framer Motion! In this series, we will dive into more advanced concepts as well as discuss what is new in Framer Motion
    2 hours 57 minutes 30 seconds 5 / 5
  • Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo thumbnailUpdated 2y ago

    Uber Clone - Typescript, NodeJS, GraphQL, React, Apollo

    By: Nomad Coders
    We will do a Uber clone (backend + frontend + deployment). From head to toe using JavaScript! This time full stack, full JavaScript stack!
    22 hours 41 minutes 56 seconds
  • Redux Saga thumbnailUpdated 2y ago

    Redux Saga

    By: Pluralsight
    Redux Saga is a fast-growing library with over 9,000 stars on GitHub. It lets you rapidly create asynchronous apps using a new tool called ES6 Generators. In th
    2 hours 54 minutes 54 seconds

Frequently asked questions

What is The Ultimate React Course 2024: React, Redux & More about?
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…
Who teaches The Ultimate React Course 2024: React, Redux & More?
The Ultimate React Course 2024: React, Redux & More is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is The Ultimate React Course 2024: React, Redux & More?
The Ultimate React Course 2024: React, Redux & More contains 496 lessons with a total runtime of 83 hours 56 minutes. All lessons are available to watch online at your own pace.
Is The Ultimate React Course 2024: React, Redux & More free to watch?
The Ultimate React Course 2024: React, Redux & More is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch The Ultimate React Course 2024: React, Redux & More online?
The Ultimate React Course 2024: React, Redux & More is available to watch online on CourseFlix at https://courseflix.net/course/the-ultimate-react-course-2024-react-redux-more. The page hosts every lesson with the integrated video player; no download is required.