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

Getting Started
1 Welcome To The Course!
2 What is React.js
3 Why React Instead Of Just JavaScript
4 Building Single-Page Applications (SPAs) with React
5 Exploring React.js Alternatives (Angular Vue)
6 Join our Online Learning Community
7 About This Course & Course Outline
8 The Two Ways (Paths) Of Taking This Course
9 Getting The Most Out Of This Course
10 Setting Up The Course Dev Environment (Code Editor)

JavaScript Refresher
11 Module Introduction
12 Understanding let and const
13 Arrow Functions
14 Exports and Imports
15 Understanding Classes
16 Classes, Properties and Methods
17 The Spread & Rest Operator
18 Destructuring
19 Reference and Primitive Types Refresher
20 Refreshing Array Functions
21 Wrap Up
22 Next-Gen JavaScript – Summary
23 JS Array Functions

React Basics & Working With Components
24 Module Introduction
25 What Are Components And Why Is React All About Them
26 React Code Is Written In A Declarative Way!
27 A Note About New React Projects & NodeJS
28 Creating a new React Project
29 The Starting Project
30 Analyzing a Standard React Project
31 Introducing JSX
32 How React Works
33 Building a First Custom Component
34 Writing More Complex JSX Code
35 Adding Basic CSS Styling
36 Outputting Dynamic Data & Working with Expressions in JSX
37 Passing Data via props
38 Adding normal JavaScript Logic to Components
39 Splitting Components Into Multiple Components
40 The Concept of Composition (children props)
41 A First Summary
42 A Closer Look At JSX
43 Organizing Component Files
44 An Alternative Function Syntax
45 Module Resources

React State & Working with Events
46 Module Introduction
47 Listening to Events & Working with Event Handlers
48 How Component Functions Are Executed
49 Working with State
50 A Closer Look at the useState Hook
51 State can be updated in many ways!
52 Adding Form Inputs
53 Listening to User Input
54 Working with Multiple States
55 Using One State Instead (And What’s Better)
56 Updating State That Depends On The Previous State
57 Handling Form Submission
58 Adding Two-Way Binding
59 Child-to-Parent Component Communication (Bottom-up)
60 Lifting The State Up
61 Controlled vs Uncontrolled Components & Stateless vs Stateful Components
62 Module Resources

Rendering Lists & Conditional Content
63 Module Introduction
64 Rendering Lists of Data
65 Using Stateful Lists
66 Understanding Keys
67 Outputting Conditional Content
68 Adding Conditional Return Statements
69 Demo App Adding a Chart
70 Adding Dynamic Styles
71 Wrap Up & Next Steps
72 Fixing a Small Bug
73 Module Resources

Styling React Components
74 Module Introduction
75 Setting Dynamic Inline Styles
76 Setting CSS Classes Dynamically
77 Introducing Styled Components
78 Styled Components & Dynamic Props
79 Styled Components & Media Queries
80 Using CSS Modules
81 Dynamic Styles with CSS Modules
82 Module Resources

Debugging React Apps
83 Module Introduction
84 Understanding React Error Messages
85 Analyzing Code Flow & Warnings
86 Working with Breakpoints
87 Using the React DevTools
88 Module Resources

Time to Practice A Complete Practice Project
89 Module Introduction
90 Adding a User Component
91 Adding a re-usable Card Component
92 Adding a re-usable Button Component
93 Managing the User Input State
94 Adding Validation & Resetting Logic
95 Adding a Users List Component
96 Managing a List Of Users via State
97 Adding The ErrorModal Component
98 Managing the Error State
99 Module Resources

Diving Deeper Working with Fragments, Portals & Refs
100 Module Introduction
101 JSX Limitations & Workarounds
102 Creating a Wrapper Component
103 React Fragments
104 Introducing React Portals
105 Working with Portals
106 Working with refs
107 Controlled vs Uncontrolled Components
108 Module Resources

Advanced Handling Side Effects, Using Reducers & Using the Context API
109 Module Introduction
110 What are Side Effects & Introducing useEffect
111 Using the useEffect() Hook
112 useEffect & Dependencies
113 What to add & Not to add as Dependencies
114 Using the useEffect Cleanup Function
115 useEffect Summary
116 Introducing useReducer & Reducers In General
117 Using the useReducer() Hook
118 useReducer & useEffect
119 Adding Nested Properties As Dependencies To useEffect
120 useReducer vs useState for State Management
121 Introducing React Context (Context API)
122 Using the React Context API
123 Tapping Into Context with the useContext Hook
124 Making Context Dynamic
125 Building & Using a Custom Context Provider Component
126 React Context Limitations
127 Learning the Rules of Hooks
128 Refactoring an Input Component
129 Diving into Forward Refs
130 Module Resources

