React - The Complete Guide (incl Hooks, React Router, Redux)

Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Start

What's this course about?

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

Section: Getting Started

1. Introduction (1:49) Preview
2. What is React? (2:55) Preview
3. Real-World SPAs & React Web Apps (1:44) Preview
4. Writing our First React Code (15:07) Preview
5. Join our Online Learning Community (1:00) Preview
6. Why Should we Choose React? (2:03) Preview
7. React Alternatives (1:11) Preview
8. Understanding Single Page Applications and Multi Page Applications (3:38) Preview
9. Course Outline (7:28) Preview
10. How to get the Most out of This Course (2:29) Preview
11. Useful Resources & Links (1:00) Preview

Section: Refreshing Next Generation JavaScript (Optional)

12. Module Introduction (1:35) Start
13. Understanding "let" and "const" (3:05) Start
14. Arrow Functions (5:27) Start
15. Exports and Imports (4:43) Start
16. Understanding Classes (4:37) Start
17. Classes, Properties and Methods (3:03) Start
18. The Spread & Rest Operator (6:30) Start
19. Destructuring (3:13) Start
20. Reference and Primitive Types Refresher (4:26) Start
21. Refreshing Array Functions (2:45) Start
22. Wrap Up (0:52) Start
23. Next-gen JavaScript Summary (1:00) Start
24. JavaScript Array Functions (1:00) Start

Section: Understanding the Base Features & Syntax

25. Module Introduction (0:38) Start
26. The Build Workflow (8:00) Start
27. Using Create React App (6:09) Start
28. Understanding the Folder Structure (8:11) Start
29. Understanding Component Basics (5:32) Start
30. Understanding JSX (5:38) Start
31. JSX Restrictions (3:09) Start
32. Creating a Functional Component (8:09) Start
33. Working with Components & Re-Using Them (1:47) Start
34. Outputting Dynamic Content (3:02) Start
35. Working with Props (4:07) Start
36. Understanding the "children" Prop (2:56) Start
37. Understanding & Using State (7:17) Start
38. Handling Events with Methods (3:45) Start
39. Manipulating the State (5:03) Start
40. Using the useState() Hook for State Manipulation (13:51) Start
41. Stateless vs Stateful Components (3:08) Start
42. Passing Method References Between Components (7:05) Start
43. Adding Two Way Binding (6:51) Start
44. Adding Styling with Stylesheets (5:28) Start
45. Working with Inline Styles (4:15) Start
46. Assignment: Basics (Problem) (4:35) Start
47. Assignment: Basics (Solution) (22:28) Start
48. Useful Resources & Links (1:00) Start

Section: Working with Lists and Conditionals

49. Module Introduction (1:03) Start
50. Rendering Content Conditionally (10:09) Start
51. Handling Dynamic Content "The JavaScript Way" (4:49) Start
52. Outputting Lists (Intro) (1:31) Start
53. Outputting Lists (5:32) Start
54. Lists & State (4:12) Start
55. Updating State Immutably (2:39) Start
56. Lists & Keys (4:14) Start
57. Flexible Lists (7:34) Start
58. Wrap Up (1:55) Start
59. Assignment: Conditional Content & Lists (Problem) (5:25) Start
60. Assignment: Conditional Content & Lists (Solution) (17:16) Start
61. Useful Resources & Links (1:00) Start

Section: Styling React Components & Elements

62. Module Introduction (1:19) Start
63. Outlining the Problem Set (1:58) Start
64. Setting Styles Dynamically (3:19) Start
65. Setting Class Names Dynamically (7:09) Start
66. Adding and Using Radium (7:00) Start
67. Using Radium for Media Queries (5:02) Start
68. Introducing Styled Components (8:16) Start
69. More on Styled Components (5:51) Start
70. Styled Components & Dynamic Styles (5:27) Start
71. Working with CSS Modules (15:21) Start
72. CSS Modules & Media Queries (3:15) Start
73. More on CSS Modules (1:00) Start
74. Useful Resources & Links (1:00) Start

Section: Debugging React Apps

75. Module Introduction (0:55) Start
76. Understanding Error Messages (2:37) Start
77. Finding Logical Errors by using Dev Tools & Sourcemaps (4:17) Start
78. Working with the React Developer Tools (3:06) Start
79. Using Error Boundaries (React 16+) (8:13) Start
80. Wrap Up (0:56) Start
81. Useful Resources & Links (1:00) Start

