Modern React with Redux [2023 Update]

Modern React with Redux [2023 Update]

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 410 lectures (37h 40m) | 12.87 GB

Master React and Redux Toolkit. Includes RTK Query, tons of custom hooks, and more! Course 100% Updated November 2022

Congratulations! You’ve found the most popular, most complete, and most up-to-date resource online for learning React and Redux!

Thousands of other engineers have learned React and Redux, and you can too. This course uses a time-tested, battle-proven method to make sure you understand exactly how React and Redux work, and will get you a new job working as a software engineer or help you build that app you’ve always been dreaming about.

The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.

React is the most popular Javascript library of the last five years, and the job market is still hotter than ever. Companies large and small can’t hire engineers who understand React and Redux fast enough, and salaries for engineers are at an all time high. It’s a great time to learn React!

What will you build?

This course features hundreds of videos with hundreds of custom diagrams to help you understand how React and Redux work. No prior experience with either is necessary. Through tireless, patient explanations and many interesting practical examples, you’ll learn the fundamentals of building dynamic and live web apps using React.

Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge. You’ll find plenty of discussion added in to help you understand exactly when and where to use each feature of React and Redux.

My guarantee to you: there is no other course online that teaches more features of React and Redux Toolkit. This is the most comprehensive resource there is.

Below is a partial list of the topics you’ll find in this course:

  • Master the fundamental features of React, including JSX, state, and props
  • From square one, understand how to build reusable components
  • Dive into the source code of Redux to understand how it works behind the scenes
  • Test your knowledge and hone your skills with numerous coding exercises
  • Use popular styling libraries to build beautiful apps
  • See different methods of building UI’s through composition of components
  • Remember all these techniques with clearly-written cheatsheets

Besides just React and Redux, you’ll pick up countless other tidbits of knowledge, including design techniques, popular design patterns, and repeatable steps to build new components.

This is the course I wanted to take when I first learned React: complete, up-to-date, and clear.

What you’ll learn

  • Create dynamic web apps using the latest in web technology
  • Acquire the programming skills needed to obtain a software engineering job
  • Practice your skills with many large projects, exercises, and quizzes
  • Master the fundamentals concepts behind React and Redux
  • Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax
  • Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
  • Realize the power of building reusable components
Table of Contents

Lets Dive In
1 How to Get Help
2 Join Our Community
3 Course Resources
4 Lets Build an App
5 Critical Questions
6 A Few More Critical Questions
7 Node Setup
8 Creating a React Project
9 What is Create React App

Creating Content with JSX
10 Showing Basic Content
11 What is JSX
12 Printing JavaScript Variables in JSX
13 Shorthand JS Expressions
14 Exercise Overview
15 Exercise Solution
16 Typical Component Layouts
17 Customizing Elements with Props
18 Converting HTML to JSX
19 Applying Styling in JSX
20 Exercise Solution
21 Extracting Components
22 Module Systems Overview
23 Cheatsheet for JSX

Building with Reusable Components
24 Project Overview
25 Creating Core Components
26 Introducing the Props System
27 Picturing the Movement of Data
28 Adding Props
29 Using Argument Destructuring
30 Exercise Solution
31 The React Developer Tools
32 The Most Common Props Mistake
33 Images for the App
34 Including Images
35 Handling Image Accessibility
36 Review on how CSS Works
37 Adding CSS Libraries with NPM
38 A Big Pile of HTML
39 Last Bit of Styling

State How to Change Your App
40 App Overview
41 Initial App Setup
42 Introducing the Event System
43 Events in Detail
44 Variations on Event Handlers
45 Exercise Solution
46 Introducing the State System
47 More on State
48 Understanding the ReRendering Process
49 Why Array Destructuring
50 Back to the App
51 Picking a Random Element
52 List Building in React
53 Images for the App
54 Loading and Showing SVGs
55 Increasing Image Size
56 Adding Custom CSS
57 Finalizing Styling
58 App Wrapup and Review

Using an API with React
59 App Overview
60 Project Setup
61 The Path Forward
62 Overview of HTTP Requests
63 Understanding the API
64 Making an HTTP Request
65 Optional Using AsyncAwait
66 Data Fetching Cleanup
67 Thinking About Data Flow
68 Child to Parent Communication
69 Implementing Child to Parent Communication
70 Handling Form Submission
71 Handling Input Elements
72 Optional OK But Why
73 Exercise Solution
74 Running the Search
75 Reminder on AsyncAwait
76 Communicating the List of Images Down
77 Building a List of Images
78 Handling List Updates
79 Notes on Keys
80 Displaying Images
81 A Touch of Styling
82 App Wrapup

