React – The Complete Guide 2024 (incl. Next.js, Redux)

Getting Started
1 Welcome To The Course!
2 What is React.js And Why Would You Use It
3 ReactJS vs Vanilla JavaScript Why Use React
4 Editing Our First React App
5 About This Course & Course Outline
6 The Two Ways (Paths) Of Taking This Course
7 Getting The Most Out Of This Course
8 Join our Online Learning Community
9 Creating React Projects
10 Why Do You Need A Special Project Setup
11 Course Setup

JavaScript Refresher
12 Module Introduction
13 Starting Project
14 Adding JavaScript To A Page & How React Projects Differ
15 React Projects Use a Build Process
16 import & export
17 Revisiting Variables & Values
18 Revisiting Operators
19 Revisiting Functions & Parameters
20 Exercise Working with Functions
21 Arrow Functions
22 More on the Arrow Function Syntax
23 Revisiting Objects & Classes
24 Arrays & Array Methods like map()
25 Exercise Array Methods
26 Destructuring
27 Destructuring in Function Parameter Lists
28 The Spread Operator
29 Revisiting Control Structures
30 Manipulating the DOM – Not With React!
31 Using Functions as Values
32 Defining Functions Inside Of Functions
33 Reference vs Primitive Values
34 Next-Gen JavaScript – Summary
35 JS Array Functions
36 Module Resources

React Essentials – Components, JSX, Props, State & More
37 Module Introduction
38 It’s All About Components! [Core Concept]
39 Setting Up The Starting Project
40 JSX & React Components [Core Concept]
41 Creating & Using a First Custom Component
42 A Closer Look Components & File Extensions
43 Building & Using a Component
44 How React Handles Components & How It Builds A Component Tree [Core Concept]
45 Components & JSX
46 Using & Outputting Dynamic Values [Core Concept]
47 Setting HTML Attributes Dynamically & Loading Image Files
48 Outputting Dynamic Content
49 Making Components Reusable with Props [Core Concept]
50 Alternative Props Syntaxes
51 More Prop Syntaxes
52 Working with Props
53 Dynamic Values & Props
54 Best Practice Storing Components in Files & Using a Good Project Structure
55 Storing Component Style Files Next To Components
56 Component Composition The special children Prop [Core Concept]
57 Component Composition
58 Reacting to Events [Core Concept]
59 Passing Functions as Values to Props
60 Reacting to Events
61 Passing Custom Arguments to Event Functions
62 Configuring Event Handlers
63 Best Practices & Event Handling
64 How NOT to Update the UI – A Look Behind The Scenes of React [Core Concept]
65 Managing State & Using Hooks [Core Concept]
66 Working with State
67 Deriving & Outputting Data Based on State
68 State & Computed Values
69 Rendering Content Conditionally
70 Conditional Content
71 CSS Styling & Dynamic Styling
72 Dynamic Styling
73 Outputting List Data Dynamically
74 Dynamic List Content
75 Conditional Content & Dynamic Lists
76 Module Summary

React Essentials – Deep Dive
77 Module Introduction
78 You Don’t Have To Use JSX!
79 Working with Fragments
80 Using Fragments
81 When Should You Split Components
82 Splitting Components By Feature & State
83 Problem Props Are Not Forwarded To Inner Elements
84 Forwarding Props To Wrapped Elements
85 Forwarding Props
86 Working with Multiple JSX Slots
87 Setting Component Types Dynamically
88 Setting Default Prop Values
89 Creating Flexible Components
90 Onwards To The Next Project & Advanced Concepts
91 Not All Content Must Go Into Components
92 Closer Look public vs assets for Image Storage
93 New Project First Steps Towards Our Tic-Tac-Toe Game
94 Concept Repetition Splitting Components & Building Reusable Components
95 Concept Repetition Working with State
96 Component Instances Work In Isolation!
97 Conditional Content & A Suboptimal Way Of Updating State
98 Best Practice Updating State Based On Old State Correctly
99 User Input & Two-Way-Binding
100 Two-Way-Binding
101 Rendering Multi-Dimensional Lists
102 Best Practice Updating Object State Immutably
103 Lifting State Up [Core Concept]
104 Avoid Intersecting States!
105 Prefer Computed Values & Avoid Unnecessary State Management
106 Deriving State From Props
107 Sharing State Across Components
108 Reducing State Management & Identifying Unnecessary State
109 Disabling Buttons Conditionally
110 Outsourcing Data Into A Separate File
111 Lifting Computed Values Up
112 Deriving Computed Values From Other Computed Values
113 Tic-Tac-Toe Game The Game Over Screen & Checking for a Draw
114 Why Immutability Matters – Always!
115 When NOT To Lift State Up
116 An Alternative To Lifting State Up
117 Final Polishing & Improving Components

