Modern React with Redux [2020 Update]

Modern React with Redux [2020 Update]
Modern React with Redux [2020 Update]
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 52 Hours | 25.8 GB

Master React v16.6.3 and Redux with React Router, Webpack, and Create-React-App. Includes Hooks!

Course Last Updated for React v16.6.3 and Redux v4.0.1! All content is brand new! Update includes detailed videos on the new React Hooks system.

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 dozens 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. 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
  • Integrate React with advanced browser features, even geolocation API’s!
  • Use popular styling libraries to build beautiful apps
  • Master different techniques of deployment so you can show off the apps you build!
  • See different methods of building UI’s through composition of components

Besides just React and Redux, you’ll pick up countless other tidbits of knowledge, including ES2015 syntax, popular design patterns, even the clearest explanation of the keyword ‘this’ in Javascript that you’ll ever hear.

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

What you’ll learn

  • Build amazing single page applications with React JS and Redux
  • Master fundamental concepts behind structuring Redux applications
  • Realize the power of building composable components
  • Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
  • Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax
Table of Contents

Let’s Dive In!
1 How to Get Help
2 Our First App
3 Critical Questions!
4 Installing Node JS
5 Important Update About React App Generation
6 Generating a React Project
7 Why Create React App
8 Exploring a Create-React-App Project
9 Starting and Stopping a React App
10 Javascript Module Systems
11 Displaying Content with Functional Components
12 Link to Completed Github Repo
13 Common Questions About My Environment

Building Content with JSX
14 What is JSX
15 JSX Exercise Solution
16 Converting HTML to JSX
17 Inline Styling with JSX
18 Converting Styling to JSX Format
19 Class vs ClassName
20 Referencing JS Variables in JSX
21 Values JSX Can’t Show
22 Finding Forbidden Property Names
23 Exercise Introduction

Communicating with Props
24 Three Tenets of Components
25 React’s Props System
26 Passing and Receiving Props
27 Passing Multiple Props
28 Passing Props – Solutions
29 Component Reuse
30 Implementing an Approval Card
31 Showing Custom Children
32 Component Reuse
33 Exercise – Props
34 Application Overview
35 Props Exercise Solution
36 Exercise – Children
37 Children Exercise Solution
38 Semantic UI CDN Link
39 Getting Some Free Styling
40 Naive Component Approach
41 Specifying Images in JSX
42 Duplicating a Single Component
43 Extracting JSX to New Components
44 Component Nesting

Structuring Apps with Class-Based Components
45 Class-Based Components
46 Application Overview
47 Scaffolding the App
48 Getting a Users Physical Location
49 Resetting Geolocation Preferences
50 Handling Async Operations with Functional Components
51 Refactoring from Functional to Class Components

State in React Components
52 The Rules of State
53 Initializing State Through Constructors
54 Updating State Properties
55 App Lifecycle Walkthrough
56 Handling Errors Gracefully
57 Conditionally Rendering Content

Understanding Lifecycle Methods
58 Introducing Lifecycle Methods
59 Adding Some Styling
60 Showing a Loading Spinner
61 Specifying Default Props
62 Avoiding Conditionals in Render
63 Breather and Review
64 Exercise Solution – Class-Based Components
65 Updating Components with State
66 Why Lifecycle Methods
67 Refactoring Data Loading to Lifecycle Methods
68 Alternate State Initialization
69 Passing State as Props
70 Determining Season
71 Ternary Expressions in JSX
72 Showing Icons
73 Extracting Options to Config Objects

Handling User Input with Forms and Events
74 App Overview
75 Handling Form Submittal
76 Understanding ‘this’ In Javascript
77 Solving Context Issues
78 Communicating Child to Parent
79 Invoking Callbacks in Children
80 Component Design
81 Adding Some Project Structure
82 Showing Forms to the User
83 Adding a Touch of Style
84 Creating Event Handlers
85 Alternate Event Handler Syntax
86 Uncontrolled vs Controlled Elements
87 More on Controlled Elements

Making API Requests with React
88 Fetching Data
89 Axios vs Fetch
90 Viewing Request Results
91 Handling Requests with Async Await
92 Setting State After Async Requests
93 Binding Callbacks
94 Creating Custom Clients

Building Lists of Records
95 Rendering Lists
96 Review of Map Statements
97 Rendering Lists of Components
98 The Purpose of Keys in Lists
99 Implementing Keys in Lists

Using Ref’s for DOM Access
100 Grid CSS
101 Issues with Grid CSS
102 Creating an Image Card Component
103 Accessing the DOM with Refs
104 Accessing Image Height
105 Callbacks on Image Load
106 Dynamic Spans
107 App Review

