React - The Complete Guide

Name: React - The Complete Guide
Price: 9 USD
Availability: InStock

47h 42m 41s

English

Paid

May 18, 2023

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 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

Join premium to watch

Go to premium

#	Title	Duration
1	Welcome To The Course!	01:05
2	What is React.js?	04:38
3	Why React Instead Of "Just JavaScript"?	07:26
4	Building Single-Page Applications (SPAs) with React	01:34
5	Exploring React.js Alternatives (Angular / Vue)	03:34
6	About This Course & Course Outline	08:28
7	The Two Ways (Paths) Of Taking This Course	04:23
8	Getting The Most Out Of This Course	04:17
9	Setting Up The Course Dev Environment (Code Editor)	04:56
10	Module Introduction	01:36
11	Understanding "let" and "const"	03:06
12	Arrow Functions	05:28
13	Exports and Imports	04:44
14	Understanding Classes	04:38
15	Classes, Properties and Methods	03:04
16	The Spread & Rest Operator	06:31
17	Destructuring	03:14
18	Reference and Primitive Types Refresher	04:27
19	Refreshing Array Functions	02:46
20	Wrap Up	00:53
21	Module Introduction	03:45
22	What Are Components? And Why Is React All About Them?	07:11
23	React Code Is Written In A "Declarative Way"!	03:43
24	Creating a new React Project	12:24
25	Analyzing a Standard React Project	11:52
26	Introducing JSX	03:59
27	How React Works	04:23
28	Building a First Custom Component	09:01
29	Writing More Complex JSX Code	05:06
30	Adding Basic CSS Styling	04:48
31	Outputting Dynamic Data & Working with Expressions in JSX	08:21
32	Passing Data via "props"	12:39
33	Adding "normal" JavaScript Logic to Components	05:58
34	Splitting Components Into Multiple Components	10:47
35	Time to Practice: React & Component Basics - Problem	02:32
36	Time to Practice: React & Component Basics - Solution	07:26
37	The Concept of "Composition" ("children props")	13:08
38	A First Summary	04:07
39	A Closer Look At JSX	09:10
40	Organizing Component Files	03:06
41	An Alternative Function Syntax	02:40
42	Module Introduction	02:28
43	Listening to Events & Working with Event Handlers	09:40
44	How Component Functions Are Executed	05:45
45	Working with "State"	10:54
46	A Closer Look at the "useState" Hook	07:37
47	Adding Form Inputs	09:59
48	Listening to User Input	05:18
49	Working with Multiple States	06:45
50	Using One State Instead (And What's Better)	04:52
51	Updating State That Depends On The Previous State	04:38
52	Handling Form Submission	04:55
53	Adding Two-Way Binding	02:58
54	Child-to-Parent Component Communication (Bottom-up)	13:57
55	Lifting The State Up	07:01
56	Time to Practice: Working with Events & State - Problem	02:33
57	Time to Practice: Working with Events & State - Solution	08:43
58	Controlled vs Uncontrolled Components & Stateless vs Stateful Components	05:23
59	Module Introduction	00:46
60	Rendering Lists of Data	07:08
61	Using Stateful Lists	04:31
62	Understanding "Keys"	07:00
63	Time to Practice: Working with Lists - Problem	01:16
64	Time to Practice: Working with Lists - Solution	04:45
65	Outputting Conditional Content	06:48
66	Adding Conditional Return Statements	05:22
67	Time to Practice: Conditional Content - Problem	01:02
68	Time to Practice: Conditional Content - Solution	05:48
69	Demo App: Adding a Chart	07:26
70	Adding Dynamic Styles	07:29
71	Wrap Up & Next Steps	11:05
72	Module Introduction	03:44
73	Setting Dynamic Inline Styles	09:00
74	Setting CSS Classes Dynamically	05:01
75	Introducing Styled Components	09:47
76	Styled Components & Dynamic Props	08:32
77	Styled Components & Media Queries	02:28
78	Using CSS Modules	06:59
79	Dynamic Styles with CSS Modules	05:32
80	Module Introduction	01:35
81	Understanding React Error Messages	06:20
82	Analyzing Code Flow & Warnings	05:54
83	Working with Breakpoints	06:04
84	Using the React DevTools	06:00
85	Module Introduction	02:57
86	Adding a "User" Component	07:07
87	Adding a re-usable "Card" Component	08:38
88	Adding a re-usable "Button" Component	03:51
89	Managing the User Input State	04:58
90	Adding Validation & Resetting Logic	04:35
91	Adding a Users List Component	10:46
92	Managing a List Of Users via State	09:28
93	Adding The "ErrorModal" Component	08:05
94	Managing the Error State	08:58
95	Module Introduction	00:50
96	JSX Limitations & Workarounds	08:47
97	Creating a Wrapper Component	04:15
98	React Fragments	02:43
99	Introducing React Portals	04:21
100	Working with Portals	12:25
101	Working with "ref"s	11:48
102	Controlled vs Uncontrolled Components	03:05
103	Module Introduction	01:36
104	What are "Side Effects" & Introducing useEffect	06:53
105	Using the useEffect() Hook	10:59
106	useEffect & Dependencies	09:02
107	Using the useEffect Cleanup Function	08:56
108	useEffect Summary	03:39
109	Introducing useReducer & Reducers In General	09:18
110	Using the useReducer() Hook	14:13
111	useReducer & useEffect	09:53
112	useReducer vs useState for State Management	03:36
113	Introducing React Context (Context API)	07:23
114	Using the React Context API	10:45
115	Tapping Into Context with the useContext Hook	01:43
116	Making Context Dynamic	04:36
117	Building & Using a Custom Context Provider Component	09:08
118	React Context Limitations	02:46
119	Learning the "Rules of Hooks"	07:11
120	Refactoring an Input Component	06:07
121	Diving into "Forward Refs"	13:40
122	Module Introduction	02:50
123	Starting Setup	04:11
124	Adding a "Header" Component	09:08
125	Adding the "Cart" Button Component	05:27
126	Adding a "Meals" Component	09:09
127	Adding Individual Meal Items & Displaying Them	09:31
128	Adding a Form	10:10
129	Working on the "Shopping Cart" Component	05:11
130	Adding a Modal via a React Portal	07:43
131	Managing Cart & Modal State	10:49
132	Adding a Cart Context	07:44
133	Using the Context	04:53
134	Adding a Cart Reducer	10:46
135	Working with Refs & Forward Refs	10:50
136	Outputting Cart Items	07:24
137	Working on a More Complex Reducer Logic	05:30
138	Making Items Removable	08:19
139	Using the useEffect Hook	07:45
140	Module Introduction	02:17
141	How React Really Works	07:23
142	Component Updates In Action	06:52
143	A Closer Look At Child Component Re-Evaluation	10:42
144	Preventing Unnecessary Re-Evaluations with React.memo()	11:37
145	Preventing Function Re-Creation with useCallback()	04:14
146	useCallback() and its Dependencies	07:11
147	A First Summary	04:02
148	A Closer Look At State & Components	03:31
149	Understanding State Scheduling & Batching	09:06
150	Optimizing with useMemo()	09:02
151	Module Introduction	02:11
152	What & Why	04:54
153	Adding a First Class-based Component	06:55
154	Working with State & Events	11:39
155	The Component Lifecycle (Class-based Components Only!)	05:21
156	Lifecycle Methods In Action	11:47
157	Class-based Components & Context	04:54
158	Class-based vs Functional Components: A Summary	02:43
159	Introducing Error Boundaries	09:53
160	Module Introduction	01:47
161	How To (Not) Connect To A Database	03:33
162	Our Starting App & Backend	03:53
163	Sending a GET Request	10:36
164	Using async / await	02:02
165	Handling Loading & Data States	04:46
166	Handling Http Errors	11:14
167	Using useEffect() For Requests	06:28
168	Preparing The Project For The Next Steps	06:17
169	Sending a POST Request	09:17
170	Wrap Up	01:17
171	Module Introduction	01:26
172	What are "Custom Hooks"?	01:45
173	Creating a Custom React Hook Function	06:40
174	Using Custom Hooks	04:46
175	Configuring Custom Hooks	05:52
176	Onwards To A More Realistic Example	06:46
177	Building a Custom Http Hook	09:17
178	Using the Custom Http Hook	07:46
179	Adjusting the Custom Hook Logic	08:46
180	Using The Custom Hook In More Components	08:54
181	Module Introduction	01:37
182	Our Starting Setup	01:42
183	What's So Complex About Forms?	05:09
184	Dealing With Form Submission & Getting User Input Values	10:05
185	Adding Basic Validation	03:58
186	Providing Validation Feedback	03:55
187	Handling the "was touched" State	05:41
188	React To Lost Focus	04:16
189	Refactoring & Deriving States	09:08
190	Managing The Overall Form Validity	07:31
191	Time to Practice: Forms - Problem	01:23
192	Time to Practice: Forms - Solution	05:46
193	Adding A Custom Input Hook	12:45
194	Re-Using The Custom Hook	02:55
195	A Challenge For You!	01:42
196	Applying Our Hook & Knowledge To A New Form	11:06
197	Summary	03:18
198	Bonus: Using useReducer()	08:23
199	Module Introduction	03:22
200	Moving "Meals" Data To The Backend	04:06
201	Fetching Meals via Http	09:28
202	Handling the Loading State	04:01
203	Handling Errors	07:45
204	Adding A Checkout Form	10:48
205	Reading Form Values (4:51)	04:52
206	Adding Form Validation	12:05
207	Submitting & Sending Cart Data	06:49
208	Adding Better User Feedback	09:29
209	Summary	01:32
210	Module Introduction	01:06
211	Another Look At State In React Apps	05:15
212	Redux vs React Context	06:20
213	How Redux Works	05:49
214	Exploring The Core Redux Concepts	15:15
215	More Redux Basics	03:05
216	Preparing a new Project	02:00
217	Creating a Redux Store for React	04:55
218	Providing the Store	03:14
219	Using Redux Data in React Components	05:09
220	Dispatching Actions From Inside Components	03:34
221	Redux with Class-based Components	10:21
222	Attaching Payloads to Actions	04:16
223	Working with Multiple State Properties	06:20
224	How To Work With Redux State Correctly	05:08
225	Redux Challenges & Introducing Redux Toolkit	05:28
226	Adding State Slices	08:12
227	Connecting Redux Toolkit State	04:48
228	Migrating Everything To Redux Toolkit	06:20
229	Working with Multiple Slices	11:51
230	Reading & Dispatching From A New Slice	06:57
231	Splitting Our Code	05:04
232	Summary	03:54
233	Module Introduction	00:40
234	Redux & Side Effects (and Asynchronous Code)	03:28
235	Refresher / Practice: Part 1/2	20:13
236	Refresher / Practice: Part 2/2	18:01
237	Redux & Async Code	04:29
238	Frontend Code vs Backend Code	05:41
239	Where To Put Our Logic	09:00
240	Using useEffect with Redux	06:01
241	Handling Http States & Feedback with Redux	12:50
242	Using an Action Creator Thunk	12:08
243	Getting Started with Fetching Data	08:40
244	Finalizing the Fetching Logic	05:17
245	Exploring the Redux DevTools	05:38
246	Summary	01:54
247	Module Introduction	03:22
248	Routing: Multiple Pages in Single-Page Applications	03:16
249	Project Setup & Installing React Router	03:07
250	Defining Routes	07:43
251	Adding a Second Route	02:08
252	Exploring an Alternative Way of Defining Routes	03:02
253	Navigating between Pages with Links	04:37
254	Layouts & Nested Routes	08:25
255	Showing Error Pages with errorElement	03:59
256	Working with Navigation Links (NavLink)	06:38
257	Navigating Programmatically	02:42
258	Defining & Using Dynamic Routes	07:45
259	Adding Links for Dynamic Routes	03:23
260	Understanding Relative & Absolute Paths	10:39
261	Working with Index Routes	01:57
262	Onwards to a new Project Setup	03:17
263	Time to Practice: Problem	01:26
264	Time to Practice: Solution	23:17
265	Data Fetching with a loader()	07:36
266	Using Data From A Loader In The Route Component	02:52
267	More loader() Data Usage	03:18
268	Where Should loader() Code Be Stored?	02:19
269	When Are loader() Functions Executed?	02:49
270	Reflecting The Current Navigation State in the UI	02:54
271	Returning Responses in loader()s	04:02
272	Which Kind Of Code Goes Into loader()s?	01:15
273	Error Handling with Custom Errors	04:57
274	Extracting Error Data & Throwing Responses	06:25
275	The json() Utility Function	02:08
276	Dynamic Routes & loader()s	07:33
277	The useRouteLoaderData() Hook & Accessing Data From Other Routes	07:41
278	Planning Data Submission	02:23
279	Working with action() Functions	09:09
280	Submitting Data Programmatically	09:07
281	Updating the UI State Based on the Submission Status	04:03
282	Validating User Input & Outputting Validation Errors	06:58
283	Reusing Actions via Request Methods	07:56
284	Behind-the-Scenes Work with useFetcher()	09:12
285	Deferring Data Fetching with defer()	09:08
286	Controlling Which Data Should Be Deferred	07:23
287	Module Summary	02:58
288	Module Introduction	01:11
289	How Authentication Works	09:09
290	Project Setup & Route Setup	03:47
291	Working with Query Parameters	07:36
292	Implementing the Auth Action	11:41
293	Validating User Input & Outputting Validation Errors	04:19
294	Adding User Login	01:56
295	Attaching Auth Tokens to Outgoing Requests	06:33
296	Adding User Logout	04:22
297	Updating the UI Based on Auth Status	06:06
298	Adding Route Protection	02:47
299	Adding Automatic Logout	05:11
300	Managing the Token Expiratoin	07:29
301	Module Introduction	01:41
302	Deployment Steps	03:36
303	Understanding Lazy Loading	04:48
304	Adding Lazy Loading	09:12
305	Building the Code For Production	02:23
306	Deployment Example	06:45
307	Server-side Routing & Required Configuration	04:07
308	Module Introduction	02:09
309	What is NextJS?	04:46
310	Key Feature 1: Built-in Server-side Rendering (Improved SEO!)	06:38
311	Key Feature 2: Simplified Routing with File-based Routing	03:14
312	Key Feature 3: Build Fullstack Apps	01:51
313	Creating a New Next.js Project & App	05:40
314	Analyzing the Created Project	02:53
315	Adding First Pages	06:06
316	Adding Nested Paths & Pages (Nested Routes)	03:48
317	Creating Dynamic Pages (with Parameters)	03:37
318	Extracting Dynamic Parameter Values	04:08
319	Linking Between Pages	07:14
320	Onwards to a bigger Project!	03:33
321	Preparing the Project Pages	03:43
322	Outputting a List of Meetups	05:04
323	Adding the New Meetup Form	03:55
324	The "_app.js" File & Layout Wrapper	06:18
325	Using Programmatic (Imperative) Navigation	03:48
326	Adding Custom Components & CSS Modules	10:01
327	How Pre-rendering Works & Which Problem We Face	05:53
328	Data Fetching for Static Pages	08:57
329	More on Static Site Generation (SSG)	05:45
330	Exploring Server-side Rendering (SSR) with "getServerSideProps"	06:28
331	Working with Params for SSG Data Fetching	05:15
332	Preparing Paths with "getStaticPaths" & Working With Fallback Pages	07:17
333	Introducing API Routes	06:21
334	Working with MongoDB	09:33
335	Sending Http Requests To Our API Routes	06:50
336	Getting Data From The Database	07:10
337	Getting Meetup Details Data & Preparing Pages	09:42
338	Adding "head" Metadata	09:20
339	Deploying Next.js Projects	12:27
340	Using Fallback Pages & Re-deploying	04:14
341	Summary	02:16
342	Module Introduction	02:59
343	Preparing the Demo Project	04:57
344	Using CSS Transitions	04:35
345	Using CSS Animations	05:33
346	CSS Transition & Animations Limitations	04:05
347	Using ReactTransitionGroup	12:20
348	Using the Transition Component	03:25
349	Wrapping the Transition Component	03:17
350	Animation Timings	03:15
351	Transition Events	02:34
352	The CSSTransition Component	05:24
353	Customizing CSS Classnames	02:31
354	Animating Lists	06:54
355	Alternative Animation Packages	04:30
356	Wrap Up	01:58
357	Module Introduction	01:02
358	Starting Project & Why You Would Replace Redux	04:20
359	Alternative: Using the Context API	07:14
360	Toggling Favorites with the Context API	05:44
361	Context API Summary (and why NOT to use it instead of Redux)	02:31
362	Getting Started with a Custom Hook as a Store	08:12
363	Finishing the Store Hook	05:54
364	Creating a Concrete Store	04:12
365	Using the Custom Store	05:41
366	Custom Hook Store Summary	03:14
367	Optimizing the Custom Hook Store	04:05
368	Wrap Up	02:01
369	Module Introduction	01:24
370	What & Why?	03:24
371	Understanding Different Kinds Of Tests	04:05
372	What To Test & How To Test	01:30
373	Understanding the Technical Setup & Involved Tools	02:40
374	Running a First Test	07:17
375	Writing Our First Test	10:15
376	Grouping Tests Together With Test Suites	02:15
377	Testing User Interaction & State	14:01
378	Testing Connected Components	03:20
379	Testing Asynchronous Code	09:12
380	Working With Mocks	08:31
381	Summary & Further Resources	03:48
382	Module Introduction	01:27
383	What & Why?	06:35
384	Installing & Using TypeScript	06:39
385	Exploring the Base Types	03:56
386	Working with Array & Object Types	05:34
387	Understanding Type Inference	02:48
388	Using Union Types	02:49
389	Understanding Type Aliases	02:43
390	Functions & Function Types	05:20
391	Diving Into Generics	08:02
392	Creating a React + TypeScript Project	08:35
393	Working with Components & TypeScript	05:42
394	Working with Props & TypeScript	14:21
395	Adding a Data Model	09:10
396	Time to Practice: Exercise Time!	07:03
397	Form Submissions In TypeScript Projects	05:22
398	Working with refs & useRef	10:57
399	Working with "Function Props"	07:27
400	Managing State & TypeScript	05:14
401	Adding Styling	02:20
402	Time to Practice: Removing a Todo	09:28
403	The Context API & TypeScript	13:56
404	Summary	02:19
405	Bonus: Exploring tsconfig.json	05:47
406	Module Introduction	02:11
407	What Are React Hooks?	04:57
408	The Starting Project	04:52
409	Getting Started with useState()	09:21
410	More on useState() & State Updating	11:55
411	Array Destructuring	02:35
412	Multiple States	03:48
413	Rules of Hooks	02:21
414	Passing State Data Across Components	07:57
415	Time to Practice: Hooks Basics - Problem	01:04
416	Time to Practice: Hooks Basics - Solution	02:56
417	Sending Http Requests	07:17
418	useEffect() & Loading Data	08:07
419	Understanding useEffect() Dependencies	02:22
420	More on useEffect()	09:38
421	What's useCallback()?	05:29
422	Working with Refs & useRef()	05:22
423	Cleaning Up with useEffect()	03:22
424	Deleting Ingredients	02:29
425	Loading Errors & State Batching	08:49
426	Understanding useReducer()	09:44
427	Using useReducer() for the Http State	10:41
428	Working with useContext()	08:28
429	Performance Optimizations with useMemo()	10:31
430	Getting Started with Custom Hooks	13:46
431	Sharing Data Between Custom Hooks & Components	14:59
432	Using the Custom Hook	08:12
433	Wrap Up	03:06
434	Module Introduction	01:09
435	What Is React & Why Would You Use It?	05:38
436	React Projects - Requirements	02:10
437	Creating React Projects	03:28
438	Out Starting Project	03:29
439	Understanding How React Works	07:47
440	Building A First Custom Component	11:16
441	Outputting Dynamic Values	05:04
442	Reusing Components	06:01
443	Passing Data to Components with Props	06:16
444	CSS Styling & CSS Modules	10:08
445	Exercise & Another Component	06:32
446	Preparing the App For State Management	03:47
447	Adding Event Listeners	07:53
448	Working with State	10:01
449	Lifting State Up	09:09
450	The Special "children" Prop	07:22
451	State & Conditional Content	09:00
452	Adding a Shared Header & More State Management	07:52
453	Adding Form Buttons	03:35
454	Handling Form Submission	06:19
455	Updating State Based On Previous State	05:31
456	Outputting List Data	06:40
457	Adding a Backend to the React SPA	06:11
458	Sending a POST HTTP Request	04:13
459	Handling Side Effects with useEffect()	09:07
460	Handle Loading State	04:24
461	Understanding & Adding Routing	03:56
462	Adding Routes	05:37
463	Working with Layout Routes	04:09
464	Refactoring Route Components & More Nesting	05:36
465	Linking & Navigating	08:10
466	Data Fetching via loader()s	09:08
467	Submitting Data with action()s	11:09
468	Dynamic Routes	08:42
469	Module Summary	01:26
470	What Now? Next Steps You Could Take!	01:11
471	Explore The React Ecosystem!	03:20
472	Finishing Thoughts	04:28

React - The Complete Guide

Watch Online React - The Complete Guide

Similar courses to React - The Complete Guide

Fullstack ASP.NET Core and React Masterclass | Learnify

Build fancy landing pages with React and Threejs

MERN React Node Next.js Multi User SEO Blogging Platform

MERN eCommerce From Scratch

Master Custom React Hooks with TypeScript

React Testing Library and Jest: The Complete Guide

The Official React Query Course - query.gg

The essential guide to Firebase with React.

Learn React Hooks By Building A Real Application

Crash Course: Build a Full-Stack Web App in a Weekend!