React Essentials – Practice Project
118 Module Introduction & A Challenge For You!
119 Adding a Header Component
120 Getting Started with a User Input Component
121 Handling Events & Using Two-Way-Binding
122 Lifting State Up
123 Computing Values & Properly Handling Number Values
124 Outputting Results in a List & Deriving More Values
125 Outputting Content Conditionally

Styling React Components
126 Module Introduction & Starting Project
127 Splitting CSS Code Across Multiple Files
128 Styling React Apps with Vanilla CSS – Pros & Cons
129 Vanilla CSS Styles Are NOT Scoped To Components!
130 Styling React Apps with Inline Styles
131 Dynamic & Conditional Inline Styles
132 Dynamic Styling with Inline Styles
133 Dynamic & Conditional Styling with CSS Files & CSS Classes
134 Dynamic Styling with CSS Classes
135 Scoping CSS Rules with CSS Modules
136 Introducing Styled Components (Third-party Package)
137 Creating Flexible Components with Styled Components
138 Dynamic & Conditional Styling with Styled Components
139 Styled Components Pseudo Selectors, Nested Rules & Media Queries
140 Creating Reusable Components & Component Combinations
141 Introducing Tailwind CSS For React App Styling
142 Adding & Using Tailwind CSS In A React Project
143 Tailwind Media Queries & Pseudo Selectors
144 Dynamic & Conditional Styling with Tailwind
145 Migrating The Demo App to Tailwind CSS
146 Tailwind CSS Pros & Cons
147 Exercise Dynamic Styles

Debugging React Apps
148 Module Introduction
149 The Starting Project
150 Understanding React Error Messages
151 Using the Browser Debugger & Breakpoints
152 Understanding React’s Strict Mode
153 Using the React DevTools (Browser Extension)
154 Exercise Fix Errors

Working with Refs & Portals
155 Module Introduction & Starting Project
156 Repetition Managing User Input with State (Two-Way-Binding)
157 Repetition Fragments
158 Introducing Refs Connecting & Accessing HTML Elements via Refs
159 Manipulating the DOM via Refs
160 Accessing DOM Elements with refs
161 Refs vs State Values
162 Adding Challenges to the Demo Project
163 Setting Timers & Managing State
164 Using Refs for More Than DOM Element Connections
165 Managing Other Values with Refs
166 Adding a Modal Component
167 Forwarding Refs to Custom Components
168 Forwarding Refs
169 Exposing Component APIs via the useImperativeHandle Hook
170 Exposing Component APIs
171 More Examples When To Use Refs & State
172 Sharing State Across Components
173 Enhancing the Demo App Result Modal
174 Closing the Modal via the ESC (Escape) Key
175 Introducing & Understanding Portals
176 Working with Portals

Practice Project Project Management App (with Components, State, Refs & More)
177 Module Introduction & Starting Project
178 Adding a Projects Sidebar Component
179 Styling the Sidebar & Button with Tailwind CSS
180 Adding the New Project Component & A Reusable Input Component
181 Styling Buttons & Inputs with Tailwind CSS
182 Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)
183 Managing State to Switch Between Components
184 Collecting User Input with Refs & Forwarded Refs
185 Handling Project Creation & Updating the UI
186 Validating User Input & Showing an Error Modal via useImperativeHandle
187 Styling the Modal via Tailwind CSS
188 Making Projects Selectable & Viewing Project Details
189 Handling Project Deletion
190 Adding Project Tasks & A Tasks Component
191 Managing Tasks & Understanding Prop Drilling
192 Clearing Tasks & Fixing Minor Bugs

React’s Context API & useReducer – Advanced State Management
193 Module Introduction
194 Understanding Prop Drilling & Project Overview
195 Prop Drilling Component Composition as a Solution
196 Introducing the Context API
197 Creating & Providing The Context
198 Consuming the Context
199 Linking the Context to State
200 A Different Way Of Consuming Context
201 What Happens When Context Values Change
202 Migrating the Entire Demo Project to use the Context API
203 Outsourcing Context & State Into a Separate Provider Component
204 Creating & Using Context
205 Introducing the useReducer Hook
206 Dispatching Actions & Editing State with useReducer
207 Using useReducer()