How to Handle Forms
83 App Overview
84 Initial Setup
85 State Location
86 Reminder on Event Handlers
87 Extra CSS
88 Receiving New Titles
89 Adding Styling
90 Updating State
91 Dont Mutate That State
92 State Updates Cheat Sheet
93 Optional Adding Elements to the Start or End
94 Optional Exercise Solution
95 Optional Inserting Elements
96 Optional Exercise Solution
97 Optional Removing Elements
98 Optional Exercise Solution
99 Optional Modifying Elements
100 Super Optional Why the Special Syntax
101 Optional Exercise Solution
102 Optional Adding Changing or Removing Object Properties
103 Cheatsheet for State Changes
104 Adding a Book For Real
105 Generating Random IDs
106 Displaying the List
107 Deleting Records
108 Toggling Form Display
109 Default Form Values
110 Updating the Title
111 Closing the Form on Submit
112 A Better Solution
113 Collapsing Two Handlers into One
114 Adding Images

Data Persistence with API Requests
115 Adding Data Persistence
116 Server Setup
117 What Just Happened
118 How the API Works
119 Introducing the REST Client
120 ECONNREFUSED 1270013001 Errors in VSCode
121 Using the REST Client
122 Creating a New Record
123 Fetching a List of Records
124 Introducing useEffect
125 useEffect in Action
126 More on useEffect
127 Updating a Record
128 Thinking About Updates
129 Deleting a Record

Communication Using the Context System
130 Introducing Context
131 Context in Action
132 Changing Context Values
133 More on Changing Context
134 Application vs Component State
135 Refactoring to Use Context
136 Refactoring the App
137 Quick Note
138 Reminder on Sharing with Context
139 Props and Context Together
140 Last Bit of Refactoring
141 A Small Taste of Reusable Hooks

Deeper Dive into Hooks
142 Return to useEffect
143 Quick Note
144 Understanding the Issue
145 Applying the Fix
146 ESLint is Good but be Careful
147 Stable References with useCallback
148 Fixing Bugs with useCallback
149 useEffect Cleanup Functions
150 The Purpose of Cleanup Functions

Custom Navigation and Routing Systems
151 Project Overview
152 Project Setup
153 Some Button Theory
154 Underlying Elements
155 The Children Prop
156 Props Design
157 Validating Props with PropTypes
158 PropTypes in Action
159 Introducing TailwindCSS
160 Installing Tailwind
161 How to use Tailwind
162 Review on Styling
163 The ClassNames Library
164 Building Some Variations
165 Finalizing the Variations
166 Using Icons in React Projects
167 Issues with Event Handlers
168 Passing Props Through
169 Handling the Special ClassName Case

Mastering the State Design Process
170 Project Organization
171 Refactoring with Organization
172 Component Overview
173 Component Setup
174 Reminder on Building Lists
175 Quick Note
176 State Design Process Overview
177 Finding the Expanded Item
178 Conditional Rendering
179 Inline Event Handlers
180 Variation on Event Handlers
181 Conditional Icon Rendering
182 Displaying Icons
183 Adding Styling
184 Toggling Panel Collapse
185 Quick Note
186 Optional Delayed State Updates
187 Optional Functional State Updates
188 Exercise Solution

Practicing Props and State Design
189 Component Overview
190 Designing the Props
191 Component Creation
192 Optional More State Design
193 Finally Implementation
194 Reminder on Event Handlers in Maps
195 Dropdown as a Controlled Component
196 Controlled Component Implementation
197 Existence Check Helper
198 Community Convention with Props Names
199 Exercise Solution
200 Adding Styling
201 The Panel Component
202 Creating the Reusable Panel
203 A Challenging Extra Feature
204 DocumentWide Click Handlers
205 Event Capture and Bubbling
206 Putting it All Together
207 Why a Capture Phase Handler
208 Reminder on the useEffect Function
209 Reminder on useEffect Cleanup
210 Issues with Element References
211 useRef in Action
212 Checking Click Location

Making Navigation Reusable
213 Traditional Browser Navigation
214 Theory of Navigation in React
215 Extracting the DropdownPage
216 Answering Critical Questions
217 The PushState Function
218 Handling Link Clicks
219 Handling BackForward Buttons
220 Navigation Context
221 Listening to Forward and Back Clicks
222 Programmatic Navigation
223 A Link Component
224 A Route Component
225 Handling Control and Command Keys
226 Link Styling
227 Custom Navigation Hook
228 Adding a Sidebar Component
229 Highlighting the Active Link
230 Navigation Wrapup

Creating Portals with ReactDOM
231 Modal Component Overview
232 Toggling Visibility
233 At First Glance Easy
234 Were Lucky it Works At All
235 Fixing the Modal with Portals
236 Closing the Modal
237 Customizing the Modal
238 Additional Styling
239 One Small Bug
240 Modal Wrapup

Make a FeatureFull Data Table
241 Creating a Reusable table
242 Communicating Data to the Table
243 Reminder on Table HTML Structure
244 Building the Rows
245 Better Styling
246 Done But Its Not Reusable
247 Heres the Idea
248 Dynamic Table Headers
249 Rendering Individual Cells
250 Fixed Cell Values
251 Nested Maps
252 Fixing the Color
253 Adding a Key Function

