React - The Complete Guide 2024

64h 33m 17s
English
Paid
December 7, 2024

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!

More

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 React - The Complete Guide 2024

Join premium to watch
Go to premium
# Title Duration
1 Welcome to the Course 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

Similar courses to React - The Complete Guide 2024

MERN 2024 Edition - MongoDB, Express, React and NodeJS
Master Full-Stack Web Development | Node, SQL, React, & More
Build a Jira clone

Build a Jira cloneCode With Antonio

Duration 16 hours 26 minutes 4 seconds
React - The Complete Guide

React - The Complete GuideudemyAcademind Pro

Duration 47 hours 42 minutes 41 seconds
REACT ROUTER (v6)

REACT ROUTER (v6)ui.dev (ex. Tyler McGinnis)

Duration 3 hours 15 minutes 27 seconds
My first Remix app

My first Remix appBuild UI

Duration 5 hours 44 seconds
Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)
React Formula - Learn Frontend Development

React Formula - Learn Frontend DevelopmentAlvin Zablan

Duration 23 hours 47 minutes 37 seconds
Working with React and Go (Golang)

Working with React and Go (Golang)udemy

Duration 24 hours 48 minutes 43 seconds