Handling Side Effects & Working with the useEffect() Hook
208 Module Introduction & Starting Project
209 What’s a Side Effect A Thorough Example
210 A Potential Problem with Side Effects An Infinite Loop
211 Using useEffect for Handling (Some) Side Effects
212 Not All Side Effects Need useEffect
213 useEffect Not Needed Another Example
214 Preparing Another Use-Case For useEffect
215 Using useEffect for Syncing With Browser APIs
216 Understanding Effect Dependencies
217 Fixing a Small Bug
218 Preparing Another Problem That Can Be Fixed with useEffect
219 Introducing useEffect’s Cleanup Function
220 The Problem with Object & Function Dependencies
221 The useCallback Hook
222 useEffect’s Cleanup Function Another Example
223 Optimizing State Updates

Practice Project Building a Quiz App
224 Module Introduction & Starting Project
225 A First Component & Some State
226 Deriving Values, Outputting Questions & Registering Answers
227 Shuffling Answers & Adding Quiz Logic
228 Adding Question Timers
229 Working with Effect Dependencies & useCallback
230 Using Effect Cleanup Functions & Using Keys for Resetting Components
231 Highlighting Selected Answers & Managing More State
232 Splitting Components Up To Solve Problems
233 Moving Logic To Components That Actually Need It (Moving State Down)
234 Setting Different Timers Based On The Selected Answer
235 Outputting Quiz Results

A Look Behind The Scenes Of React & Optimization Techniques
236 Module Introduction
237 React Builds A Component Tree How React Works Behind The Scenes
238 Analyzing Component Function Executions via React’s DevTools Profiler
239 Avoiding Component Function Executions with memo()
240 Avoiding Component Function Executions with Clever Structuring
241 Understanding the useCallback() Hook
242 Understanding the useMemo() Hook
243 React Uses A Virtual DOM – Time To Explore It!
244 Why Keys Matter When Managing State!
245 More Reasons For Why Keys Matter
246 Using Keys For Resetting Components
247 State Scheduling & Batching
248 Optimizing React with MillionJS

An Alternative Way Of Building Components Class-based Components
249 Module Introduction
250 What & Why
251 Adding a First Class-based Component
252 Working with State & Events
253 The Component Lifecycle (Class-based Components Only!)
254 Lifecycle Methods In Action
255 Class-based Components & Context
256 Class-based vs Functional Components A Summary
257 Introducing Error Boundaries
258 Module Resources

Sending Http Requests (e.g. Connecting to a Database)
259 Module Introduction
260 How (Not) To Connect To A Database
261 Starting Project & Dummy Backend API
262 Preparing the App For Data Fetching
263 How NOT To Send HTTP Requests (And Why It’s Wrong)
264 Sending HTTP Requests (GET Request) via useEffect
265 Using async await
266 Handling Loading States
267 Handling HTTP Errors
268 Transforming Fetched Data
269 Extracting Code & Improving Code Structure
270 Sending Data with POST Requests
271 Using Optimistic Updating
272 Deleting Data (via DELETE HTTP Requests)
273 Practice Fetching Data

Building Custom React Hooks
274 Module Introduction & Starting Project
275 Revisiting the Rules of Hooks & Why To Use Hooks
276 Creating a Custom Hook
277 Custom Hook Managing State & Returning State Values
278 Exposing Nested Functions From The Custom Hook
279 Using A Custom Hook in Multiple Components
280 Creating Flexible Custom Hooks

Working with Forms & User Input
281 Module Introduction & Starting Project
282 What Are Forms & What’s Tricky About Them
283 Handling Form Submission
284 Managing & Getting User Input via State & Generic Handlers
285 Getting User Input via Refs
286 Getting Values via FormData & Native Browser APIs
287 Resetting Forms
288 Validating Input on Every Keystroke via State
289 Validating Input Upon Lost Focus (Blur)
290 Validating Input Upon Form Submission
291 Validating Input via Built-in Validation Props
292 Mixing Custom & Built-in Validation Logic
293 Building & Using a Reusable Input Component
294 Outsourcing Validation Logic
295 Creating a Custom useInput Hook
296 Using Third-Party Form Libraries

