Modern React with Redux [2024 Update]

Let’s Dive In!
1 How to Get Help
2 Join Our Community!
3 Course Resources
4 Let’s Build an App!
5 Critical Questions
6 Core Concepts
7 A Few More Critical Questions
8 Node Setup
9 Creating a React Project
10 What is Create React App
11 Using Vite as an Alternative to Create React App

Creating Content with JSX
12 Showing Basic Content
13 What is JSX
14 Printing JavaScript Variables in JSX
15 Shorthand JS Expressions
16 Showing Javascript Values in JSX
17 Exercise Overview
18 Quick Practice with JSX
19 Exercise Solution
20 Typical Component Layouts
21 Customizing Elements with Props
22 Converting HTML to JSX
23 Applying Styling in JSX
24 More on JSX
25 Practice JSX Conversion
26 Exercise Solution
27 Extracting Components
28 Module Systems Overview
29 Imports and Exports
30 Cheatsheet for JSX

Building with Reusable Components
31 Project Overview
32 Creating Core Components
33 Introducing the Props System
34 Picturing the Movement of Data
35 Adding Props
36 Using Argument Destructuring
37 Practice with Props
38 Exercise Solution
39 The React Developer Tools
40 The Most Common Props Mistake
41 Communicating With Props
42 Images for the App
43 Including Images
44 Handling Image Accessibility
45 Review on how CSS Works
46 Adding CSS Libraries with NPM
47 A Big Pile of HTML!
48 Last Bit of Styling

State How to Change Your App
49 App Overview
50 Initial App Setup
51 Introducing the Event System
52 Events in Detail
53 Variations on Event Handlers
54 Exercise with Events
55 Exercise Solution
56 Introducing the State System
57 More on State
58 Understanding the Re-Rendering Process
59 Got These Five Points
60 Why Array Destructuring
61 Back to the App
62 Picking a Random Element
63 List Building in React
64 Images for the App
65 Loading and Showing SVGs
66 Increasing Image Size
67 Adding Custom CSS
68 Finalizing Styling
69 App Wrapup and Review

Using an API with React
70 App Overview
71 Project Setup
72 The Path Forward
73 Overview of HTTP Requests
74 Note About the Unsplash API
75 Understanding the API
76 Making an HTTP Request
77 [Optional] Using AsyncAwait
78 Data Fetching Cleanup
79 Thinking About Data Flow
80 Child to Parent Communication
81 Implementing Child to Parent Communication
82 Upward Communication
83 Handling Form Submission
84 Handling Input Elements
85 [Optional] OK But Why
86 Creating a Controlled Input
87 Exercise Solution
88 Running the Search
89 Reminder on AsyncAwait
90 Communicating the List of Images Down
91 Building a List of Images
92 Handling List Updates
93 Notes on Keys
94 Displaying Images
95 A Touch of Styling
96 App Wrapup

How to Handle Forms
97 App Overview
98 Initial Setup
99 State Location
100 Reminder on Event Handlers
101 Extra CSS
102 Receiving New Titles
103 Adding Styling
104 Updating State
105 Don’t Mutate That State!
106 State Updates – Cheat Sheet
107 [Optional] Adding Elements to the Start or End
108 Adding Elements
109 [Optional] Exercise Solution
110 [Optional] Inserting Elements
111 Inserting Elements
112 [Optional] Exercise Solution
113 [Optional] Removing Elements
114 Removing Elements
115 [Optional] Exercise Solution
116 [Optional] Modifying Elements
117 [Super Optional] Why the Special Syntax
118 Modifying Elements
119 [Optional] Exercise Solution
120 [Optional] Adding, Changing, or Removing Object Properties
121 Cheatsheet for State Changes
122 Adding a Book, For Real!
123 Generating Random ID’s
124 Displaying the List
125 Deleting Records
126 Toggling Form Display
127 Default Form Values
128 Updating the Title
129 Closing the Form on Submit
130 A Better Solution!
131 Collapsing Two Handlers into One
132 Adding Images

Data Persistence with API Requests
133 Adding Data Persistence
134 JSON Server Issues and Required Version
135 Server Setup
136 What Just Happened
137 How the API Works
138 Introducing the REST Client
139 ECONNREFUSED 127.0.0.13001 Errors in VSCode
140 Using the REST Client
141 Creating a New Record
142 Fetching a List of Records
143 Introducing useEffect
144 useEffect in Action
145 More on useEffect
146 When Does it Run
147 Updating a Record
148 Thinking About Updates
149 Deleting a Record