Practice Project Building a Food Order App
131 Module Introduction
132 Starting Setup
133 Adding a Header Component
134 Adding the Cart Button Component
135 Adding a Meals Component
136 Adding Individual Meal Items & Displaying Them
137 Adding a Form
138 Fixing Form Input IDs
139 Working on the Shopping Cart Component
140 Adding a Modal via a React Portal
141 Managing Cart & Modal State
142 Adding a Cart Context
143 Using the Context
144 Adding a Cart Reducer
145 Working with Refs & Forward Refs
146 Outputting Cart Items
147 Working on a More Complex Reducer Logic
148 Making Items Removable
149 Using the useEffect Hook
150 Module Resources

A Look Behind The Scenes Of React & Optimization Techniques
151 Module Introduction
152 How React Really Works
153 Component Updates In Action
154 A Closer Look At Child Component Re-Evaluation
155 Preventing Unnecessary Re-Evaluations with React.memo()
156 Preventing Function Re-Creation with useCallback()
157 useCallback() and its Dependencies
158 A First Summary
159 A Closer Look At State & Components
160 Understanding State Scheduling & Batching
161 Optimizing with useMemo()
162 Module Resources

An Alternative Way Of Building Components Class-based Components
163 Module Introduction
164 What & Why
165 Adding a First Class-based Component
166 Working with State & Events
167 The Component Lifecycle (Class-based Components Only!)
168 Lifecycle Methods In Action
169 Class-based Components & Context
170 Class-based vs Functional Components A Summary
171 Introducing Error Boundaries
172 Module Resources

Sending Http Requests (e.g. Connecting to a Database)
173 Module Introduction
174 How To (Not) Connect To A Database
175 Using the Star Wars API
176 Our Starting App & Backend
177 Sending a GET Request
178 Using async await
179 Handling Loading & Data States
180 Handling Http Errors
181 Using useEffect() For Requests
182 Preparing The Project For The Next Steps
183 Sending a POST Request
184 Wrap Up
185 Module Resources

Building Custom React Hooks
186 Module Introduction
187 What are Custom Hooks
188 Creating a Custom React Hook Function
189 Using Custom Hooks
190 Configuring Custom Hooks
191 Onwards To A More Realistic Example
192 Building a Custom Http Hook
193 Using the Custom Http Hook
194 Adjusting the Custom Hook Logic
195 Using The Custom Hook In More Components
196 Module Resources

Working with Forms & User Input
197 Module Introduction
198 Our Starting Setup
199 What’s So Complex About Forms
200 Dealing With Form Submission & Getting User Input Values
201 Adding Basic Validation
202 Providing Validation Feedback
203 Handling the was touched State
204 React To Lost Focus
205 Refactoring & Deriving States
206 Managing The Overall Form Validity
207 Adding A Custom Input Hook
208 Re-Using The Custom Hook
209 A Challenge For You!
210 Applying Our Hook & Knowledge To A New Form
211 Summary
212 Bonus Using useReducer()
213 Module Resources

Practice Project Adding Http & Forms To The Food Order App
214 Module Introduction
215 Moving Meals Data To The Backend
216 Fetching Meals via Http
217 Handling the Loading State
218 Handling Errors
219 Adding A Checkout Form
220 Reading Form Values
221 Adding Form Validation
222 Submitting & Sending Cart Data
223 Adding Better User Feedback
224 Summary
225 Module Resources

Diving into Redux (An Alternative To The Context API)
226 Module Introduction
227 Another Look At State In React Apps
228 Redux vs React Context
229 How Redux Works
230 Exploring The Core Redux Concepts
231 More Redux Basics
232 Preparing a new Project
233 Creating a Redux Store for React
234 Providing the Store
235 Using Redux Data in React Components
236 Dispatching Actions From Inside Components
237 Redux with Class-based Components
238 Attaching Payloads to Actions
239 Working with Multiple State Properties
240 How To Work With Redux State Correctly
241 Redux Challenges & Introducing Redux Toolkit
242 Adding State Slices
243 Connecting Redux Toolkit State
244 Migrating Everything To Redux Toolkit
245 Working with Multiple Slices
246 Reading & Dispatching From A New Slice
247 Splitting Our Code
248 Summary
249 Module Resources