Practice Project Building a Food Order App
297 Module Introduction & Starting Project
298 Planning the App & Adding a First Component
299 Fetching Meals Data (GET HTTP Request)
300 Adding a MealItem Component
301 Formatting & Outputting Numbers as Currency
302 Creating a Configurable & Flexible Custom Button Component
303 Getting Started with Cart Context & Reducer
304 Finishing & Using the Cart Context & Reducer
305 Adding a Reusable Modal Component with useEffect
306 Opening the Cart in the Modal via a New Context
307 Working on the Cart Items
308 Adding a Custom Input Component & Managing Modal Visibility
309 Handling Form Submission & Validation
310 Sending a POST Request with Order Data
311 Adding a Custom HTTP Hook & Avoiding Common Errors
312 Handling HTTP Loading & Error States
313 Finishing Touches

Diving into Redux (An Alternative To The Context API)
314 Module Introduction
315 Another Look At State In React Apps
316 Redux vs React Context
317 How Redux Works
318 MUST READ Redux createStore() is (not) deprecated
319 Exploring The Core Redux Concepts
320 More Redux Basics
321 Preparing a new Project
322 Creating a Redux Store for React
323 Providing the Store
324 Using Redux Data in React Components
325 Dispatching Actions From Inside Components
326 Redux with Class-based Components
327 Attaching Payloads to Actions
328 Working with Multiple State Properties
329 How To Work With Redux State Correctly
330 Redux Challenges & Introducing Redux Toolkit
331 Adding State Slices
332 Connecting Redux Toolkit State
333 Migrating Everything To Redux Toolkit
334 Working with Multiple Slices
335 Reading & Dispatching From A New Slice
336 Splitting Our Code
337 Summary

Advanced Redux
338 Module Introduction
339 Redux & Side Effects (and Asynchronous Code)
340 Refresher Practice Part 12
341 Refresher Practice Part 22
342 Using Firebase as a Backend
343 Redux & Async Code
344 Frontend Code vs Backend Code
345 Where To Put Our Logic
346 Using useEffect with Redux
347 A Problem with useEffect()
348 Handling Http States & Feedback with Redux
349 Using an Action Creator Thunk
350 Getting Started with Fetching Data
351 Finalizing the Fetching Logic
352 Exploring the Redux DevTools
353 Summary

Building a Multi-Page SPA with React Router
354 Module Introduction
355 Routing Multiple Pages in Single-Page Applications
356 Project Setup & Installing React Router
357 Defining Routes
358 Adding a Second Route
359 Exploring an Alternative Way of Defining Routes
360 Navigating between Pages with Links
361 Layouts & Nested Routes
362 Showing Error Pages with errorElement
363 Working with Navigation Links (NavLink)
364 Navigating Programmatically
365 Defining & Using Dynamic Routes
366 Adding Links for Dynamic Routes
367 Understanding Relative & Absolute Paths
368 Working with Index Routes
369 Onwards to a new Project Setup
370 Time to Practice Problem
371 Time to Practice Solution
372 Data Fetching with a loader()
373 Using Data From A Loader In The Route Component
374 More loader() Data Usage
375 Where Should loader() Code Be Stored
376 When Are loader() Functions Executed
377 Reflecting The Current Navigation State in the UI
378 Returning Responses in loader()s
379 Which Kind Of Code Goes Into loader()s
380 Error Handling with Custom Errors
381 Extracting Error Data & Throwing Responses
382 The json() Utility Function
383 Dynamic Routes & loader()s
384 The useRouteLoaderData() Hook & Accessing Data From Other Routes
385 Planning Data Submission
386 Working with action() Functions
387 Submitting Data Programmatically
388 Updating the UI State Based on the Submission Status
389 Validating User Input & Outputting Validation Errors
390 Reusing Actions via Request Methods
391 Behind-the-Scenes Work with useFetcher()
392 Deferring Data Fetching with defer()
393 Controlling Which Data Should Be Deferred
394 Module Summary
395 Upgrading from React Router v5
396 Module Resources
397 Old Lectures

