React - The Complete Guide 2024

Name: React - The Complete Guide 2024
Price: 12.75 USD
Availability: InStock
Rating: 5 (1 reviews)

64h 33m 17s

English

Paid

December 7, 2024

React - The Complete Guide 2024 is a 623-lesson 64 hours 33 minutes self-paced course by Academind Pro (Maximilian Schwarzmüller), Udemy. Learn how React works through clear steps, hands-on tasks, and a project you build piece by piece.

Course facts

Lessons: 623
Duration: 64 hours 33 minutes
Level: All levels
Language: English
Updated
Instructor: Academind Pro (Maximilian Schwarzmüller), Udemy
Price: Premium

Learn how React works through clear steps, hands-on tasks, and a project you build piece by piece. You write code early, see results fast, and grow your skills as you go.

Why React Matters

Modern sites use JavaScript to update the page without reloads. This makes apps feel smooth and quick. But plain JavaScript can get hard to manage as your app grows.

React helps you manage this work through small pieces called components. You build a piece once, pass data into it, and use it anywhere in your app.

How Components Help You

Say you need to show a list of users. You make one User component and render it for each user. This keeps your code clear and easy to update.

What You Learn

This course starts with the basics. You learn what React is and when to use it. Then you move into advanced ideas like routing and Redux.

By the end, you can build clean React apps that load fast and handle real data.

Topics Covered

React setup, syntax, and core ideas
Working with state in components and Hooks
Lists, events, and conditional content
Styling components
Advanced React features
HTTP requests
Redux basics and advanced use
Forms and validation
Auth flows
Unit testing
Next.js intro
Deploying React apps

Your Instructor

Hi, I'm Maximilian Schwarzmüller. I work as a freelance web developer and use React in real projects. I also teach other major frameworks like Vue and Angular. I know where new learners often get stuck, and I guide you past those points.

Is This Course for You?

You should take this course if:

You know basic JavaScript and want to start with React
You know Angular or Vue and want to learn React too
You know some React and want a deeper look
You have used React before and want to build a larger app

What You Need Before You Start

Basic HTML, CSS, and JavaScript
No advanced JavaScript is required
You will get a short recap of helpful ES6 features

Who This Course Helps

Students who want to build fast, reactive sites
Anyone who wants to learn a tool used by large companies
Developers who want stronger frontend skills

What You Will Be Able to Do

Build quick and user‑friendly web apps
Use JavaScript features in a clear and safe way
Work on real projects or apply for frontend jobs
Use both Hooks and class components

Additional

https://github.com/academind/react-complete-guide-code

Who teaches React - The Complete Guide 2024?

Academind Pro (Maximilian Schwarzmüller)

Academind is the teaching brand of Maximilian Schwarzmüller (Max) and Manuel Lorenz, two German developers whose Udemy catalog has become one of the largest single-instructor presences on that platform. Max in particular is widely cited as one of the clearest teachers of the JavaScript framework landscape — his Angular, React, Vue, and Node.js courses have collectively taught millions of students.

The Academind Pro platform extends beyond Udemy with deeper, more comprehensive courses aimed at developers building real applications rather than picking up syntax. Course material covers the full modern web stack: React (including Next.js), Vue, Angular, Node.js, NestJS, TypeScript, Docker, AWS, React Native, Flutter, and the broader full-stack JavaScript ecosystem.

The CourseFlix listing under this source carries over 25 Academind Pro courses spanning that range. Material is paid; Academind Pro runs on per-course pricing on the original platform. Courses are taught in Max's signature thorough, build-an-application-with-me style — long-form, deeply project-based, and continuously updated as the underlying frameworks evolve.

Udemy

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

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

What lessons are included in React - The Complete Guide 2024?

0:00

#1: Welcome to the Course

All Course Lessons (623)

#	Lesson Title	Duration
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

What courses are similar to React - The Complete Guide 2024?

