w3docs logo
Log in

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
  1. Courses
  3. React - The Complete Guide (incl Hooks, React Router, Redux)

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

Section: Understanding the Base Features & Syntax

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

Section: Working with Lists and Conditionals

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

Section: Styling React Components & Elements

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

Section: Debugging React Apps

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

Section: Diving Deeper into Components & React Internals

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

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

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

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

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

Section: Burger Builder Project: Accessing a Server

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

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

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

Section: Adding Routing to our Burger Project

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

Section: Forms and Form Validation

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

Section: Redux

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

Section: Adding Redux to our Project

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

Section: Redux Advanced

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

Section: Redux Advanced: Burger Project

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

Section: Adding Authentication to our Burger Project

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

Section: Improving our Burger Project

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

Section: Testing

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

Section: Deploying the App to the Web

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

Section: Bonus: Working with Webpack

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

Section: Bonus: A Brief Introduction to Redux Saga

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

Section: React Hooks

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

Section: Using Hooks in the Burger Builder

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

Section: Bonus: Replacing Redux with React Hooks

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

Section: Bonus: Next.js

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

Section: Bonus: Animations in React Apps

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

Section: Bonus: Building the Burger CSS

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

Section: Next Steps and Course Roundup

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

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.