Adding Authentication To React Apps
398 Module Introduction
399 How Authentication Works
400 Project Setup & Route Setup
401 Working with Query Parameters
402 Implementing the Auth Action
403 Validating User Input & Outputting Validation Errors
404 Adding User Login
405 Attaching Auth Tokens to Outgoing Requests
406 Adding User Logout
407 Updating the UI Based on Auth Status
408 Important loader()s must return null or any other value
409 Adding Route Protection
410 Adding Automatic Logout
411 Managing the Token Expiration
412 Module Resources

Deploying React Apps
413 Module Introduction
414 Deployment Steps
415 Understanding Lazy Loading
416 Adding Lazy Loading
417 Building the Code For Production
418 Deployment Example
419 Server-side Routing & Required Configuration

React Query Tanstack Query Handling HTTP Requests With Ease
420 Module Introduction
421 Project Setup & Overview
422 React Query What & Why
423 Installing & Using Tanstack Query – And Seeing Why It’s Great!
424 Understanding & Configuring Query Behaviors – Cache & Stale Data
425 Dynamic Query Functions & Query Keys
426 The Query Configuration Object & Aborting Requests
427 Enabled & Disabled Queries
428 Changing Data with Mutations
429 Fetching More Data & Testing the Mutation
430 Acting on Mutation Success & Invalidating Queries
431 A Challenge! The Problem
432 A Challenge! The Solution
433 Disabling Automatic Refetching After Invalidations
434 Enhancing the Demo App & Repeating Mutation Concepts
435 React Query Advantages In Action
436 Updating Data with Mutations
437 Optimistic Updating
438 Using the Query Key As Query Function Input
439 React Query & React Router

A (Pretty Deep Dive) Introduction to Next.js
440 Module Introduction
441 Creating a NextJS Project
442 Understanding File-based Routing & React Server Components
443 Adding Another Route via the Filesystem
444 Navigating Between Pages
445 Working with Pages & Layouts
446 Reserved File Names, Custom Components & How To Organize A NextJS Project
447 Reserved Filenames
448 Configuring Dynamic Routes & Using Route Parameters
449 Onwards to the Main Project The Foodies App
450 Exercise Your Task
451 Exercise Solution
452 Revisiting The Concept Of Layouts
453 Adding a Custom Component To A Layout
454 Styling NextJS Project Your Options & Using CSS Modules
455 Optimizing Images with the NextJS Image Component
456 Using More Custom Components
457 Populating The Starting Page Content
458 Preparing an Image Slideshow
459 React Server Components vs Client Components – When To Use What
460 Using Client Components Efficiently
461 Outputting Meals Data & Images With Unknown Dimensions
462 Setting Up A SQLite Database
463 Fetching Data By Leveraging NextJS & Fullstack Capabilities
464 Adding A Loading Page
465 Using Suspense & Streamed Responses For Granular Loading State Management
466 Handling Errors
467 Handling Not Found States
468 Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
469 Throwing Not Found Errors For Individual Meals
470 Getting Started with the Share Meal Form
471 Getting Started with a Custom Image Picker Input Component
472 Adding an Image Preview to the Picker
473 Improving the Image Picker Component
474 Introducing & Using Server Actions for Handling Form Submissions
475 Storing Server Actions in Separate Files
476 Creating a Slug & Sanitizing User Input for XSS Protection
477 Storing Uploaded Images & Storing Data in the Database
478 Managing the Form Submission Status with useFormStatus
479 Adding Server-Side Input Validation
480 Working with Server Action Responses & useFormState
481 Building For Production & Understanding NextJS Caching
482 Triggering Cache Revalidations
483 Don’t Store Files Locally On The Filesystem!
484 Bonus Storing Uploaded Images In The Cloud (AWS S3)
485 Adding Static Metadata
486 Adding Dynamic Metadata
487 Module Summary
488 About the NextJS Pages Router
489 Creating a NextJS Project
490 Analyzing the Created Project
491 Adding First Pages
492 Adding Nested Paths & Pages (Nested Routes)
493 Creating Dynamic Pages (with Parameters)
494 Extracting Dynamic Parameter Values
495 Linking Between Pages
496 Onwards to a bigger Project!
497 Preparing the Project Pages
498 Outputting a List of Meetups
499 Adding the New Meetup Form
500 The _app.js File & Layout Wrapper
501 Using Programmatic (Imperative) Navigation
502 Adding Custom Components & CSS Modules
503 How Pre-rendering Works & Which Problem We Face
504 Data Fetching for Static Pages
505 More on Static Site Generation (SSG)
506 Exploring Server-side Rendering (SSR) with getServerSideProps
507 Working with Params for SSG Data Fetching
508 Preparing Paths with getStaticPaths & Working With Fallback Pages
509 Introducing API Routes
510 Working with MongoDB
511 Sending Http Requests To Our API Routes
512 Getting Data From The Database
513 Getting Meetup Details Data & Preparing Pages
514 Adding head Metadata
515 Deploying Next.js Projects
516 Using Fallback Pages & Re-deploying
517 Summary
518 Module Resources

