React - The Complete Guide 2024

64h 33m 17s
English
Paid

Course description

Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is improved throughout the course: The Burger Builder!

Read more about the course

More details please!

JavaScript is the major driver of modern web applications since it's the only programming language which runs in the browser and hence allows you to provide highly reactive apps. You'll be able to achieve mobile-app like user experiences in the web.

But using JavaScript can be challenging - it quickly becomes overwhelming to create a nice web app with vanilla JavaScript and jQuery only.

React to the rescue! 

React is all about components - basically custom HTML elements - with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it (or listen to your own events!) and re-use it as often as needed.

Need to display a list of users in your app? It's as simple as creating a "User" component and outputting it as often as needed.

This course will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux. 

By the end of the course, you can build amazing React (single page) applications!

A detailed list with the course content can be found below.

Who's teaching you in this course?

My name is Maximilian Schwarzmüller, I'm a freelance web developer and worked with React in many projects. I'm also a 5-star rated instructor here on Udemy. I cover React's most popular alternatives - Vue and Angular - as well as many other topics. I know what I'm talking about and I know where the pain points can be found.

It's my goal to get you started with React as quick as possible and ensure your success. But I don't just focus on students getting started. I want everyone to benefit from my courses, that's why we'll dive deeply into React and why I made sure to also share knowledge that's helpful to advanced React developers. 

Is this course for you?

This course is for you if ...

  • ...you're just getting started with frontend/ JavaScript development and only got the JS basics set (no prior React or other framework experience is required!)
  • ...you're experienced with Angular or Vue but want to dive into React
  • ...know the React basics but want to refresh them and/ or dive deeper
  • ...already worked quite a bit with React but want to dive deeper and see it all come together in a bigger app

What should you bring to succeed in that course?

  • HTML + CSS + JavaScript knowledge is required. You don't need to be an expert but the basics need to be set
  • NO advanced JavaScript knowledge is required, though you'll be able to move even quicker through the course if you know next-gen JavaScript features like ES6 Arrow functions. A short refresher about the most important next-gen features is provided in the course though.

What's inside the course?

  • The "What", "Why" and "How"
  • React Basics (Base features, syntax and concepts)
  • Managing state with class-based components and React Hooks
  • How to output lists and conditional content
  • Styling of React components
  • A deep dive into the internals of React and advanced component features
  • How to access Http content from within React apps (AJAX)
  • Redux, Redux, Redux ... from basics to advanced!
  • Forms and form validation in React apps
  • Authentication
  • An introduction to unit testing
  • An introduction to Next.js
  • React app deployment instructions
  • ...and much more!

Who this course is for:

  • Students who want to learn how to build reactive and fast web apps
  • Anyone who's interested in learning an extremely popular technology used by leading tech companies like Netflix
  • Students who want to take their web development skills to the next level and learn a future-proof technology

What you'll learn:

  • Build powerful, fast, user-friendly and reactive web apps
  • Provide amazing user experiences by leveraging the power of JavaScript with ease
  • Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now
  • Learn React Hooks & Class-based 

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online React - The Complete Guide 2024

0:00
/
#1: Welcome to the Course

All Course Lessons (623)

