React - The Complete Guide
Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is improved throughout the course: The Burger Builder!
More
More details please!
JavaScript is the major driver of modern web applications since it's the only programming language which runs in the browser and hence allows you to provide highly reactive apps. You'll be able to achieve mobile-app like user experiences in the web.
But using JavaScript can be challenging - it quickly becomes overwhelming to create a nice web app with vanilla JavaScript and jQuery only.
React to the rescue!
React is all about components - basically custom HTML elements - with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it (or listen to your own events!) and re-use it as often as needed.
Need to display a list of users in your app? It's as simple as creating a "User" component and outputting it as often as needed.
This course will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux.
By the end of the course, you can build amazing React (single page) applications!
A detailed list with the course content can be found below.
Who's teaching you in this course?
My name is Maximilian Schwarzmüller, I'm a freelance web developer and worked with React in many projects. I'm also a 5-star rated instructor here on Udemy. I cover React's most popular alternatives - Vue and Angular - as well as many other topics. I know what I'm talking about and I know where the pain points can be found.
It's my goal to get you started with React as quick as possible and ensure your success. But I don't just focus on students getting started. I want everyone to benefit from my courses, that's why we'll dive deeply into React and why I made sure to also share knowledge that's helpful to advanced React developers.
Is this course for you?
This course is for you if ...
...you're just getting started with frontend/ JavaScript development and only got the JS basics set (no prior React or other framework experience is required!)
...you're experienced with Angular or Vue but want to dive into React
...know the React basics but want to refresh them and/ or dive deeper
...already worked quite a bit with React but want to dive deeper and see it all come together in a bigger app
What should you bring to succeed in that course?
HTML + CSS + JavaScript knowledge is required. You don't need to be an expert but the basics need to be set
NO advanced JavaScript knowledge is required, though you'll be able to move even quicker through the course if you know next-gen JavaScript features like ES6 Arrow functions. A short refresher about the most important next-gen features is provided in the course though.
What's inside the course?
The "What", "Why" and "How"
React Basics (Base features, syntax and concepts)
Managing state with class-based components and React Hooks
How to output lists and conditional content
Styling of React components
A deep dive into the internals of React and advanced component features
How to access Http content from within React apps (AJAX)
Redux, Redux, Redux ... from basics to advanced!
Forms and form validation in React apps
Authentication
An introduction to unit testing
An introduction to Next.js
React app deployment instructions
...and much more!
- 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
# | 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 |