Animating React Apps
519 Module Introduction
520 Project Setup & Overview
521 Animating with CSS Transitions
522 Animating with CSS Animations
523 Introducing Framer Motion
524 Framer Motion Basics & Fundamentals
525 Animating Between Conditional Values
526 Adding Entry Animations
527 Animating Element Disappearances Removal
528 Making Elements Pop With Hover Animations
529 Reusing Animation States
530 Nested Animations & Variants
531 Animating Staggered Lists
532 Animating Colors & Working with Keyframes
533 Imperative Animations
534 Animating Layout Changes
535 Orchestrating Multi-Element Animations
536 Combining Animations With Layout Animations
537 Animating Shared Elements
538 Re-triggering Animations via Keys
539 Scroll-based Animations

React Patterns & Best Practices
540 Module Introduction
541 Project Overview
542 Introducing Compound Components
543 Managing Multi-Component State with the Context API
544 Grouping Compound Components
545 Adding Extra Components For Reusability & Configurability
546 Sharing Cross-Component State When Working With Compound Components
547 Introducing & Using Render Props
548 Adding Search To A React App
549 Implementing a Search Functionality With Help Of Render Props
550 Handling Keys Dynamically
551 Working with Debouncing

Replacing Redux with React Hooks
552 Module Introduction
553 React 18 & This Section
554 Starting Project & Why You Would Replace Redux
555 Alternative Using the Context API
556 Toggling Favorites with the Context API
557 Context API Summary (and why NOT to use it instead of Redux)
558 Getting Started with a Custom Hook as a Store
559 Finishing the Store Hook
560 Creating a Concrete Store
561 Using the Custom Store
562 Custom Hook Store Summary
563 Optimizing the Custom Hook Store
564 Bonus Managing Multiple State Slices with the Custom Store Hook
565 Wrap Up
566 Module Resources

Testing React Apps (Unit Tests)
567 Module Introduction
568 What & Why
569 Understanding Different Kinds Of Tests
570 What To Test & How To Test
571 Understanding the Technical Setup & Involved Tools
572 Running a First Test
573 Writing Our First Test
574 Grouping Tests Together With Test Suites
575 Testing User Interaction & State
576 Testing Connected Components
577 Testing Asynchronous Code
578 Working With Mocks
579 Summary & Further Resources

React + TypeScript
580 Module Introduction
581 What & Why
582 Installing & Using TypeScript
583 Exploring the Base Types
584 Working with Array & Object Types
585 Understanding Type Inference
586 Using Union Types
587 Understanding Type Aliases
588 Functions & Function Types
589 Diving Into Generics
590 A Closer Look At Generics
591 Creating a React + TypeScript Project
592 Working with Components & TypeScript
593 Working with Props & TypeScript
594 Adding a Data Model
595 Time to Practice Exercise Time!
596 Form Submissions In TypeScript Projects
597 Working with refs & useRef
598 Working with Function Props
599 Managing State & TypeScript
600 Adding Styling
601 Time to Practice Removing a Todo
602 The Context API & TypeScript
603 Summary
604 Bonus Exploring tsconfig.json

Optional React Summary & Core Feature Walkthrough
605 Module Introduction
606 What Is React & Why Would You Use It
607 React Projects – Requirements
608 Creating React Projects
609 Out Starting Project
610 Understanding How React Works
611 Building A First Custom Component
612 Outputting Dynamic Values
613 Reusing Components
614 Passing Data to Components with Props
615 CSS Styling & CSS Modules
616 Exercise & Another Component
617 Preparing the App For State Management
618 Adding Event Listeners
619 Working with State
620 Lifting State Up
621 The Special children Prop
622 State & Conditional Content
623 Adding a Shared Header & More State Management
624 Adding Form Buttons
625 Handling Form Submission
626 Updating State Based On Previous State
627 Outputting List Data
628 Adding a Backend to the React SPA
629 Sending a POST HTTP Request
630 Handling Side Effects with useEffect()
631 Handle Loading State
632 Understanding & Adding Routing
633 Adding Routes
634 Working with Layout Routes
635 Refactoring Route Components & More Nesting
636 Linking & Navigating
637 Data Fetching via loader()s
638 Submitting Data with action()s
639 Dynamic Routes
640 Module Summary
641 Module Resources