Section: Diving Deeper into Components & React Internals

82. Module Introduction (0:42) Start
83. A Better Project Structure (7:24) Start
84. Splitting an App Into Components (15:54) Start
85. Comparing Stateless and Stateful Components (3:46) Start
86. Class-based vs Functional Components (5:15) Start
87. class Component Lifecycle Overview (5:04) Start
88. Component Creation Lifecycle in Action (6:46) Start
89. Component Update Lifecycle (for props Changes) (15:34) Start
90. Component Update Lifecycle (for state Changes) (3:49) Start
91. Using useEffect() in Functional Components (3:46) Start
92. Controlling the useEffect() Behavior (3:40) Start
93. Cleaning up with Lifecycle Hooks & useEffect() (6:48) Start
94. Cleanup Work with useEffect() - Example (1:37) Start
95. Using shouldComponentUpdate for Optimization (6:45) Start
96. Optimizing Functional Components with React.memo() (3:39) Start
97. When should you optimize? (2:18) Start
98. PureComponents instead of shouldComponentUpdate (3:35) Start
99. How React Updates the DOM (4:27) Start
100. Rendering Adjacent JSX Elements (9:00) Start
101. Must Read: Windows Users (1:00) Start
102. Using React.Fragment (1:29) Start
103. Higher Order Components (HOC) - Introduction (4:20) Start
104. Another Form of HOCs (5:56) Start
105. Passing Unknown Props (4:58) Start
106. Setting State Correctly (5:13) Start
107. Using PropTypes (6:53) Start
108. Using Refs (7:37) Start
109. Refs with React Hooks (4:34) Start
110. Understanding Prop Chain Problems (4:56) Start
111. Using the Context API (10:03) Start
112. contextType & useContext() (5:33) Start
113. Wrap Up (1:21) Start
114. Useful Resources & Links (1:00) Start

Section: A Real App: The Burger Builder (Basic Version)

115. About React Hooks (1:00) Start
116. Module Introduction (0:57) Start
117. Planning an App in React - Core Steps (2:32) Start
118. Planning our App - Layout and Component Tree (10:57) Start
119. Planning the State (4:13) Start
120. Setting up the Project (5:01) Start
121. Creating a Layout Component (10:01) Start
122. Starting Implementation of The Burger Builder Container (5:04) Start
123. Adding a Dynamic Ingredient Component (8:27) Start
124. Adding Prop Type Validation (2:49) Start
125. Starting the Burger Component (6:49) Start
126. Outputting Burger Ingredients Dynamically (9:44) Start
127. Calculating the Ingredient Sum Dynamically (5:10) Start
128. Adding the Build Control Component (7:26) Start
129. Outputting Multiple Build Controls (4:03) Start
130. Connecting State to Build Controls (8:22) Start
131. Removing Ingredients Safely (7:30) Start
132. Displaying and Updating the Burger Price (2:28) Start
133. Adding the Order Button (10:39) Start
134. Creating the Order Summary Modal (13:58) Start
135. Showing & Hiding the Modal (with Animation!) (6:59) Start
136. Implementing the Backdrop Component (8:22) Start
137. Adding a Custom Button Component (4:46) Start
138. Implementing the Button Component (4:54) Start
139. Adding the Price to the Order Summary (2:05) Start
140. Adding a Toolbar (9:11) Start
141. Using a Logo in our Application (6:39) Start
142. Adding Reusable Navigation Items (11:26) Start
143. Creating a Responsive Sidedrawer (7:44) Start
144. Working on Responsive Adjustments (4:34) Start
145. More about Responsive Adjustments (7:18) Start
146. Reusing the Backdrop (9:11) Start
147. Adding a Sidedrawer Toggle Button (6:27) Start
148. Adding a Hamburger Icon (2:20) Start
149. Improving the App - Introduction (1:11) Start
150. Prop Type Validation (1:17) Start
151. Improving Performance (8:48) Start
152. Using Component Lifecycle Methods (2:00) Start
153. Changing the Folder Structure (4:57) Start
154. Wrap Up (1:49) Start
155. Useful Resources & Links (1:00) Start

Section: Reaching out to the Web (Http / Ajax)