#Lesson TitleDurationAccess
1
Welcome to the Course Demo
01:09
2
What Is React? And Why Would You Use It?
02:59
3
ReactJS vs Vanilla JavaScript
10:58
4
Editing Our First React App
04:23
5
About the Course
02:56
6
One Course, Two Paths
03:09
7
How To Get The Most Out Of This Course
05:25
8
How To Create New React Projects
07:11
9
Why Do We Need A Special Project Setup?
02:52
10
Module Introduction
01:50
11
Starting Project
01:01
12
Adding JavaScript To A Page & How React Projects Differ
06:58
13
React Projects Use a Build Process
08:05
14
"import" & "export"
12:05
15
Revisiting Variables & Values
07:02
16
Revisiting Operators
02:34
17
Revisiting Functions & Parameters
08:15
18
Arrow Functions
02:12
19
Revisiting Objects & Classes
06:08
20
Arrays & Array Methods like map()
11:11
21
Destructuring
05:17
22
The Spread Operator
03:14
23
Revisiting Control Structures
05:29
24
Manipulating the DOM - Not With React!
00:53
25
Using Functions as Values
07:23
26
Defining Functions Inside Of Functions
01:56
27
Reference vs Primitive Values
04:45
28
Module Introduction
01:49
29
It's All About Components! [Core Concept]
06:08
30
Setting Up The Starting Project (
03:07
31
JSX & React Components [Core Concept]
04:43
32
Creating & Using a First Custom Component
05:53
33
How React Handles Components & How It Builds A "Component Tree" [Core Concept]
08:22
34
Using & Outputting Dynamic Values [Core Concept]
06:02
35
Setting HTML Attributes Dynamically & Loading Image Files
04:43
36
Making Components Reusable with Props [Core Concept]
09:07
37
Alternative Props Syntaxes
06:45
38
Best Practice: Storing Components in Files & Using a Good Project Structure
06:33
39
Storing Component Style Files Next To Components
06:16
40
Component Composition: The special "children" Prop [Core Concept]
08:07
41
Reacting to Events [Core Concept]
06:46
42
Passing Functions as Values to Props
06:44
43
Passing Custom Arguments to Event Functions
05:37
44
How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]
05:31
45
Managing State & Using Hooks [Core Concept]
10:29
46
Deriving & Outputting Data Based on State
04:51
47
Rendering Content Conditionally
08:04
48
CSS Styling & Dynamic Styling
05:13
49
Outputting List Data Dynamically
07:41
50
Module Summary
06:06
51
Module Introduction
01:27
52
You Don't Have To Use JSX!
04:38
53
Working with Fragments
05:41
54
When Should You Split Components?
03:15
55
Splitting Components By Feature & State
06:55
56
Problem: Props Are Not Forwarded To Inner Elements
06:45
57
Forwarding Props To Wrapped Elements
03:47
58
Working with Multiple JSX Slots
08:43
59
Setting Component Types Dynamically
08:45
60
Setting Default Prop Values
02:10
61
Onwards To The Next Project & Advanced Concepts
02:18
62
Not All Content Must Go Into Components
05:11
63
New Project: First Steps Towards Our Tic-Tac-Toe Game
03:59
64
Concept Repetition: Splitting Components & Building Reusable Components
04:14
65
Concept Repetition: Working with State
07:58
66
Component Instances Work In Isolation!
02:04
67
Conditional Content & A Suboptimal Way Of Updating State
04:55
68
Best Practice: Updating State Based On Old State Correctly
07:05
69
User Input & Two-Way-Binding
07:43
70
Rendering Multi-Dimensional Lists
07:41
71
Best Practice: Updating Object State Immutably
08:45
72
Lifting State Up [Core Concept]
09:40
73
Avoid Intersecting States!
05:23
74
Prefer Computed Values & Avoid Unnecessary State Management
06:18
75
Deriving State From Props
07:23
76
Sharing State Across Components
04:13
77
Reducing State Management & Identifying Unnecessary State
05:53
78
Disabling Buttons Conditionally
02:38
79
Outsourcing Data Into A Separate File
04:29
80
Lifting Computed Values Up
05:20
81
Deriving Computed Values From Other Computed Values
05:30
82
Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
05:41
83
Why Immutability Matters - Always!
05:29
84
When NOT To Lift State Up
05:21
85
An Alternative To Lifting State Up
03:17
86
Final Polishing & Improving Components
05:16
87
Module Introduction & A Challenge For You!
05:10
88
Adding a Header Component
04:49
89
Getting Started with a User Input Component
05:08
90
Handling Events & Using Two-Way-Binding
10:29
91
Lifting State Up
09:00
92
Computing Values & Properly Handling Number Values
05:42
93
Outputting Results in a List & Deriving More Values
09:03
94
Outputting Content Conditionally
04:25
95
Module Introduction & Starting Project
03:58
96
Splitting CSS Code Across Multiple Files
03:23
97
Styling React Apps with Vanilla CSS - Pros & Cons
02:33
98
Vanilla CSS Styles Are NOT Scoped To Components!
03:32
99
Styling React Apps with Inline Styles
06:25
100
Dynamic & Conditional Inline Styles
03:28
101
Dynamic & Conditional Styling with CSS Files & CSS Classes
05:42
102
Scoping CSS Rules with CSS Modules
09:52
103
Introducing "Styled Components" (Third-party Package)
08:04
104
Creating Flexible Components with Styled Components
04:48
105
Dynamic & Conditional Styling with Styled Components
11:08
106
Styled Components: Pseudo Selectors, Nested Rules & Media Queries
07:16
107
Creating Reusable Components & Component Combinations
09:54
108
Introducing Tailwind CSS For React App Styling
11:27
109
Adding & Using Tailwind CSS In A React Project
03:40
110
Tailwind: Media Queries & Pseudo Selectors
05:23
111
Dynamic & Conditional Styling with Tailwind
05:51
112
Migrating The Demo App to Tailwind CSS
04:16
113
Tailwind CSS: Pros & Cons
04:27
114
Module Introduction
01:27
115
The Starting Project
01:17
116
Understanding React Error Messages
08:32
117
Using the Browser Debugger & Breakpoints
07:24
118
Understanding React's "Strict Mode"
06:20
119
Using the React DevTools (Browser Extension)
03:58
120
Module Introduction & Starting Project
03:20
121
Repetition: Managing User Input with State (Two-Way-Binding)
05:18
122
Introducing Refs: Connecting & Accessing HTML Elements via Refs
06:05
123
Manipulating the DOM via Refs
02:15
124
Refs vs State Values
04:46
125
Adding Challenges to the Demo Project
04:50
126
Setting Timers & Managing State
04:57
127
Using Refs for More Than "DOM Element Connections"
08:31
128
Adding a Modal Component
06:41
129
Forwarding Refs to Custom Components
06:08
130
Exposing Component APIs via the useImperativeHandle Hook
07:15
131
More Examples: When To Use Refs & State
08:51
132
Sharing State Across Components
04:59
133
Enhancing the Demo App "Result Modal"
02:13
134
Introducing & Understanding "Portals"
06:56
135
Module Introduction & Starting Project
03:12
136
Adding a "Projects Sidebar" Component
02:30
137
Styling the Sidebar & Button with Tailwind CSS
05:01
138
Adding the "New Project" Component & A Reusable "Input" Component
05:59
139
Styling Buttons & Inputs with Tailwind CSS
07:04
140
Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)
06:50
141
Managing State to Switch Between Components
08:20
142
Collecting User Input with Refs & Forwarded Refs
13:23
143
Handling Project Creation & Updating the UI
06:01
144
Validating User Input & Showing an Error Modal via useImperativeHandle
10:56
145
Styling the Modal via Tailwind CSS
05:47
146
Making Projects Selectable & Viewing Project Details
15:23
147
Handling Project Deletion
04:45
148
Adding "Project Tasks" & A Tasks Component
05:52
149
Managing Tasks & Understanding Prop Drilling
15:24
150
Clearing Tasks & Fixing Minor Bugs
06:41
151
Module Introduction
01:55
152
Understanding Prop Drilling & Project Overview
05:59
153
Prop Drilling: Component Composition as a Solution
05:18
154
Introducing the Context API
02:18
155
Creating & Providing The Context
07:35
156
Consuming the Context
05:50
157
Linking the Context to State
07:28
158
A Different Way Of Consuming Context
05:02
159
What Happens When Context Values Change?
01:26
160
Migrating the Entire Demo Project to use the Context API
06:21
161
Outsourcing Context & State Into a Separate Provider Component
06:06
162
Introducing the useReducer Hook
10:07
163
Dispatching Actions & Editing State with useReducer
10:15
164
Module Introduction & Starting Project
03:39
165
What's a "Side Effect"? A Thorough Example
07:24
166
A Potential Problem with Side Effects: An Infinite Loop
02:49
167
Using useEffect for Handling (Some) Side Effects
05:32
168
Not All Side Effects Need useEffect
07:59
169
useEffect Not Needed: Another Example
08:31
170
Preparing Another Use-Case For useEffect
04:11
171
Using useEffect for Syncing With Browser APIs
04:10
172
Understanding Effect Dependencies
03:01
173
Preparing Another Problem That Can Be Fixed with useEffect
04:55
174
Introducing useEffect's Cleanup Function
04:50
175
The Problem with Object & Function Dependencies
08:10
176
The useCallback Hook
03:49
177
useEffect's Cleanup Function: Another Example
07:32
178
Optimizing State Updates
03:45
179
Module Introduction & Starting Project
02:22
180
A First Component & Some State
07:04
181
Deriving Values, Outputting Questions & Registering Answers
12:54
182
Shuffling Answers & Adding Quiz Logic
06:58
183
Adding Question Timers
11:41
184
Working with Effect Dependencies & useCallback
07:15
185
Using Effect Cleanup Functions & Using Keys for Resetting Components
07:54
186
Highlighting Selected Answers & Managing More State
11:35
187
Splitting Components Up To Solve Problems
17:44
188
Moving Logic To Components That Actually Need It ("Moving State Down")
12:47
189
Setting Different Timers Based On The Selected Answer
08:08
190
Outputting Quiz Results
15:10
191
Module Introduction
01:17
192
React Builds A Component Tree / How React Works Behind The Scenes
08:42
193
Analyzing Component Function Executions via React's DevTools Profiler
05:58
194
Avoiding Component Function Executions with memo()
08:05
195
Avoiding Component Function Executions with Clever Structuring
06:07
196
Understanding the useCallback() Hook
07:06
197
Understanding the useMemo() Hook
05:59
198
React Uses A Virtual DOM - Time To Explore It!
07:16
199
Why Keys Matter When Managing State!
11:57
200
More Reasons For Why Keys Matter
02:55
201
Using Keys For Resetting Components
05:23
202
State Scheduling & Batching
05:50
203
Optimizing React with MillionJS
04:46
204
Module Introduction
02:11
205
What & Why
04:54
206
Adding a First Class-based Component
06:55
207
Working with State & Events
11:39
208
The Component Lifecycle (Class-based Components Only!)
05:21
209
Lifecycle Methods In Action
11:47
210
Class-based Components & Context
04:54
211
Class-based vs Functional Components: A Summary
02:43
212
Introducing Error Boundaries
09:53
213
Module Introduction
02:54
214
How (Not) To Connect To A Database
06:21
215
Starting Project & Dummy Backend API
03:26
216
Preparing the App For Data Fetching
05:08
217
How NOT To Send HTTP Requests (And Why It's Wrong)
06:25
218
Sending HTTP Requests (GET Request) via useEffect
04:00
219
Using async / await
02:27
220
Handling Loading States
05:28
221
Handling HTTP Errors
09:17
222
Transforming Fetched Data
05:32
223
Extracting Code & Improving Code Structure
02:54
224
Sending Data with POST Requests
12:01
225
Using Optimistic Updating
07:34
226
Deleting Data (via DELETE HTTP Requests)
03:44
227
Practice: Fetching Data
07:14
228
Module Introduction & Starting Project
02:08
229
Revisiting the "Rules of Hooks" & Why To Use Hooks
06:12
230
Creating a Custom Hook
05:33
231
Custom Hook: Managing State & Returning State Values
10:52
232
Exposing Nested Functions From The Custom Hook
06:04
233
Using A Custom Hook in Multiple Components
04:26
234
Creating Flexible Custom Hooks
05:00
235
Module Introduction & Starting Project
02:05
236
What Are Forms & What's Tricky About Them?
04:00
237
Handling Form Submission
10:27
238
Managing & Getting User Input via State & Generic Handlers
11:13
239
Getting User Input via Refs
04:36
240
Getting Values via FormData & Native Browser APIs
09:04
241
Resetting Forms
04:39
242
Validating Input on Every Keystroke via State
06:59
243
Validating Input Upon Lost Focus (Blur)
07:54
244
Validating Input Upon Form Submission
07:55
245
Validating Input via Built-in Validation Props
05:00
246
Mixing Custom & Built-in Validation Logic
04:29
247
Building & Using a Reusable Input Component
10:06
248
Outsourcing Validation Logic
03:23
249
Creating a Custom useInput Hook
15:12
250
Using Third-Party Form Libraries
01:32
251
What-are-Form-Actions
06:48
252
Module Introduction
02:49
253
Adding Validation Checks
07:51
254
Managing Form-dependent State with useActionState()
12:22
255
Using User Input
10:05
256
Moving the Action Function out of the Component
02:35
257
A Demo App: Introduction
03:27
258
Handling Form Submission
09:41
259
Working with Asynchronous Form Actions
06:24
260
Updating the UI with useFormStatus()
05:07
261
Registering Multiple Form Actions
04:33
262
Sending an HTTP Request via a Form Action
05:27
263
Using the "pending" State from useActionState()
03:48
264
Adding Optimistic Updating
09:48
265
Module Summary
02:58
266
Module Introduction & Starting Project
04:15
267
Planning the App & Adding a First Component
06:41
268
Fetching Meals Data (GET HTTP Request)
12:01
269
Adding a "MealItem" Component
07:40
270
Formatting & Outputting Numbers as Currency
02:52
271
Creating a Configurable & Flexible Custom Button Component
08:03
272
Getting Started with Cart Context & Reducer
20:10
273
Finishing & Using the Cart Context & Reducer
17:22
274
Adding a Reusable Modal Component with useEffect
07:27
275
Opening the Cart in the Modal via a New Context
19:33
276
Working on the Cart Items
08:02
277
Adding a Custom Input Component & Managing Modal Visibility
19:32
278
Handling Form Submission & Validation
06:04
279
Sending a POST Request with Order Data
07:36
280
Adding a Custom HTTP Hook & Avoiding Common Errors
26:24
281
Handling HTTP Loading & Error States
03:13
282
Finishing Touches
14:08
283
Migrating To Form Actions
03:14
284
Managing Form Status with Form Actions
05:09
285
Module Introduction
01:06
286
Another Look At State In React Apps
05:15
287
Redux vs React Context
06:20
288
How Redux Works
05:49
289
Exploring The Core Redux Concepts
15:15
290
More Redux Basics
03:05
291
Preparing a new Project
02:00
292
Creating a Redux Store for React
04:55
293
Providing the Store
03:14
294
Using Redux Data in React Components
05:09
295
Dispatching Actions From Inside Components
03:34
296
Redux with Class-based Components
10:21
297
Attaching Payloads to Actions
04:16
298
Working with Multiple State Properties
06:20
299
How To Work With Redux State Correctly
05:08
300
Redux Challenges & Introducing Redux Toolkit
05:28
301
Adding State Slices
08:12
302
Connecting Redux Toolkit State
04:48
303
Migrating Everything To Redux Toolkit
06:20
304
Working with Multiple Slices
11:51
305
Reading & Dispatching From A New Slice
06:57
306
Splitting Our Code
05:04
307
Summary
03:54
308
Module Introduction
00:40
309
Redux & Side Effects (and Asynchronous Code)
03:28
310
Refresher / Practice: Part 1/2
20:13
311
Refresher / Practice: Part 2/2
18:01
312
Redux & Async Code
04:10
313
Frontend Code vs Backend Code
05:41
314
Where To Put Our Logic
09:00
315
Using useEffect with Redux
06:01
316
Handling Http States & Feedback with Redux
12:50
317
Using an Action Creator Thunk
12:08
318
Getting Started with Fetching Data
08:40
319
Finalizing the Fetching Logic
05:17
320
Exploring the Redux DevTools
05:38
321
Summary
01:54
322
Module Introduction
03:22
323
Routing: Multiple Pages in Single-Page Applications
03:16
324
Project Setup & Installing React Router
03:07
325
Defining Routes
07:43
326
Adding a Second Route
02:08
327
Exploring an Alternative Way of Defining Routes
03:02
328
Navigating between Pages with Links
04:37
329
Layouts & Nested Routes
08:25
330
Showing Error Pages with errorElement
03:59
331
Working with Navigation Links (NavLink)
06:38
332
Navigating Programmatically
02:42
333
Defining & Using Dynamic Routes
07:45
334
Adding Links for Dynamic Routes
03:23
335
Understanding Relative & Absolute Paths
10:39
336
Working with Index Routes
01:57
337
Onwards to a new Project Setup
03:17
338
Time to Practice: Problem
01:26
339
Time to Practice: Solution
23:17
340
Data Fetching with a loader()
07:36
341
Using Data From A Loader In The Route Component
02:52
342
More loader() Data Usage
03:18
343
Where Should loader() Code Be Stored?
02:19
344
When Are loader() Functions Executed?
02:49
345
Reflecting The Current Navigation State in the UI
02:54
346
Returning Responses in loader()s
04:02
347
Which Kind Of Code Goes Into loader()s?
01:15
348
Error Handling with Custom Errors
04:57
349
Extracting Error Data & Throwing Responses
06:25
350
The json() Utility Function
02:08
351
Dynamic Routes & loader()s
07:33
352
The useRouteLoaderData() Hook & Accessing Data From Other Routes
07:41
353
Planning Data Submission
02:23
354
Working with action() Functions
09:09
355
Submitting Data Programmatically
09:07
356
Updating the UI State Based on the Submission Status
04:03
357
Validating User Input & Outputting Validation Errors
06:58
358
Reusing Actions via Request Methods
07:56
359
Behind-the-Scenes Work with useFetcher()
09:12
360
Deferring Data Fetching with defer()
09:08
361
Controlling Which Data Should Be Deferred
07:23
362
Module Summary
02:58
363
Module Introduction
01:11
364
How Authentication Works
09:09
365
Project Setup & Route Setup
03:47
366
Working with Query Parameters
07:36
367
Implementing the Auth Action
11:41
368
Validating User Input & Outputting Validation Errors
04:19
369
Adding User Login
01:56
370
Attaching Auth Tokens to Outgoing Requests
06:33
371
Adding User Logout
04:22
372
Updating the UI Based on Auth Status
06:06
373
Adding Route Protection
02:47
374
Adding Automatic Logout
05:11
375
Managing the Token Expiratoin
07:29
376
Module Introduction
01:41
377
Deployment Steps
03:36
378
Understanding Lazy Loading
04:48
379
Adding Lazy Loading
09:12
380
Building the Code For Production
02:23
381
Deployment Example
06:45
382
Server-side Routing & Required Configuration
04:07
383
Module Introduction
01:47
384
Project Setup & Overview
04:09
385
React Query: What & Why?
06:00
386
Installing & Using Tanstack Query - And Seeing Why It's Great!
16:33
387
Understanding & Configuring Query Behaviors - Cache & Stale Data
07:44
388
Dynamic Query Functions & Query Keys
13:06
389
The Query Configuration Object & Aborting Requests
05:28
390
Enabled & Disabled Queries
06:56
391
Changing Data with Mutations
11:30
392
Fetching More Data & Testing the Mutation
06:40
393
Acting on Mutation Success & Invalidating Queries
08:51
394
A Challenge! The Problem
02:15
395
A Challenge! The Solution
16:38
396
Disabling Automatic Refetching After Invalidations
02:43
397
Enhancing the Demo App & Repeating Mutation Concepts
09:19
398
React Query Advantages In Action
08:58
399
Updating Data with Mutations
04:50
400
Optimistic Updating
13:07
401
Using the Query Key As Query Function Input
07:48
402
React Query & React Router
20:27
403
Module Introduction
02:02
404
Creating a NextJS Project
04:18
405
Understanding File-based Routing & React Server Components
02:46
406
Adding Another Route via the Filesystem
03:07
407
Navigating Between Pages
04:13
408
Working with Pages & Layouts
03:23
409
Reserved File Names, Custom Components & How To Organize A NextJS Project
06:32
410
Configuring Dynamic Routes & Using Route Parameters
06:18
411
Onwards to the Main Project: The Foodies App
01:25
412
Exercise: Your Task
02:04
413
Exercise: Solution
08:20
414
Revisiting The Concept Of Layouts
03:51
415
Adding a Custom Component To A Layout
05:59
416
Styling NextJS Project: Your Options & Using CSS Modules
06:01
417
Optimizing Images with the NextJS Image Component
04:58
418
Using More Custom Components
03:49
419
Populating The Starting Page Content
04:19
420
Preparing an Image Slideshow
03:26
421
React Server Components vs Client Components - When To Use What
08:16
422
Using Client Components Efficiently
11:08
423
Outputting Meals Data & Images With Unknown Dimensions
10:32
424
Setting Up A SQLite Database
03:12
425
Fetching Data By Leveraging NextJS & Fullstack Capabilities
07:18
426
Adding A Loading Page
04:01
427
Using Suspense & Streamed Responses For Granular Loading State Management
05:55
428
Handling Errors
05:23
429
Handling "Not Found" States
01:58
430
Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
11:05
431
Throwing Not Found Errors For Individual Meals
02:04
432
Getting Started with the "Share Meal" Form
01:54
433
Getting Started with a Custom Image Picker Input Component
08:29
434
Adding an Image Preview to the Picker
06:01
435
Introducing & Using Server Actions for Handling Form Submissions
09:03
436
Storing Server Actions in Separate Files
03:46
437
Creating a Slug & Sanitizing User Input for XSS Protection
03:21
438
Storing Uploaded Images & Storing Data in the Database
12:57
439
Managing the Form Submission Status with useFormStatus
05:31
440
Adding Server-Side Input Validation
05:55
441
Working with Server Action Responses & useFormState
08:06
442
Building For Production & Understanding NextJS Caching
06:07
443
Triggering Cache Revalidations
03:58
444
Don't Store Files Locally On The Filesystem!
02:14
445
Adding Static Metadata
03:48
446
Adding Dynamic Metadata
02:21
447
Module Summary
04:26
448
About the NextJS Pages Router
02:56
449
Creating a NextJS Project
02:08
450
Analyzing the Created Project
02:53
451
Adding First Pages
06:06
452
Adding Nested Paths & Pages (Nested Routes)
03:48
453
Creating Dynamic Pages (with Parameters)
03:37
454
Extracting Dynamic Parameter Values
04:08
455
Linking Between Pages
07:14
456
Onwards to a bigger Project!
03:33
457
Preparing the Project Pages
03:43
458
Outputting a List of Meetups
05:04
459
Adding the New Meetup Form
03:56
460
The "_app.js" File & Layout Wrapper
06:18
461
Using Programmatic (Imperative) Navigation
03:48
462
Adding Custom Components & CSS Modules
10:01
463
How Pre-rendering Works & Which Problem We Face
05:53
464
Data Fetching for Static Pages
08:57
465
More on Static Site Generation (SSG)
05:45
466
Exploring Server-side Rendering (SSR) with "getServerSideProps"
06:28
467
Working with Params for SSG Data Fetching
05:15
468
Preparing Paths with "getStaticPaths" & Working With Fallback Pages
07:17
469
Introducing API Routes
06:21
470
Working with MongoDB
09:33
471
Sending Http Requests To Our API Routes
06:50
472
Getting Data From The Database
07:11
473
Getting Meetup Details Data & Preparing Pages
09:42
474
Adding "head" Metadata
09:20
475
Deploying Next.js Projects
12:27
476
Using Fallback Pages & Re-deploying
04:14
477
Summary
02:16
478
Module Introduction
01:49
479
Why We Need A Special Project Setup
04:15
480
Understanding React Server Components
07:17
481
Changing Server to Client Components
05:47
482
Combining Server and Client Components
05:53
483
Fetching Data with RSCs
03:40
484
Submitting Data with Server Actions
07:07
485
Using the use() Hook for Promises & Data Fetching
07:20
486
The use() Hook In Action
05:32
487
Handling Errors
03:49
488
Theory Wrap Up
01:03
489
Module Introduction
03:06
490
Project Setup & Overview
01:43
491
Animating with CSS Transitions
07:42
492
Animating with CSS Animations
05:39
493
Introducing Framer Motion
03:49
494
Framer Motion Basics & Fundamentals
08:30
495
Animating Between Conditional Values
04:14
496
Adding Entry Animations
04:29
497
Animating Element Disappearances / Removal
03:52
498
Making Elements "Pop" With Hover Animations
04:14
499
Reusing Animation States
03:29
500
Nested Animations & Variants
07:47
501
Animating Staggered Lists
04:30
502
Animating Colors & Working with Keyframes
04:05
503
Imperative Animations
07:29
504
Animating Layout Changes
03:35
505
Orchestrating Multi-Element Animations
10:06
506
Combining Animations With Layout Animations
03:56
507
Animating Shared Elements
04:16
508
Re-triggering Animations via Keys
04:53
509
Scroll-based Animations
15:45
510
Module Introduction
00:56
511
Project Overview
00:51
512
Introducing Compound Components
11:05
513
Managing Multi-Component State with the Context API
10:58
514
Grouping Compound Components (
06:30
515
Adding Extra Components For Reusability & Configurability
08:37
516
Sharing Cross-Component State When Working With Compound Components
06:07
517
Introducing & Using Render Props
06:15
518
Adding Search To A React App
04:19
519
Implementing a Search Functionality With Help Of Render Props
04:19
520
Handling Keys Dynamically
02:43
521
Working with Debouncing
07:11
522
Module Introduction
01:24
523
What & Why?
03:24
524
Understanding Different Kinds Of Tests
04:05
525
What To Test & How To Test
01:30
526
Understanding the Technical Setup & Involved Tools
02:40
527
Running a First Test
07:17
528
Writing Our First Test
10:15
529
Grouping Tests Together With Test Suites
02:15
530
Testing User Interaction & State
14:01
531
Testing Connected Components
03:20
532
Testing Asynchronous Code
09:12
533
Working With Mocks
08:31
534
Summary & Further Resources
03:48
535
Module Introduction
01:27
536
What & Why?
06:35
537
Installing & Using TypeScript
06:39
538
Exploring the Base Types
03:56
539
Working with Array & Object Types
05:34
540
Understanding Type Inference
02:48
541
Using Union Types
02:49
542
Understanding Type Aliases
02:43
543
Functions & Function Types
05:20
544
Diving Into Generics
08:02
545
Creating a React + TypeScript Project
08:35
546
Working with Components & TypeScript
05:42
547
Working with Props & TypeScript
14:21
548
Adding a Data Model
09:10
549
Time to Practice: Exercise Time!
07:03
550
Form Submissions In TypeScript Projects
05:22
551
Working with refs & useRef
10:57
552
Working with "Function Props"
07:27
553
Managing State & TypeScript
05:14
554
Adding Styling
02:20
555
Time to Practice: Removing a Todo
09:28
556
The Context API & TypeScript
13:56
557
Summary
02:19
558
Bonus: Exploring tsconfig.json
05:47
559
Module Introduction
02:11
560
What Are React Hooks?
04:57
561
The Starting Project
04:52
562
Getting Started with useState()
09:21
563
More on useState() & State Updating
11:55
564
Array Destructuring
02:35
565
Multiple States
03:48
566
Rules of Hooks
02:22
567
Passing State Data Across Components
07:57
568
Time to Practice: Hooks Basics - Problem
01:04
569
Time to Practice: Hooks Basics - Solution
02:56
570
Sending Http Requests
07:17
571
useEffect() & Loading Data
08:07
572
Understanding useEffect() Dependencies
02:22
573
More on useEffect()
09:38
574
What's useCallback()?
05:29
575
Working with Refs & useRef()
05:22
576
Cleaning Up with useEffect()
03:22
577
Deleting Ingredients
02:30
578
Loading Errors & State Batching
08:49
579
Understanding useReducer()
09:44
580
Using useReducer() for the Http State
10:41
581
Working with useContext()
08:28
582
Performance Optimizations with useMemo()
10:31
583
Getting Started with Custom Hooks
13:46
584
Sharing Data Between Custom Hooks & Components
14:59
585
Using the Custom Hook
08:12
586
Wrap Up
03:06
587
Module Introduction
01:09
588
What Is React & Why Would You Use It?
05:38
589
React Projects - Requirements
02:10
590
Creating React Projects
03:28
591
Our Starting Project
03:29
592
Understanding How React Works
07:47
593
Building A First Custom Component
11:16
594
Outputting Dynamic Values
05:04
595
Reusing Components
06:01
596
Passing Data to Components with Props
06:16
597
CSS Styling & CSS Modules
10:08
598
Exercise & Another Component
06:32
599
Preparing the App For State Management
03:47
600
Adding Event Listeners
07:53
601
Working with State
10:01
602
Lifting State Up
09:09
603
The Special "children" Prop
07:22
604
State & Conditional Content
09:00
605
Adding a Shared Header & More State Management
07:52
606
Adding Form Buttons
03:35
607
Handling Form Submission
06:19
608
Updating State Based On Previous State
05:31
609
Outputting List Data
06:40
610
Adding a Backend to the React SPA
06:11
611
Sending a POST HTTP Request
04:13
612
Handling Side Effects with useEffect()
09:07
613
Handle Loading State
04:24
614
Understanding & Adding Routing
03:56
615
Adding Routes
05:37
616
Working with Layout Routes
04:09
617
Refactoring Route Components & More Nesting
05:36
618
Linking & Navigating
08:10
619
Data Fetching via loader()s
09:08
620
Submitting Data with action()s
11:09
621
Dynamic Routes
08:42
622
Module Summary
01:26
623
Roundup
01:11

Unlock unlimited learning

Get instant access to all 622 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

MobX In Depth With React(Hooks+TypeScript)

MobX In Depth With React(Hooks+TypeScript)

Sources: udemy
This is the most extensive course about MobX you will find online, After a few years of using MobX, I'm really passionate about it and really love it, I decided
2 hours 25 minutes 54 seconds
My first Remix app

My first Remix app

Sources: Build UI
Remix is a modern full-stack React framework built on the foundations of the web platform. It layers the latest innovations in the frontend ecosystem on top of the core URL-base...
5 hours 44 seconds
Python/Django + React QR Digital Menu Builder

Python/Django + React QR Digital Menu Builder

Sources: PythonYoga
Made for restaurants, cafes, pubs and hotels. Your customers can order from their table or from their couch at home.
10 hours 49 minutes 22 seconds
The Modern React 18 Bootcamp - A Complete Developer Guide

The Modern React 18 Bootcamp - A Complete Developer Guide

Sources: udemy
In this course we will take you from a React 18 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly
20 hours 35 minutes 57 seconds
React Summit 2024 - Amsterdam

React Summit 2024 - Amsterdam

Sources: reactsummit.com
React Summit is an in-person and remote-first (hybrid) conference dedicated to all things React. It gathers OSS authors, top trainers, and speakers, as well...
18 hours 56 minutes 36 seconds