Let’s Test Your React Mastery!
108 App Overview
109 Putting it All Together
110 Updating State with Fetched Data
111 Passing State as Props
112 Rendering a List of Videos
113 Rendering Video Thumbnails
114 Styling a List
115 Communicating from Child to Parent
116 Deeply Nested Callbacks
117 Conditional Rendering
118 Styling the VideoDetail
119 Component Design
120 Displaying a Video Player
121 Fixing a Few Warnings
122 Defaulting Video Selection
123 Scaffolding the App
124 Reminder on Event Handlers
125 Handling Form Submittal
126 Accessing the Youtube API
127 Axios Version Bug & 400 Required Parameter part Error
128 Searching for Videos
129 Adding a Video Type

Understanding Hooks in React
130 React Hooks
131 Expanding the Accordion
132 Exercise Overview
133 Exercise Solution
134 Creating Additional Widgets
135 The Search Widget Architecture
136 Scaffolding the Widget
137 Text Inputs with Hooks
138 When do we Search
139 The useEffect Hook
140 Important Note
141 Testing Execution
142 Async Code in useEffect
143 Executing the Request from useEffect
144 Default Search Terms
145 List Building!
146 XSS Attacks in React
147 XSS Server Code
148 Linking to a Wikipedia Page
149 Only Search with a Term
150 App Architecture
151 Throttling API Requests
152 Reminder on setTimeout
153 useEffect’s Cleanup Function
154 Implementing a Delayed Request
155 Searching on Initial Render
156 Optional Video – Fixing a Warning
157 Dropdown Architecture
158 Scaffolding the Dropdown
159 A lot of JSX
160 Selection State
161 Communicating the Items Prop
162 Filtering the Option List
163 Hiding and Showing the Option List
164 Err… Why is this Hard
165 Reminder on Event Bubbling
166 Applying What We’ve Learned
167 Binding an Event Handler
168 Why Stay Open!
169 Which Element Was Clicked
170 Making use of useRef
171 Body Event Listener Cleanup
172 Building and Styling the Accordion
173 The Translate Widget
174 Scaffolding the Translate Component
175 Adding the Language Input
176 Understanding the Convert Component
177 Google Translate API Key
178 Building the Convert Component
179 Using the Google Translate API
180 Displaying Translated Text
181 Debouncing Translation Updates
182 Helper Functions in Function Components
183 Introducing useState
184 Understanding useState
185 Setter Functions

Navigation From Scratch
186 Navigation in React
187 Handling Command Clicks
188 Basic Component Routing
189 Building a Reusable Route Component
190 Implementing a Header for Navigation
191 Handling Navigation
192 Building a Link
193 Changing the URL
194 Detecting Navigation
195 Updating the Route

Hooks in Practice
196 Project Overview
197 Refactoring the SearchBar
198 Refactoring the App
199 Removing a Callback
200 Overview on Custom Hooks
201 Process for Building Custom Hooks
202 Extracting Video Logic
203 Using the Custom Hook

Deploying a React App
204 Deployment Overview
205 Deployment with Vercel
206 Deployment with Netlify

On We Go…To Redux!
207 Introduction to Redux
208 Important Redux Notes
209 Finished Insurance Policy Code
210 Redux by Analogy
211 A Bit More Analogy
212 Finishing the Analogy
213 Mapping the Analogy to Redux
214 Modeling with Redux
215 Creating Reducers
216 Rules of Reducers
217 Testing Our Example

Integrating React with Redux
218 React Cooperating with Redux
219 Configuring Connect with MapStateToProps
220 Building a List with Redux Data
221 Calling Action Creators from Components
222 Redux is Not Magic!
223 Functional Components with Connect
224 Conditional Rendering
225 Exercise Solution – Connecting Components to Redux
226 React, Redux, and…React-Redux!
227 Design of the Redux App
228 How React-Redux Works
229 Redux Project Structure
230 Named vs Default Exports
231 Building Reducers
232 Wiring Up the Provider
233 The Connect Function

Async Actions with Redux Thunk
234 App Overview and Goals
235 Middlewares in Redux
236 Behind the Scenes of Redux Thunk
237 Shortened Syntax with Redux Thunk
238 Initial App Setup
239 Tricking Redux with Dummy Reducers
240 A Touch More Setup
241 How to Fetch Data in a Redux App
242 Wiring Up an Action Creator
243 Making a Request From an Action Creator
244 Understanding Async Action Creators
245 More on Async Action Creators