Communication Using the Context System
150 Introducing Context
151 Context in Action
152 Changing Context Values
153 More on Changing Context
154 Application vs Component State
155 Refactoring to Use Context
156 Refactoring the App
157 Quick Note
158 Reminder on Sharing with Context
159 Props and Context Together
160 Last Bit of Refactoring
161 A Small Taste of Reusable Hooks

Deeper Dive into Hooks!
162 Return to useEffect
163 Quick Note
164 Understanding the Issue
165 Applying the Fix
166 ESLint is Good, but be Careful!
167 Stable References with useCallback
168 Fixing Bugs with useCallback
169 Fixing UseEffect Bugs
170 useEffect Cleanup Functions
171 The Purpose of Cleanup Functions

Custom Navigation and Routing Systems
172 Important Info About the Following Sections and Lectures
173 Project Overview
174 Project Setup
175 Some Button Theory
176 Underlying Elements
177 The Children Prop
178 Props Design
179 Validating Props with PropTypes
180 PropTypes in Action
181 Introducing TailwindCSS
182 Updated Guidance for Installing and Configuring Tailwind
183 Installing Tailwind
184 How to use Tailwind
185 Review on Styling
186 The ClassNames Library
187 Building Some Variations
188 text-white Overriding Other Colors
189 Finalizing the Variations
190 Using Icons in React Projects
191 Issues with Event Handlers
192 Passing Props Through
193 Handling the Special ClassName Case
194 Exclusive Props with TypeScript instead of PropTypes

Mastering the State Design Process
195 Project Organization
196 Refactoring with Organization
197 Component Overview
198 Component Setup
199 Reminder on Building Lists
200 Quick Note
201 State Design Process Overview
202 Finding the Expanded Item
203 Conditional Rendering
204 Inline Event Handlers
205 Variation on Event Handlers
206 Conditional Icon Rendering
207 Displaying Icons
208 Adding Styling
209 Toggling Panel Collapse
210 Quick Note
211 [Optional] Delayed State Updates
212 [Optional] Functional State Updates
213 Conditional Rendering
214 Event Handlers with Lists
215 Exercise Solution

Practicing Props and State Design
216 Component Overview
217 Designing the Props
218 Component Creation
219 [Optional] More State Design
220 Finally… Implementation!
221 Reminder on Event Handlers in Maps
222 Dropdown as a Controlled Component
223 Controlled Component Implementation
224 Existence Check Helper
225 Community Convention with Props Names
226 Form Controls – Prop Naming Convention
227 Exercise Solution
228 Adding Styling
229 The Panel Component
230 Creating the Reusable Panel
231 A Challenging Extra Feature
232 Document-Wide Click Handlers
233 Event Capture and Bubbling
234 Putting it All Together
235 Why a Capture Phase Handler
236 Reminder on the useEffect Function
237 Reminder on useEffect Cleanup
238 Issues with Element References
239 useRef in Action
240 Checking Click Location

Making Navigation Reusable
241 Traditional Browser Navigation
242 Theory of Navigation in React
243 Extracting the DropdownPage
244 Answering Critical Questions
245 The PushState Function
246 Handling Link Clicks
247 Handling BackForward Buttons
248 Navigation Context
249 Listening to Forward and Back Clicks
250 Programmatic Navigation
251 A Link Component
252 A Route Component
253 Handling Control and Command Keys
254 Link Styling
255 Custom Navigation Hook
256 Adding a Sidebar Component
257 Highlighting the Active Link
258 Navigation Wrapup

Creating Portals with ReactDOM
259 Modal Component Overview
260 Toggling Visibility
261 At First Glance, Easy!
262 We’re Lucky it Works At All!
263 Fixing the Modal with Portals
264 Closing the Modal
265 Customizing the Modal
266 Additional Styling
267 One Small Bug
268 Modal Wrapup

Make a Feature-Full Data Table!
269 Creating a Reusable table
270 Communicating Data to the Table
271 Reminder on Table HTML Structure
272 Building the Rows
273 Better Styling
274 Done! But It’s Not Reusable
275 Here’s the Idea
276 Dynamic Table Headers
277 Rendering Individual Cells
278 Fixed Cell Values
279 Nested Maps
280 Fixing the Color
281 Adding a Key Function