Advanced Redux
250 Module Introduction
251 Redux & Side Effects (and Asynchronous Code)
252 Refresher Practice Part 12
253 Refresher Practice Part 22
254 Redux & Async Code
255 Frontend Code vs Backend Code
256 Where To Put Our Logic
257 Using useEffect with Redux
258 A Problem with useEffect()
259 Handling Http States & Feedback with Redux
260 Using an Action Creator Thunk
261 Getting Started with Fetching Data
262 Finalizing the Fetching Logic
263 Exploring the Redux DevTools
264 Summary
265 Module Resources

Building a Multi-Page SPA with React Router
266 Module Introduction
267 What is Routing & Why
268 Installing React Router
269 Defining & Using Routes
270 Working with Links
271 Using NavLinks
272 Adding Dynamic Routes with Params
273 Extracting Route Params
274 Using Switch and exact For Configuring Routes
275 Working with Nested Routes
276 Redirecting The User
277 Time to Practice Onwards to a New Project
278 Practice Redirecting & Extracting Params
279 Practicing Nested Routes
280 Adding a Layout Wrapper Component
281 Adding Dummy Data & More Content
282 Outputting Data on the Details Page
283 Adding a Not Found Page
284 Implementing Programmatic (Imperative) Navigation
285 Preventing Possibly Unwanted Route Transitions with the Prompt Component
286 Working with Query Parameters
287 Getting Creative With Nested Routes
288 Writing More Flexible Routing Code
289 Sending & Getting Quote Data via Http
290 Adding the Comments Features
291 Upgrading To React Router v6
292 Better Data Fetching with React Router 6.4
293 Module Resources

Deploying React Apps
294 Module Introduction
295 Deployment Steps
296 Adding Lazy Loading
297 Building The Code For Production
298 Getting Started With Deployment (Uploading Files)
299 Exploring Routing Issues & Finishing Deployment
300 Module Resources

Adding Authentication To React Apps
301 Module Introduction
302 What, How & Why
303 More on Authentication Tokens
304 Starting Setup & First Steps
305 Adding User Signup
306 Showing Feedback To The User
307 Adding User Login
308 Managing The Auth State With Context
309 Using The Token For Requests To Protected Resources
310 Redirecting The User
311 Adding Logout
312 Protecting Frontend Pages
313 Persisting The User Authentication Status
314 Adding Auto-Logout
315 Finishing Steps
316 Module Resources

A (Pretty Deep Dive) Introduction to Next.js
317 Module Introduction
318 What is NextJS
319 Key Feature 1 Built-in Server-side Rendering (Improved SEO!)
320 Key Feature 2 Simplified Routing with File-based Routing
321 Key Feature 3 Build Fullstack Apps
322 Creating a New Next.js Project & App
323 Analyzing the Created Project
324 Adding First Pages
325 Adding Nested Paths & Pages (Nested Routes)
326 Creating Dynamic Pages (with Parameters)
327 Extracting Dynamic Parameter Values
328 Linking Between Pages
329 Onwards to a bigger Project!
330 Preparing the Project Pages
331 Outputting a List of Meetups
332 Adding the New Meetup Form
333 The _app.js File & Layout Wrapper
334 Using Programmatic (Imperative) Navigation
335 Adding Custom Components & CSS Modules
336 How Pre-rendering Works & Which Problem We Face
337 Data Fetching for Static Pages
338 More on Static Site Generation (SSG)
339 Exploring Server-side Rendering (SSR) with getServerSideProps
340 Working with Params for SSG Data Fetching
341 Preparing Paths with getStaticPaths & Working With Fallback Pages
342 Introducing API Routes
343 Working with MongoDB
344 Sending Http Requests To Our API Routes
345 Getting Data From The Database
346 Getting Meetup Details Data & Preparing Pages
347 Adding head Metadata
348 Deploying Next.js Projects
349 Using Fallback Pages & Re-deploying
350 Summary
351 Module Resources

Animating React Apps
352 Module Introduction
353 Preparing the Demo Project
354 Using CSS Transitions
355 Using CSS Animations
356 CSS Transition & Animations Limitations
357 Using ReactTransitionGroup
358 Using the Transition Component
359 Wrapping the Transition Component
360 Animation Timings
361 Transition Events
362 The CSSTransition Component
363 Customizing CSS Classnames
364 Animating Lists
365 Alternative Animation Packages
366 Wrap Up
367 Module Resources