Updated 2y ago
Build a Shopping Cart App
By: Reed Barger
Gain expert skills to build and deploy an amazing React app. An epic training course that gives you the entire process to build and deploy your own top-tier e-c
1h 41m
Updated 2y ago
Redux
By: UI.dev (Tyler McGinnis)
There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme.
7h 13m
Updated 2y ago
React Supabase Full Course
By: Fireship
Build and deploy a full-stack, production-ready web app with Supabase, React, and Postgres.
1h 39m5/5
Updated 1y ago
Chakra UI Pro (Marketing + Application UI + E-Commerce)
By: Chakra UI Pro
A premium set of React components and flows for eCommerce, Marketing and Dashboards. Made by the creators of Chakra UI. Go next level with Chakra UI Pro.
Updated 2y ago
Mastering React With Interview Questions,eStore Project-2024
By: Udemy
Explore the comprehensive world of ReactJS as you dive into this course designed to master the fundamental and advanced facets of the latest React version (18).
16h 53m
Updated 2y ago
Build Web Apps with React & Firebase
By: Udemy
React is a hugely popular front-end library and React developers are always in hight demand in the web dev job market. In this course you'll learn how to use Re
23h 34m
Updated 3y ago
React Query - Essentials (v2)
By: Tanner Linsley
In this course, you will learn how to wield React Query as your go-to weapon of choice for defeating and overcoming the challenges and hurdles of server state.
2h 54m5/5

More courses by Academind Pro (Maximilian Schwarzmüller)

New
React - The Complete Guide
React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.
47h 42m5/5
Updated 2y ago
React Native - The Practical Guide [2024 Edition]
Mobile apps are one of the best ways to engage with users - no wonder everyone wants to build one! Wouldn't it be great if you could use your web development kn
28h 33m3/5
Updated 2y ago
ChatGPT - The Complete Guide
Unlock the power of AI and gain a huge productivity boost with our comprehensive online video course!
15h 37m5/5
Updated 3y ago
SQL - The Complete Guide (MySQL, PostgreSQL & more)
SQL is THE most important query language you can learn! It's used by many popular database management systems like MySQL or PostgreSQL. But it's also used by da
19h 35m5/5
FreeUpdated 3y ago
CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)
CSS - short for C ascading S tyle S heets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites.
20h 54m5/5
Classic
Understanding TypeScript - 2023 Edition
Learn what TypeScript is, why it really is a powerful Addition to JavaScript, what its Features are and how to use it!
14h 54m5/5

Frequently asked questions

What are the prerequisites for enrolling in this course?

To get the most out of this React course, students should have a solid understanding of JavaScript fundamentals. Familiarity with JavaScript concepts such as variables, functions, objects, and control structures will be beneficial. The course revisits these concepts, but having prior knowledge will aid in understanding React-specific topics more efficiently.

What kind of projects will I build during the course?

Throughout the course, students will engage in various demo projects and assignments. The primary application developed is the Burger Builder, which is continuously improved as new React concepts are introduced. This project helps in applying theoretical knowledge to practical scenarios, providing a comprehensive learning experience.

Who is the target audience for this course?

This course is designed for both beginners looking to learn React from scratch and developers who want to deepen their knowledge of React. It caters to a wide range of learners by covering fundamental topics and advanced concepts, making it suitable for anyone interested in mastering React for web development.

How does this course compare in depth and scope to other React courses?

With a total of 623 lessons, this course offers extensive coverage of React, from foundational concepts to advanced topics like component composition and state management. It emphasizes practical application through projects, making it more comprehensive in scope compared to shorter or less practice-oriented courses.

What specific React concepts and tools are covered in the course?

The course covers core React concepts such as components, JSX, props, state management, and hooks. It also delves into advanced topics like component composition, event handling, and managing dynamic content. Additionally, it includes best practices for project structure and styling strategies in React projects.

What topics are not covered in this course?

While the course provides a thorough understanding of React, it does not cover back-end technologies or server-side integrations. The focus remains on client-side development using React, so students interested in full-stack development may need to seek additional resources for server-side programming.

What is the expected time commitment to complete this course?

Given the course's extensive content, students should expect to invest a significant amount of time to complete all 623 lessons. The exact time can vary based on individual learning pace, but students should be prepared for a substantial commitment to thoroughly engage with all the materials and projects.