Getting Clever with Data Sorting
282 Adding Sorting to the Table
283 Reminder on Sorting in JavaScript
284 Sorting Strings
285 Sorting Objects
286 Object Sort Implementation
287 Reversing Sort Order
288 Optional Sorting
289 A Small Extra Feature
290 Customizing Header Cells
291 React Fragments
292 The Big Reveal
293 Adding SortableTable
294 Watching for Header Cell Clicks
295 Quick State Design
296 Adding Sort State
297 Yessssss, It Worked!
298 Determining Icon Set
299 Styling Header Cells
300 Resetting Sort Order
301 Table Wrapup

Custom Hooks In Depth
302 Exploring Code Reuse
303 Revisiting Custom Hooks
304 Creating the Demo Component
305 Custom Hook Creation
306 Quick Note
307 Hook Creation Process in Depth
308 Making a Reusable Sorting Hook

Into the World of Reducers
309 App Overview
310 Adding the Form
311 More on the Form
312 useReducer in Action
313 Rules of Reducer Functions
314 Understanding Action Objects
315 Constant Action Types
316 Refactoring to a Switch
317 Adding New State Updates
318 A Few Design Considerations Around Reducers
319 A Few Questions on Reducers
320 Introducing Immer
321 Immer in Action

Dive Into Redux Toolkit
322 Into the World of Redux
323 Redux vs Redux Toolkit
324 App Overview
325 The Path Forward
326 Implementation Time!
327 Understanding the Store
328 The Store’s Initial State
329 Understanding Slices
330 Understanding Action Creators
331 Connecting React to Redux
332 Updating State from a Component
333 Accessing State in a Component
334 Removing Content
335 Practice Updating State!
336 Practice Accessing State!
337 Even More State Updating!
338 Resetting State
339 Multiple State Updates
340 Understanding Action Flow
341 Watching For Other Actions
342 Getting an Action Creator’s Type
343 Manual Action Creation
344 File and Folder Structure
345 Refactoring the Project Structure
346 Link to Completed Project

Managing Multiple Slices with Redux Toolkit
347 Project Overview
348 Adding Component Boilerplate
349 Thinking About Derived State
350 Thinking About Redux Design
351 Adding the Form Slice
352 Maintaining a Collection with a Slice
353 Creating the Store
354 Form Values to Update State
355 Receiving the Cost
356 Dispatching During the Form Submission
357 Awkward Double Keys
358 Listing the Records
359 Deleting Records
360 CSS File for Download
361 Adding Styling
362 Form Reset on Submission
363 Reminder on ExtraReducers
364 Adding a Searching Input
365 Addressing Selector unknown returned a different result warning
366 Derived State in useSelector
367 Total Car Cost
368 Update for Adding Name Selector to CarList
369 Highlighting Existing Cars

Interfacing with API’s Using Async Thunks
370 App Overview
371 Adding a Few Dependencies
372 Initial App Boilerplate
373 API Server Setup
374 Component Files
375 Adding a Few Components
376 Creating the Redux Store
377 Thinking About Data Structuring
378 Reminder on Request Conventions
379 Data Fetching Techniques
380 Optional Async Thunks Section
381 Adding State for Data Loading
382 Understanding Async Thunks
383 Steps for Adding a Thunk
384 More on Adding Thunks
385 Wrapping up the Thunk
386 Using Loading State
387 Adding a Pause for Testing
388 Adding a Skeleton Loader
389 Animations with TailwindCSS
390 Rendering the List of Users
391 Creating New Users
392 Unexpected Loading State
393 Strategies for Fine-Grained Loading State
394 Local Fine-Grained Loading State
395 More on Loading State
396 Handling Errors with User Creation
397 Creating a Reusable Thunk Hook
398 Creating a Fetch-Aware Button Component
399 Better Skeleton Display
400 A Thunk to Delete a User
401 Updating the Slice
402 Refactoring the Component
403 Deleting the User
404 Fixing a Delete Error
405 Album Feature Overview
406 Additional Components
407 Adding the ExpandablePanel
408 Wrapping Up the ExpandablePanel
409 Adding the Albums Listing