Replacing Redux with React Hooks
368 Module Introduction
369 React 18 & This Section
370 Starting Project & Why You Would Replace Redux
371 Alternative Using the Context API
372 Toggling Favorites with the Context API
373 Context API Summary (and why NOT to use it instead of Redux)
374 Getting Started with a Custom Hook as a Store
375 Finishing the Store Hook
376 Creating a Concrete Store
377 Using the Custom Store
378 Custom Hook Store Summary
379 Optimizing the Custom Hook Store
380 Bonus Managing Multiple State Slices with the Custom Store Hook
381 Wrap Up
382 Module Resources

Testing React Apps (Unit Tests)
383 Module Introduction
384 What & Why
385 Understanding Different Kinds Of Tests
386 What To Test & How To Test
387 Understanding the Technical Setup & Involved Tools
388 Running a First Test
389 Writing Our First Test
390 Grouping Tests Together With Test Suites
391 Testing User Interaction & State
392 Testing Connected Components
393 Testing Asynchronous Code
394 Working With Mocks
395 Summary & Further Resources
396 Module Resources

React + TypeScript
397 Module Introduction
398 What & Why
399 Installing & Using TypeScript
400 Exploring the Base Types
401 Working with Array & Object Types
402 Understanding Type Inference
403 Using Union Types
404 Understanding Type Aliases
405 Functions & Function Types
406 Diving Into Generics
407 A Closer Look At Generics
408 Creating a React + TypeScript Project
409 Working with Components & TypeScript
410 Working with Props & TypeScript
411 Adding a Data Model
412 Time to Practice Exercise Time!
413 Form Submissions In TypeScript Projects
414 Working with refs & useRef
415 Working with Function Props
416 Managing State & TypeScript
417 Adding Styling
418 Time to Practice Removing a Todo
419 The Context API & TypeScript
420 Summary
421 Bonus Exploring tsconfig.json
422 Module Resources

Optional React Hooks Introduction & Summary
423 Module Introduction
424 What Are React Hooks
425 The Starting Project
426 React 18 & This Section
427 Getting Started with useState()
428 More on useState() & State Updating
429 Array Destructuring
430 Multiple States
431 Rules of Hooks
432 Passing State Data Across Components
433 Sending Http Requests
434 useEffect() & Loading Data
435 Understanding useEffect() Dependencies
436 More on useEffect()
437 What’s useCallback()
438 Working with Refs & useRef()
439 Cleaning Up with useEffect()
440 Deleting Ingredients
441 Loading Errors & State Batching
442 More on State Batching & State Updates
443 Understanding useReducer()
444 Using useReducer() for the Http State
445 Working with useContext()
446 Performance Optimizations with useMemo()
447 Getting Started with Custom Hooks
448 Sharing Data Between Custom Hooks & Components
449 Using the Custom Hook
450 Wrap Up
451 Module Resources

Optional React Summary & Core Feature Walkthrough
452 Module Introduction
453 What Is React
454 Why React
455 Building SPAs (Single Page Applications)
456 React Alternatives
457 Creating a React Project
458 Setting Up A Code Editor
459 React 18
460 Diving Into The Created Project
461 How React Works & Understanding Components
462 More Component Work & Styling with CSS Classes
463 Building & Re-Using Another Component
464 Working with props & Dynamic Content
465 Handling Events
466 Adding More Components
467 Introducing State
468 Working with Event Props (Passing Function As Props)
469 Use The Right React Router Version
470 Adding Routing
471 Adding Links & Navigation
472 Styling with CSS Modules
473 Outputting Lists of Data
474 Adding More React Components
475 Building Wrapper Components with props.children
476 Adding a Form
477 Getting User Input & Handling Form Submission
478 Preparing the App for Http
479 Sending a POST Request
480 Navigating Programmatically
481 Getting Started with Fetching Data
482 Using the useEffect() Hook
483 Introducing React Context
484 Context Logic & Different Ways Of Updating State
485 Using Context In Components
486 More Context Usage
487 Summary
488 Module Resources

Course Roundup
489 What Now Next Steps You Could Take!
490 Explore The React Ecosystem!
491 Finishing Thoughts
492 Bonus!

This Course Got Updated!
493 Course Update Overview, Explanation & Migration Guide
494 Course Update & Migration Guide
495 Old Course Content Download