Redux Store Design
246 Rules of Reducers
247 Dispatching Correct Values
248 List Building!
249 Displaying Users
250 Fetching Singular Records
251 Displaying the User Header
252 Finding Relevant Users
253 Extracting Logic to MapStateToProps
254 That’s the Issue!
255 Memoizing Functions
256 Memoization Issues
257 Return Values from Reducers
258 One Time Memoization
259 Alternate Overfetching Solution
260 Action Creators in Action Creators!
261 Finding Unique User Ids
262 Quick Refactor with Chain
263 App Wrapup
264 Argument Values
265 Pure Reducers
266 Mutations in Javascript
267 Equality of Arrays and Objects
268 A Misleading Rule
269 Safe State Updates in Reducers
270 Switch Statements in Reducers

Navigation with React Router
271 App Outline
272 [Optional] – Different Router Types
273 Component Scaffolding
274 Wiring Up Routes
275 Always Visible Components
276 Connecting the Header
277 Links Inside Routers
278 Mockups in Detail
279 App Challenges
280 Initial Setup
281 Introducing React Router
282 How React Router Works
283 How Paths Get Matched
284 How to Not Navigate with React Router
285 Navigating with React Router

Handling Authentication with React
286 OAuth-Based Authentication
287 Redux Architecture Design
288 Redux Setup
289 Connecting Auth with Action Creators
290 Building the Auth Reducer
291 Handling Auth Status Through Redux
292 Fixed Action Types
293 Recording the User’s ID
294 OAuth for Servers vs Browser Apps
295 Creating OAuth Credentials
296 Wiring Up the Google API Library
297 Sending a User Into the OAuth Flow
298 Rendering Authentication Status
299 Updating Auth State
300 Displaying Sign In and Sign Out Buttons
301 On-Demand Sign In and Sign Out

Redux Dev Tools
302 Using Redux Dev Tools to Inspect the Store
303 Debug Sessions with Redux Dev Tools

Handling Forms with Redux Form
304 Forms with Redux Form
305 Showing Errors on Touch
306 Highlighting Errored Fields
307 Useful Redux Form Examples
308 Connecting Redux Form
309 Creating Forms
310 Automatically Handling Events
311 Customizing Form Fields
312 Handling Form Submission
313 Validation of Form Inputs
314 Displaying Validation Messages

REST-Based React Apps
315 Creating Streams
316 Handling Fetching, Creating, and Updating
317 Deleting Properties with Omit
318 Merging Lists of Records
319 Fetching a List of All Streams
320 Rendering All Streams
321 Associating Streams with Users
322 Conditionally Showing Edit and Delete
323 Linking to Stream Creation
324 When to Navigate Users
325 History References
326 REST-ful Conventions
327 History Object Deprecation Warning
328 Creating a Browser History Object
329 Implementing Programmatic Navigation
330 Manually Changing API Records
331 URL-Based Selection
332 Wildcard Navigation
333 More on Route Params
334 Selecting Records from State
335 Component Isolation with React Router
336 Fetching a Stream for Edit Stream
337 Setting Up an API Server
338 Real Code Reuse!
339 Refactoring Stream Creation
340 Setting Initial Values
341 Avoiding Changes to Properties
342 Edit Form Submission
343 PUT vs PATCH Requests
344 Creating Streams Through Action Creators
345 Creating a Stream with REST Conventions
346 Dispatching Actions After Stream Creation
347 Bulk Action Creators
348 Object-Based Reducers
349 Key Interpolation Syntax

Using React Portals
350 Why Use Portals
351 Conditionally Showing Stream Details
352 Deleting a Stream
353 More on Using Portals
354 Creating a Portal
355 Hiding a Modal
356 Making the Modal Reusable
357 React Fragments
358 OnDismiss From the Parent
359 Reminder on Path Params
360 Fetching the Deletion Stream

Implementing Streaming Video
361 Viewing a Stream
362 Creating a FLV Player
363 Optional Player Building
364 It Works!
365 Cleaning Up with ComponentWillUnmount
366 Switches with React-Router
367 Showing a Stream
368 RTMP NodeMediaServer is not a constructor error fix
369 RTMP Server Setup
370 OBS Installation
371 OBS Scene Setup
372 Video Player Setup
373 Implementing FLV JS

The Context System with React
374 The Context System
375 Gotchas Around Providers
376 Accessing Data with Consumers
377 Pulling From Multiple Contexts
378 An App with Context
379 App Generation
380 Selecting a Language
381 A Touch More Setup
382 Getting Data Out of Context
383 Creating Context Objects
384 Consuming the Context Value
385 The Context Provider

Replacing Redux with Context
386 Replacing Redux with Context
387 Creating a Store Component
388 Implementing a Language Store
389 Rendering the Language Store
390 Connecting the Selector to the Store
391 Connecting the Field and Button to the Store
392 Context vs Redux Recap
393 That’s All For Now