156. Module Introduction (1:03) Start
157. Understanding Http Requests in React (1:35) Start
158. Understanding our Project and Introducing Axios (4:15) Start
159. Creating a Http Request to GET Data (5:29) Start
160. Rendering Fetched Data to the Screen (3:46) Start
161. Transforming Data (2:40) Start
162. Making a Post Selectable (4:01) Start
163. Fetching Data on Update (without Creating Infinite Loops) (7:56) Start
164. POSTing Data to the Server (3:52) Start
165. Sending a DELETE Request (2:23) Start
166. Fixing a Bug (0:33) Start
167. Handling Errors Locally (3:23) Start
168. Adding Interceptors to Execute Code Globally (6:18) Start
169. Setting a Default Global Configuration for Axios (3:10) Start
170. Creating and Using Axios Instances (5:03) Start
171. Wrap Up (0:47) Start
172. Useful Resources & Links (1:00) Start

Section: Burger Builder Project: Accessing a Server

173. Module Introduction (1:52) Start
174. Creating the Firebase Project (3:26) Start
175. Creating the Axios Instance (2:42) Start
176. Sending a POST Request (7:46) Start
177. Displaying a Spinner while Sending a Request (9:20) Start
178. Handling Errors (12:04) Start
179. Retrieving Data from the Backend (11:22) Start
180. Removing Old Interceptors (8:24) Start
181. Useful Resources & Links (1:00) Start

Section: Multi-Page-Feeling in a Single-Page-App: Routing

182. Module Introduction (0:51) Start
183. Routing and SPAs (2:43) Start
184. Setting Up Links (4:22) Start
185. Setting Up the Router Package (4:46) Start
186. Preparing the Project For Routing (5:13) Start
187. Setting Up and Rendering Routes (5:18) Start
188. Rendering Components for Routes (1:57) Start
189. Switching Between Pages (2:17) Start
190. Using Links to Switch Pages (4:03) Start
191. Using Routing-Related Props (3:12) Start
192. The "withRouter" HOC & Route Props (3:44) Start
193. Absolute vs Relative Paths (2:34) Start
194. Styling the Active Route (5:55) Start
195. Passing Route Parameters (6:54) Start
196. Extracting Route Parameters (3:03) Start
197. Parsing Query Parameters & the Fragment (1:00) Start
198. Using Switch to Load a Single Route (3:33) Start
199. Navigating Programmatically (3:25) Start
200. Additional Information Regarding Active Links (2:22) Start
201. Understanding Nested Routes (7:55) Start
202. Creating Dynamic Nested Routes (4:38) Start
203. Redirecting Requests (2:45) Start
204. Conditional Redirects (2:47) Start
205. Using the History Prop to Redirect (Replace) (2:49) Start
206. Working with Guards (3:46) Start
207. Handling the 404 Case (Unknown Routes) (3:02) Start
208. Loading Routes Lazily (11:49) Start
209. Lazy Loading with React Suspense (16.6) (9:47) Start
210. Routing and Server Deployment (4:19) Start
211. Assignment: Routing (Problem) (4:53) Start
212. Assignment: Routing (Solution) (29:11) Start
213. Wrap Up (0:49) Start
214. Useful Resources & Links (1:00) Start

Section: Adding Routing to our Burger Project

215. Module Introduction (1:35) Start
216. Building the Checkout Container (11:32) Start
217. Setting Up Routing & Routesv (4:41) Start
218. Navigating to the Checkout Page (4:50) Start
219. Navigating Back & To Next Page (3:33) Start
220. Passing Ingredients via Query Params (5:27) Start
221. Navigating to the Contact Data Component (9:33) Start
222. Order Submission & Passing Data Between Pages (11:44) Start
223. Adding an Orders Page (5:34) Start
224. Implementing Navigation Links (5:35) Start
225. Fetching Orders (6:03) Start
226. Outputting the Orders (7:34) Start
227. Wrap Up (1:07) Start
228. Useful Resources & Links (1:00) Start

Section: Forms and Form Validation

229. Module Introduction (0:49) Start
230. Analyzing the App (1:49) Start
231. Creating a Custom Dynamic Input Component (11:30) Start
232. Setting Up a JS Config for the Form (7:34) Start
233. Dynamically Create Inputs based on JS Config (5:23) Start
234. Adding a Dropdown Component (3:52) Start
235. Handling User Input (7:43) Start
236. Handling Form Submission (4:11) Start
237. Adding Custom Form Validation (8:09) Start
238. Fixing a Common Validation Gotcha (1:18) Start
239. Adding Validation Feedback (5:12) Start
240. Improving Visual Feedback (2:18) Start
241. Handling Overall Form Validity (7:35) Start
242. Working on an Error (1:26) Start
243. Fixing a Bug (2:09) Start
244. Showing Error Messages (1:00) Start
245. Useful Resources & Links (1:00) Start

