The Ultimate React Course 2024: React, Redux & More

83h 56m 37s
English
Paid

Course description

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

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

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

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

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

Real projects. Real explanations. Real React.

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

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

Here's why:

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

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

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

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

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

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

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

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

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

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

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

Read more about the course

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

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

0:00
/
#1: Course Roadmap and Projects

All Course Lessons (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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Building Applications with React 17 and ASP.NET Core 6

Building Applications with React 17 and ASP.NET Core 6

Sources: udemy
With ASP.NET Core we can develop Web APIs using C#. With React you can create modern, fast and flexible web applications. In this course we will use both tools
19 hours 28 minutes 31 seconds
Redux Saga

Redux Saga

Sources: 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
React Query: Server State Management in React

React Query: Server State Management in React

Sources: udemy
React Query has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to ke
7 hours 39 minutes 49 seconds
The Ultimate React Course 2024: React, Redux & More

The Ultimate React Course 2024: React, Redux & More

Sources: udemy
In 2023, React is still the #1 skill to learn if you want to become a successful front-end developer! But it can be hard. There are so many moving parts, so ma
67 hours 14 minutes 41 seconds
React Testing Library and Jest: The Complete Guide

React Testing Library and Jest: The Complete Guide

Sources: udemy, Stephen Grider
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning how to test React apps with React Testing Librar
7 hours 40 minutes 24 seconds