Working with Older Versions of React
394 Note on the Following Videos
395 ReactDOM vs React
396 Differences Between Component Instances and Component Classes
397 Render Targets
398 Component Structure
399 Youtube Search API Signup
400 Export Statements
401 Class-Based Components
402 Handling User Events
403 Introduction to State
404 More on State
405 Introduction – Github Links for Project Files!
406 Controlled Components
407 Breather and Review
408 Completed Projects – Github Links
409 Project Setup
410 Support for Create React App
411 A Taste of JSX
412 More on JSX
413 Quick Note – Getting Different Error Messages
414 ES6 Import Statements

Ajax Requests with React
415 Youtube Search Response
416 Styling with CSS
417 Searching for Videos
418 Throttling Search Term Input
419 React Wrapup
420 Refactoring Functional Components to Class Components
421 Props
422 Building Lists with Map
423 List Item Keys
424 Video List Items
425 Detail Component and Template Strings
426 Handling Null Props
427 Video Selection

Modeling Application State
428 Foreword on Redux
429 What is Redux
430 More on Redux
431 Even More on Redux!

Managing App State with Redux
432 Putting Redux to Practice
433 Consuming Actions in Reducers
434 Consuming Actions in Reducers Continued
435 Conditional Rendering
436 Reducers and Actions Review
437 Reducers
438 Containers – Connecting Redux to React
439 Containers Continued
440 Implementation of a Container Class
441 Containers and Reducers Review
442 Actions and Action Creators
443 Binding Action Creators
444 Creating an Action

Intermediate Redux Middleware
445 App Overview and Planning
446 Avoiding State Mutations in Reducers
447 Building a List Container
448 Mapping Props to a Render Helper
449 Adding Sparkline Charts
450 Making a Reusable Chart Component
451 Labeling of Units
452 Google not Defined Errors
453 Google Maps Integration
454 Google Maps Integration Continued
455 Project Review
456 Component Setup
457 Controlled Components and Binding Context
458 Form Elements in React
459 Working with API’s
460 Introduction to Middleware
461 Ajax Requests with Axios
462 Redux-Promise in Practice
463 Redux-Promise Continued

React Router + Redux Form v6
464 App Overview and Goals
465 Back to Redux – Index Action
466 Implementing Posts Reducer
467 Action Creator Shortcuts
468 Rendering a List of Posts
469 Creating New Posts
470 A React Router Gotcha
471 Navigation with the Link Component
472 Redux Form
473 Setting Up Redux Form
474 The Field Component
475 Posts API
476 Generalizing Fields
477 Validating Forms
478 Showing Errors to Users
479 Handling Form Submittal
480 Form and Field States
481 Conditional Styling
482 More on Navigation
483 Create Post Action Creator
484 Navigation Through Callbacks
485 The Posts Show Component
486 Quick Note
487 Receiving New Posts
488 Selecting from OwnProps
489 Data Dependencies
490 Caching Records
491 Deleting a Post
492 Wrapup
493 Installing React Router
494 What React Router Does
495 The Basics of React Router
496 Route Design
497 Our First Route Definition
498 State as an Object

Bonus Topics
499 Basics of Redux Thunk
500 Deployment of ReactWebpack Apps
501 BrowserHistory in Production
502 React Integration with 3rd Party Libraries
503 Introducing JSPlaygrounds for Rapid Prototyping
504 Combining Redux and Firebase
505 Dynamic Forms with Redux Form
506 Logicless Components with Reselect
507 Data Loading Methods with Redux
508 Animation of React Components
509 The Best Way to Store Redux Data
510 Four Most Common Errors with React and Redux
511 Modals in React and Redux Apps

React Router + Redux Form v4
512 Important Note – Do Not Skip!
513 App Overview and Goals
514 Exploring the Posts Api
515 Installing React Router
516 React Router – What is It
517 Setting Up React Router
518 Route Configuration
519 Nesting Of Routes
520 IndexRoutes with React Router
521 Back To Redux – Index Action
522 Catching Data with Posts Reducer
523 Catching Data with Posts Reducer Continued
524 Fetching Data with Lifecycle Methods
525 Fetching Data with Lifecycle Methods Continued
526 Creating New Posts
527 Navigation with the Link Component
528 Forms and Form Submission
529 More on Forms and Form Submission
530 Passing Control to Redux Form
531 CreatePost Action Creator
532 Form Validation
533 Form Validation Continued
534 Navigating on Submit
535 Posts Index
536 Dynamic Route Params
537 Loading Data on Render
538 Handling Null Props
539 Delete Action Creator
540 Navigate on Delete
541 ReactRouter and ReduxForm Wrapup

542 Bonus!