Section: Redux

246. Module Introduction (1:00) Start
247. Understanding State (1:50) Start
248. The Complexity of Managing State (2:42) Start
249. Understanding the Redux Flow (5:17) Start
250. Setting Up Reducer and Store (7:09) Start
251. Dispatching Actions (6:44) Start
252. Adding Subscriptions (2:47) Start
253. Connecting React to Redux (3:39) Start
254. Connecting the Store to React (8:19) Start
255. Dispatching Actions from within the Component (5:53) Start
256. Assignment: Dispatching Actions (Problem) (1:41) Start
257. Assignment: Dispatching Actions (Solution) (4:15) Start
258. Passing and Retrieving Data with Action (4:06) Start
259. Switch-Case in the Reducer (3:00) Start
260. Updating State Immutably (13:20) Start
261. Updating Arrays Immutably (8:39) Start
262. Immutable Update Patterns (1:00) Start
263. Outsourcing Action Types (5:19) Start
264. Combining Multiple Reducers (10:18) Start
265. Understanding State Types (4:50) Start
266. Assignment: Redux Basics (Problem) (1:45) Start
267. Assignment: Redux Basics (Solution) (14:23) Start
268. Combining Local UI State and Redux (7:39) Start
269. Wrap Up (1:42) Start
270. Useful Resources & Links (1:00) Start

Section: Adding Redux to our Project

271. Module Introduction (5:26) Start
272. Installing Redux and React Redux (4:08) Start
273. Basic Redux Setup (2:10) Start
274. Finishing the Reducer for Ingredients (6:35) Start
275. Connecting the Burger Builder Container to our Store (9:33) Start
276. Working on the Total Price Calculation (6:05) Start
277. Redux & UI State (4:08) Start
278. Adjusting Checkout and Contact Data (9:10) Start
279. Wrap Up (2:38) Start
280. Useful Resources & Links (1:00) Start

Section: Redux Advanced

281. Module Introduction (0:28) Start
282. Adding Middleware (7:47) Start
283. Using the Redux Devtools (7:32) Start
284. Executing Asynchronous Code - Introduction (1:52) Start
285. Introducing Action Creators (4:11) Start
286. Action Creators & Async Code (6:20) Start
287. Handling Asynchronous Code (8:13) Start
288. Restructuring Actions (6:55) Start
289. Where to Put Data Transforming Logic? (5:42) Start
290. Using Action Creators and Get State (3:27) Start
291. Using Utility Functions (7:20) Start
292. A Leaner Switch Case Statement (3:14) Start
293. An Alternative Folder Structure (2:22) Start
294. Diving Much Deeper (2:07) Start
295. Wrap Up (1:00) Start
296. Useful Resources & Links (1:00) Start

Section: Redux Advanced: Burger Project

297. Module Introduction (1:12) Start
298. Installing the Redux Devtools (2:56) Start
299. Preparing the Folder Structure (3:06) Start
300. Creating Action Creators (6:15) Start
301. Executing Asynchronous Code (4:05) Start
302. Fetching Ingredients Asynchronously (7:50) Start
303. Initializing Ingredients in the BurgerBuilder (5:18) Start
304. Changing the Order of our Ingredients Manually (2:12) Start
305. Adding Order Actions (6:40) Start
306. Connecting Contact Data Container & Actions (4:18) Start
307. The Order Reducer (5:30) Start
308. Working on Order Actions (4:28) Start
309. Redirect to Improve UX (3:08) Start
310. Combining Reducers (4:53) Start
311. Handling Purchases & Updating the UI (8:34) Start
312. Resetting the Price after Purchases (1:44) Start
313. Fetching Orders (via Redux) (13:45) Start
314. Checking our Implemented Functionalities (1:23) Start
315. Refactoring Reducers (8:11) Start
316. Refactoring Reducers Continued (7:55) Start
317. Wrap Up (0:57) Start
318. Useful Resources & Links (1:00) Start

Section: Adding Authentication to our Burger Project