Course Roundup
642 Course Roundup
643 Bonus!

Course Update & Old Course Content
644 Course Update Overview, Explanation & Migration Guide
645 Old Course Content Download

[BONUS OPTIONAL] React Basics & Working With Components
646 About these [BONUS OPTIONAL] sections
647 Module Introduction
648 What Are Components And Why Is React All About Them
649 React Code Is Written In A Declarative Way!
650 Creating a new React Project
651 The Starting Project
652 Analyzing a Standard React Project
653 Introducing JSX
654 How React Works
655 Exercise Working with JSX Code
656 Building a First Custom Component
657 Exercise Building a First Component
658 Writing More Complex JSX Code
659 Adding Basic CSS Styling
660 Outputting Dynamic Data & Working with Expressions in JSX
661 Passing Data via props
662 Exercise Passing Data via props
663 Alternative Ways of Passing & Receiving Handling props
664 Adding normal JavaScript Logic to Components
665 Splitting Components Into Multiple Components
666 The Concept of Composition (children props)
667 Exercise Component Composition
668 A First Summary
669 A Closer Look At JSX
670 Organizing Component Files
671 An Alternative Function Syntax
672 Learning Check React Basics, Components, Props & JSX
673 Module Resources

[BONUS OPTIONAL] Time to Practice Component Basics
674 Module Introduction
675 The Starting Project & Your Tasks
676 Exercise Hints
677 Outputting Key Concepts Data
678 Identifying Possible Components
679 Creating & Using a Custom Component
680 Outsourcing Concept Items Into a Reusable Component
681 Module Resources

[BONUS OPTIONAL] React State & Working with Events
682 Module Introduction
683 Listening to Events & Working with Event Handlers
684 Exercise Listening to Events
685 How Component Functions Are Executed
686 Working with State
687 Exercise Working with State
688 A Closer Look at the useState Hook
689 State can be updated in many ways!
690 Adding Form Inputs
691 Listening to User Input
692 Working with Multiple States
693 Using One State Instead (And What’s Better)
694 Updating State That Depends On The Previous State
695 Exercise Using State with Form Inputs
696 Exercise Updating State Based On Older State
697 Alternative Creating A Shared Handler Function
698 Handling Form Submission
699 Adding Two-Way Binding
700 Child-to-Parent Component Communication (Bottom-up)
701 Lifting The State Up
702 Derived Computed State
703 Controlled vs Uncontrolled Components & Stateless vs Stateful Components
704 Learning Check Working with Events & State
705 Module Resources

[BONUS OPTIONAL] Rendering Lists & Conditional Content
706 Module Introduction
707 Rendering Lists of Data
708 Exercise Rendering Lists of Data
709 Using Stateful Lists
710 Understanding Keys
711 Outputting Conditional Content
712 Exercise Outputting Conditional Content
713 Adding Conditional Return Statements
714 Demo App Adding a Chart
715 Adding Dynamic Styles
716 Wrap Up & Next Steps
717 Fixing a Small Bug
718 Learning Check Outputting Lists & Conditional Content
719 Module Resources

[BONUS OPTIONAL] Time to Practice A Complete Practice Project
720 Module Introduction
721 The First Practice Project & Your Tasks
722 Exercise Hints
723 Splitting the App Into Components
724 Handling Events
725 Managing State
726 Lifting the State Up
727 Outputting Results Conditionally
728 Adding CSS Modules
729 Fixing a Small Bug
730 Introducing the Second Project
731 Exercise Hints
732 Adding a User Component
733 Adding a re-usable Card Component
734 Adding a re-usable Button Component
735 Managing the User Input State
736 Adding Validation & Resetting Logic
737 Adding a Users List Component
738 Managing a List Of Users via State
739 Adding The ErrorModal Component
740 Managing the Error State
741 Module Resources