Modern Async with Redux Toolkit Query
410 Skipping to this Section
411 [Optional] Getting Caught Up
412 Introducing Redux Toolkit Query
413 Creating a RTK Query API
414 Creating an Endpoint
415 Using the Generated Hook
416 A Few Immediate Notes
417 Rendering the List
418 Changing Data with Mutations
419 Differences Between Queries and Mutations
420 Options for Refetching Data
421 Request De-Duplication
422 Some Internals of Redux Toolkit Query
423 Refetching with Tags
424 Fine-Grained Tag Validation
425 Styling Fixups
426 Adding a Pause for Testing
427 Refactoring the List
428 Remove Implementation
429 Easy Tag Invalidation
430 Getting Clever with Cache Tags
431 More Clever Tag Implementation
432 Photos Feature Overview
433 Lots of Photos Setup!
434 Adding the Endpoints
435 Creating the Photo
436 Showing the List of Photos
437 Adding Mouse-Over Deletes
438 Adding Automatic Data Refetching

Diving Into TypeScript
439 Why Use Typescript
440 Basic Types and Type Annotations
441 Function Type Annotations
442 Type Inference
443 Describing Objects with Interfaces
444 Using Interfaces to Annotate Props
445 Downsides to Type Inference
446 Function Types
447 Function Types in Props Interfaces
448 Extending an Interface
449 Type Unions
450 Type Narrowing with Type Guards
451 Tricky Cases with Type Guards
452 Type Predicates
453 Optional Properties
454 The Any and Unknown Types
455 Type Aliases
456 Life Without Generics
457 Introduction to Function Generics
458 More on Function Generics
459 Multiple Generic Types
460 More Generic Examples!
461 Generics with Fetch
462 Generic Type Inference
463 More on Generic Type Inference
464 Issues with Generic Type Inference
465 Generic Type Constraints
466 More on Generic Type Constraints
467 TypeScript Wrapup

Build a Google Maps Clone with Typescript
468 Project Overview
469 Project Setup
470 Component Creation
471 App Architecture
472 Defining an Interface
473 Typing of Props
474 Type Inference Around useState
475 Typing a Callback
476 Form Submissions with TypeScript
477 Searching with the OSM API
478 Why Use Interfaces
479 Rendering the Locations
480 Showing and Panning a Map
481 App Review

Navigation and Data Fetching with React Router
482 App Overview
483 Project Setup
484 Introducing React Router
485 React Router Setup
486 Navigating with a Link
487 Programmatic Navigation
488 Form Submission Navigation Shortcut
489 A Touch of Styling
490 The Registry API
491 Fetching Data with React Router
492 More on Fetching with a Loader
493 Designing New Types
494 An Improved Project Structure
495 Mapping the Response
496 Extracting the Loader
497 Connecting the Page and Loader
498 Rendering the List of Results
499 Focusing on the Details Page
500 Details Interface
501 Fetching Details
502 Creating the Details Loader
503 Accessing Route Params
504 Typing the Page and Loader Together
505 Rendering Package Details
506 Error Around the Name Property
507 Fetching Packages in Parallel
508 Creating the Home Loader
509 Accessing the Data from a Loader
510 Assembling the Home Page
511 React Router Review