319. Module Introduction (1:14) Start
320. Understanding Authentication in Single Page Applications (3:01) Start
321. Required App Adjustments (0:53) Start
322. Adding an Auth Form (13:11) Start
323. Adding Actions (6:28) Start
324. Getting a Token from the Backend (6:59) Start
325. Adding Sign-In (5:30) Start
326. Storing the Token (9:00) Start
327. Adding a Spinner (6:03) Start
328. Logging Users Out (6:50) Start
329. Accessing Protected Resources (11:17) Start
330. Updating the UI Depending on Auth State (7:32) Start
331. Adding a Logout Link (6:52) Start
332. Forwarding Unauthenticated Users (8:18) Start
333. Redirecting the User to the Checkout Page (13:12) Start
334. Persistent Auth State with localStorage (14:36) Start
335. Fixing Connect + Routing Errors (6:58) Start
336. Ensuring App Security (2:50) Start
337. Guarding Routes (5:34) Start
338. Displaying User Specific Orders (8:16) Start
339. Wrap Up (0:43) Start
340. Useful Resources & Links (1:00) Start

Section: Improving our Burger Project

341. Module Introduction (0:39) Start
342. Fixing the Redirect to the Frontpage (5:48) Start
343. Using updateObject in the Entire App (6:45) Start
344. Sharing the Validation Method (2:16) Start
345. Using Environment Variables (2:35) Start
346. Removing console.log()s (3:47) Start
347. Adding Lazy Loading (4:58) Start
348. Wrap Up (0:50) Start
349. Useful Resources & Links (1:00) Start

Section: Testing

350. Module Introduction (1:12) Start
351. What is Testing? (3:08) Start
352. Required Testing Tools (2:26) Start
353. What To Test? (2:50) Start
354. Writing our First Test (12:34) Start
355. Testing Components Continued (4:05) Start
356. Jest and Enzyme Documentations (6:28) Start
357. Testing Components Correctly (2:28) Start
358. Testing Containers (6:50) Start
359. How to Test Redux (5:09) Start
360. Wrap Up (1:27) Start
361. Useful Resources & Links (1:00) Start

Section: Deploying the App to the Web

362. Module Introduction (0:33) Start
363. Deployment Steps (2:58) Start
364. Building the Project (2:20) Start
365. Example: Deploying on Firebase (4:06) Start
366. Wrap Up (0:42) Start
367. Useful Resources & Links (1:00) Start

Section: Bonus: Working with Webpack

368. Module Introduction (1:24) Start
369. Introducing Webpack (1:14) Start
370. How Webpack works (2:39) Start
371. Basic Workflow Requirements (1:35) Start
372. Project & npm Setup (3:47) Start
373. Creating a Basic Folder & File Structure (3:12) Start
374. Creating the Basic React Application (10:55) Start
375. Installing Production Dependencies (1:10) Start
376. Setting Up the Basic Webpack Config (6:41) Start
377. Adding File Rules & Babel (7:07) Start
378. Loading CSS Files (5:01) Start
379. Loading Images & Injecting into HTML Page (5:36) Start
380. Production Workflow & Wrap Up (2:43) Start
381. Adding babel-polyfill (1:00) Start
382. Useful Resources & Links (1:00) Start

Section: Bonus: A Brief Introduction to Redux Saga

383. Module Introduction (1:29) Start
384. Installing Redux Saga (2:40) Start
385. Creating our First Saga (6:06) Start
386. Hooking the Saga Up (to the Store and Actions) (4:42) Start
387. Moving Logic from the Action Creator to a Saga (5:57) Start
388. Moving More Logic Into Sagas (10:02) Start
389. Handling Authentication with a Saga (11:07) Start
390. Handling Auto-Sign-In with a Saga (5:52) Start
391. Moving the BurgerBuilder Side Effects into a Saga (7:01) Start
392. Moving the Orders Side Effects into Sagas (12:34) Start
393. Why Sagas can be Helpful (1:17) Start
394. Diving Deeper into Sagas (6:55) Start
395. Useful Resources & Links (1:00) Start

Section: React Hooks