Getting Clever with Data Sorting
254 Adding Sorting to the Table
255 Reminder on Sorting in JavaScript
256 Sorting Strings
257 Sorting Objects
258 Object Sort Implementation
259 Reversing Sort Order
260 Optional Sorting
261 A Small Extra Feature
262 Customizing Header Cells
263 React Fragments
264 The Big Reveal
265 Adding SortableTable
266 Watching for Header Cell Clicks
267 Quick State Design
268 Adding Sort State
269 Yessssss It Worked
270 Determining Icon Set
271 Styling Header Cells
272 Resetting Sort Order
273 Table Wrapup

Custom Hooks In Depth
274 Exploring Code Reuse
275 Revisiting Custom Hooks
276 Creating the Demo Component
277 Custom Hook Creation
278 Quick Note
279 Hook Creation Process in Depth
280 Making a Reusable Sorting Hook

Into the World of Reducers
281 App Overview
282 Adding the Form
283 More on the Form
284 useReducer in Action
285 Rules of Reducer Functions
286 Understanding Action Objects
287 Constant Action Types
288 Refactoring to a Switch
289 Adding New State Updates
290 A Few Design Considerations Around Reducers
291 Introducing Immer
292 Immer in Action

Dive Into Redux Toolkit
293 Into the World of Redux
294 Redux vs Redux Toolkit
295 App Overview
296 The Path Forward
297 Implementation Time
298 Understanding the Store
299 The Stores Initial State
300 Understanding Slices
301 Understanding Action Creators
302 Connecting React to Redux
303 Updating State from a Component
304 Accessing State in a Component
305 Removing Content
306 Practice Updating State
307 Practice Accessing State
308 Even More State Updating
309 Resetting State
310 Multiple State Updates
311 Understanding Action Flow
312 Watching for Other Actions
313 Getting an Action Creators Type
314 Manual Action Creation
315 File and Folder Structure
316 Refactoring the Project Structure
317 Link to Completed Project

Managing Multiple Slices with Redux Toolkit
318 Project Overview
319 Adding Component Boilerplate
320 Thinking About Derived State
321 Thinking About Redux Design
322 Adding the Form Slice
323 Maintaining a Collection with a Slice
324 Creating the Store
325 Form Values to Update State
326 Receiving the Cost
327 Dispatching During the Form Submission
328 Awkward Double Keys
329 Listing the Records
330 Deleting Records
331 CSS File for Download
332 Adding Styling
333 Form Reset on Submission
334 Reminder on ExtraReducers
335 Adding a Searching Input
336 Derived State in useSelector
337 Total Car Cost
338 Highlighting Existing Cars

Interfacing with APIs Using Async Thunks
339 App Overview
340 Adding a Few Dependencies
341 Initial App Boilerplate
342 API Server Setup
343 Component Files
344 Adding a Few Components
345 Creating the Redux Store
346 Thinking About Data Structuring
347 Reminder on Request Conventions
348 Data Fetching Techniques
349 Optional Async Thunks Section
350 Adding State for Data Loading
351 Understanding Async Thunks
352 Steps for Adding a Thunk
353 More on Adding Thunks
354 Wrapping up the Thunk
355 Using Loading State
356 Adding a Pause for Testing
357 Adding a Skeleton Loader
358 Animations with TailwindCSS
359 Rendering the List of Users
360 Creating New Users
361 Unexpected Loading State
362 Strategies for FineGrained Loading State
363 Local FineGrained Loading State
364 More on Loading State
365 Handling Errors with User Creation
366 Creating a Reusable Thunk Hook
367 Creating a FetchAware Button Component
368 Better Skeleton Display
369 A Thunk to Delete a User
370 Updating the Slice
371 Refactoring the Component
372 Deleting the User
373 Fixing a Delete Error
374 Album Feature Overview
375 Additional Components
376 Adding the ExpandablePanel
377 Wrapping Up the ExpandablePanel
378 Adding the Albums Listing

Modern Async with Redux Toolkit Query
379 Skipping to this Section
380 Optional Getting Caught Up
381 Introducing Redux Toolkit Query
382 Creating a RTK Query API
383 Creating an Endpoint
384 Using the Generated Hook
385 A Few Immediate Notes
386 Rendering the List
387 Changing Data with Mutations
388 Differences Between Queries and Mutations
389 Options for Refetching Data
390 Request DeDuplication
391 Some Internals of Redux Toolkit Query
392 Refetching with Tags
393 FineGrained Tag Validation
394 Styling Fixups
395 Adding a Pause for Testing
396 Implementing Delete Endpoints
397 Refactoring the List
398 Remove Implementation
399 Easy Tag Invalidation
400 Getting Clever with Cache Tags
401 More Clever Tag Implementation
402 Photos Feature Overview
403 Lots of Photos Setup
404 Adding the Endpoints
405 Creating the Photo
406 Showing the List of Photos
407 Adding MouseOver Deletes
408 Adding Automatic Data Refetching

Old Version of Course
409 Old Version of Course

410 Bonus