Legacy Version of Modern React with Redux Course
512 Note About This Legacy Course
513 What is JSX Converting HTML
514 Inline Styling Converting Styling
515 Class vs. ClassName Referencing JS Variables
516 Important Note About Viewing Errors
517 Three Tenants of Components App Overview
518 IMPORTANT Info About Faker Installation
519 Getting Some Free Styling Naive Component Approach
520 Specifying Images Duplicating a Single Component
521 Extracting JSX Component Nesting
522 React Props System Passing and Receiving Props
523 Component Reuse Implementing an Approval Card
524 Showing Custom Children Component Reuse
525 Class Based Components
526 Application Overview Scaffolding the App
527 Getting a User’s Physical Location Resetting Geolocation Preferences
528 Handling Async Operations Refactoring to Class Components
529 Rules of State Initializing State Through Constructors
530 Updating State Properties App Lifecycle Walkthrough
531 Handling Errors Gracefully Conditionally Rendering Content
532 Introducing Lifecycle Methods Why Lifecycle Methods
533 Refactoring Data Loading Alternate State initialization
534 Passing State as Props
535 Determining Season
536 Ternary Expressions in JSX Showing Icons
537 Extracting Options to Config Objects Adding Some Styling
538 Showing a Loading Spinner Specifying Default Props
539 Avoiding Conditionals in Render Breather and Review
540 App Overview Component Design
541 Adding Some Project Structure Showing Forms
542 Adding a Touch of Styling Creating Event Handlers
543 Alternate Event Handlers Uncontrolled vs Controlled Elements
544 More on Controlled Elements Handling Form Submittal
545 Understanding this in JS Solving Context Issues
546 Communicating Child to Parent Invoking Callbacks in Children
547 Fetching Data Axios vs. Fetch
548 Viewing Request Results Handling Requests with Async Await
549 Setting State After Async Requests Binding Callbacks
550 Creating Custom Clients
551 Rendering Lists Review of Map Statements
552 Rendering Lists of Components Purpose of Keys
553 Implementing Keys in Lists
554 Grid CSS Issues with Grid CSS
555 Creating an ImageCard Component Accessing the DOM with Refs
556 Accessing Image Height Callbacks on Image Load
557 Dynamic Spans App Review
558 App Overview Component Design
559 Scaffolding the App Reminder on Event Handlers
560 Handling Form Submittal Accessing the YouTube API
561 Searching for Videos Putting it All Together
562 Updating State with Fetched Data Passing State as Props
563 Rendering a List of Videos Rendering Video Thumbnails
564 Styling a List Communicating from Children to Parent
565 Deeply Nested Callbacks Conditional Rendering
566 Styling the VideoDetail Displaying a Video Player
567 Fixing a few Warnings Defaulting Video Selection
568 React Hooks App Architecture
569 Communicating the Items Prop Building and Styling the Accordion
570 Helper Functions Introducing useState
571 Understanding useState Setter Functions
572 Expanding the Accordion Creating Additional Widgets
573 Search Widget Architecture Scaffolding the Widget
574 Text Inputs with Hooks When do We Search
575 useEffect Hook Testing Execution
576 Async Code in useEffect Executing the Request from useEffect
577 Default Search Terms List Building
578 XSS Server Code
579 XSS Attacks in React Linking to a Wikipedia Page
580 Only Search with a Term Throttling API Requests
581 Reminder on setTimeout useEffect’s Cleanup Function
582 Implementing a Delayed Request Searching on Initial Render
583 Edge Case When Clearing Out Input Form
584 Fixing a Warning Dropdown Architecture
585 Scaffolding the Dropdown A Lot of JSX
586 Selection State Filtering the Option List
587 Hiding and Showing the Option List Why is this Hard
588 React v17 Update – capture true
589 Reminder on Event Bubbling Applying What We’ve Learned
590 Binding an Event Handler Why Stay Open
591 Important Update for Event Listeners
592 Which Element was Clicked Making use of useRef
593 Body Event Listener Cleanup Translate Widget
594 Scaffolding the Translate Component Adding the Language Input
595 Google Translate API Key
596 Understanding the Convert Component Building the Convert Component
597 Using the Google Translate API Displaying Translated Text
598 Debouncing Translation Updates Navigation in React
599 Basic Component Routing Building Reusable Route Component
600 Implementing Header for Navigation Handling Navigation
601 Building a Link Changing the URL
602 Detecting Navigation Updating the Route
603 Handling Command Clicks
604 Project Overview Refactoring the SearchBar
605 Refactoring the App Removing a Callback
606 Overview of Custom Hooks Process for Building Custom Hooks
607 Extracting Video Logic Using the Custom Hook
608 Deployment Overview Deployment with Vercel
609 Deployment with Netlify
610 Introduction to Redux Redux by Analogy
611 A Bit More Analogy Finishing the Analogy
612 Mapping the Analogy to Redux Modeling with Redux
613 Creating Reducers Rules of Reducers
614 Testing Our Example Important Redux Notes
615 Integrating React with Redux React, Redux and React-Redux
616 Design of the Redux App How React-Redux Works
617 Redux Project Structure Named vs Default Exports
618 Building Reducers Wiring up the Provider
619 Connect Function Configuring Connect with mapStateToProps
620 Building a List with Redux Data Calling Action Creators
621 Redux is Not Magic Functional Components with Connect
622 Conditional Rendering
623 App Overview Initial App Setup
624 Tricking Redux with Dummy Reducers A Touch More Setup
625 How to Fetch Data in a Redux App Wiring Up Action Creators
626 Making a Request from an Action Creator Understanding Async Action Creators
627 Behind the Scenes of Redux Thunk Shortened Syntax with Redux Thunk
628 Rules of Reducers Return Values from Reducers
629 Argument Values in Reducers Pure Reducers
630 Mutations in JavaScript Equality of Arrays and Objects
631 A Misleading Rule Safe State Updates in Reducers
632 Switch Statements in Reducers Dispatching Correct Values
633 List Building Displaying Users
634 Fetching Singular Records Displaying the User Header
635 Finding Relevant Users Extracting Logic with mapStateToProps
636 That’s the Issue Memoizing Functions
637 Memoizing Issues One Time Memoization
638 Alternate Overfetching Solution Action Creators in Action Creators
639 Finding Unique User IDs Quick Refactor with Chain
640 App Wrapup
641 App Outline Mockups in Detail
642 App Challenges Initial Setup
643 IMPORTANT – React Router Installation Update
644 Introducing React Router How React Router Works
645 How Paths Get Matched How Now to Navigate with React Router
646 Navigating with React Router Different Router Types
647 Component Scaffolding Wiring Up Routes
648 Always Visible Components Wiring Up the Header
649 Links Inside Routers
650 OAuth Based Authentication OAuth for Servers vs Browser Apps
651 Creating OAuth Credentials Wiring Up the Google API Library
652 Required plugin_name Parameter – Do Not Skip
653 Sending a User into the OAuth Flow Rendering Auth Status
654 Updating Auth State Displaying Sign In and Sign Out Buttons
655 On Demand Sign In and Sign Out Redux Architecture
656 Redux Setup Connecting Auth Action Creators
657 Building the Auth Reducers Handling Auth Status Through Redux
658 Fixed Action Types Recording the User’s ID
659 Redux Dev Tools Debug Sessions with Redux Dev Tools
660 Important Note about Redux Form Installation
661 Forms with Redux Form Useful Redux Form Examples
662 Connecting Redux Form Creating Forms with Redux Form
663 Automatically Handling Events Customizing Form Fields
664 Handling Form Submission Validation of Form Inputs
665 Displaying Validation Messages Showing Errors on Touch
666 Highlighted Errored Fields
667 Creating Streams RESTful Conventions
668 Setting Up an API Server Creating Streams Through Action Creators
669 Creating a Stream with REST Conventions Dispatching Actions
670 Bulk Action Creators
671 Object Based Reducers
672 Key Interpolation Syntax Handling Fetching, Creating and Updating
673 Deleting Properties with Omit Merging Lists of Records
674 Fetching a List of Streams Rendering All Streams
675 Associating Streams with Users Conditionally Showing Edit and Delete
676 Linking to Stream Creation When to Navigate Users
677 History Object Deprecation
678 History References Creating a Browser History Object
679 Implementing Programmatic Navigation Manually Changing API Records
680 URL Based Selection Wildcard Navigation
681 More on Route Params Pulling Streams Out of State
682 Selecting Records from State Component Isolation with React Router
683 Fetching a Stream for Edit Stream Real Code Reuse
684 Refactoring Stream Creation Setting Initial Values
685 Avoiding Changes to Properties Edit Form Submission
686 PUT vs PATCH Requests
687 Why Use Portals More on Using Portals
688 Creating a Portal Hiding a Modal
689 Making the Modal Reusable React Fragments
690 onDismiss From the Parent Reminder on Path Params
691 Fetching the Deletion Stream Conditionally Showing Stream Details
692 Deleting a Stream
693 Viewing a Stream Switches with React Router
694 RTMP NodeMediaServer is not a constructor error fix
695 Showing a Stream RTMP Server Setup
696 OBS Installation
697 OBS Scene Setup
698 Video Player Setup Implementing FLV.js
699 Creating a FLV Player Optional Player Building
700 It works! Cleaning up Resources with componentWillUnmount
701 Context System An App with Context
702 App Generation Selecting a Language
703 A Touch More Setup Getting Data Into and Out of Context
704 Creating Context Objects Consuming the Context Value
705 Context Provider Gotchas Around Providers
706 Accessing Data With Consumers Pulling From Multiple Contexts
707 Replacing Redux with Context Creating a Store Component
708 Implementing a Language Store Rendering the Language Store
709 Connecting the Selector to the Store Connecting the Field and Button
710 Context vs Redux

Bonus!
711 Bonus!