396. Introduction (0:40) Start
397. What are "React Hooks"? (7:08) Start
398. The Starting Project (4:57) Start
399. Getting Started with useState() (9:20) Start
400. More on useState() & State Updating (11:54) Start
401. Array Destructuring (2:34) Start
402. Multiple States (3:47) Start
403. Rules of Hooks (2:20) Start
404. Passing State Data Across Components (7:56) Start
405. Assignment: Hooks Basics (Problem) (1:03) Start
406. Assignment: Hooks Basics (Solution) (2:55) Start
407. Sending Http Requests (7:16) Start
408. useEffect() & Loading Data (8:06) Start
409. Understanding useEffect() Dependencies (2:21) Start
410. More on useEffect() (9:37) Start
411. What's useCallback()? (5:28) Start
412. Working with Refs & useRef() (5:21) Start
413. Cleaning Up with useEffect() (3:20) Start
414. Deleting Ingredients (2:28) Start
415. Loading Errors & State Batching (8:48) Start
416. Understanding useReducer() (9:43) Start
417. Using useReducer() for the Http State (10:40) Start
418. Working with useContext() (8:27) Start
419. Performance Optimizations with useMemo() (10:30) Start
420. Getting Started with Custom Hooks (13:45) Start
421. Sharing Data Between Custom Hooks & Components (14:58) Start
422. Using the Custom Hook (8:11) Start
423. Wrap Up (3:05) Start
424. Useful Resources & Links (1:00) Start

Section: Using Hooks in the Burger Builder

425. Introduction (1:08) Start
426. Converting the "App" Component (3:28) Start
427. Routing with React.lazy() (3:35) Start
428. Converting the Layout Component (2:39) Start
429. Converting withErrorHandler HOC (5:26) Start
430. Adjusting the Order & Checkout Containers (4:28) Start
431. Add Hooks to ContactData (5:38) Start
432. Converting the BurgerBuilder Container (4:25) Start
433. Adjusting Auth & Logout Components (6:01) Start
434. Using React.memo() & More! (4:30) Start
435. Adding a Custom Error Handling Hook (5:40) Start
436. Setting the right useEffect() Dependencies (4:58) Start
437. Working with useSelector() and useDispatch() (11:33) Start
438. Wrap Up (1:03) Start
439. Useful Resources & Links (1:00) Start

Section: Bonus: Replacing Redux with React Hooks

440. Module Introduction (0:48) Start
441. Starting Project & Why You Would Replace Redux (4:19) Start
442. Alternative: Using the Context API (7:13) Start
443. Toggling Favorites with the Context API (5:43) Start
444. Context API Summary (and why NOT to use it instead of Redux) (2:30) Start
445. Getting Started with a Custom Hook as a Store (8:11) Start
446. Finishing the Store Hook (5:53) Start
447. Creating a Concrete Store (4:11) Start
448. Using the Custom Store (5:40) Start
449. Custom Hook Store Summary (3:13) Start
450. Optimizing the Custom Hook Store (4:04) Start
451. Bonus: Managing Multiple State Slices with the Custom Store Hook (1:00) Start
452. Wrap Up (2:00) Start
453. Useful Resources & Links (1:00) Start

Section: Bonus: Next.js

454. Module Introduction (1:12) Start
455. Understanding Server Side Rendering (3:18) Start
456. Setting Up a Project (6:02) Start
457. Understanding the Basics (3:53) Start
458. Next.js & Components & Pages (2:48) Start
459. Styling our App in Next.js (2:47) Start
460. Handling (404) Errors (2:01) Start
461. A Special Lifecycle Hook (9:33) Start
462. Deploying our App (2:59) Start
463. Useful Resources & Links (1:00) Start

Section: Bonus: Animations in React Apps

464. Module Introduction (1:07) Start
465. Preparing the Demo Project (6:12) Start
466. Using CSS Transitions (4:34) Start
467. Using CSS Animations (5:32) Start
468. CSS Transition & Animations Limitations (4:04) Start
469. Using ReactTransitionGroup (12:19) Start
470. Using the Transition Component (3:24) Start
471. Wrapping the Transition Component (3:16) Start
472. Animation Timings (3:14) Start
473. Transition Events (2:33) Start
474. The CSSTransition Component (5:23) Start
475. Customizing CSS Classnames (2:30) Start
476. Animating Lists (6:53) Start
477. Alternative Animation Packages (4:28) Start
478. Wrap Up (1:57) Start
479. Useful Resources & Links (1:00) Start

Section: Bonus: Building the Burger CSS

480. Building the Burger CSS Code (24:55) Start

Section: Next Steps and Course Roundup

481. Module Introduction (1:00) Start
482. React Rocks! Where to find more Examples (1:24) Start
483. More Inspiration: Real-World Projects Built with React (1:23) Start
484. Static React Apps with Gatsby.js (2:31) Start
485. Introducing React Native (2:17) Start
486. Component Libraries (Example: Material UI) (2:36) Start
487. Smaller Apps with Preact (3:08) Start
488. Comparing React with Preact (5:50) Start
489. Congratulations (1:16) Start

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.