Modern React with Redux [2020 Update]

Modern React with Redux [2020 Update]

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 52h 23m | 25.9 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 Converting HTML to JSX
16 Inline Styling with JSX
17 Converting Styling to JSX Format
18 Class vs ClassName
19 Referencing JS Variables in JSX
20 Values JSX Can’t Show
21 Finding Forbidden Property Names
22 Exercise Introduction
23 JSX Exercise Solution

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

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

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

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

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

Making API Requests with React
92 Fetching Data
93 Axios vs Fetch
94 Viewing Request Results
95 Handling Requests with Async Await
96 Setting State After Async Requests
97 Binding Callbacks
98 Creating Custom Clients

Building Lists of Records
99 Rendering Lists
100 Review of Map Statements
101 Rendering Lists of Components
102 The Purpose of Keys in Lists
103 Implementing Keys in Lists
104 Exercise Overview – List Building
105 Exercise Solution

Using Ref’s for DOM Access
106 Grid CSS
107 Issues with Grid CSS
108 Creating an Image Card Component
109 Accessing the DOM with Refs
110 Accessing Image Height
111 Callbacks on Image Load
112 Dynamic Spans
113 App Review

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

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

Navigation From Scratch
196 Navigation in React
197 Basic Component Routing
198 Building a Reusable Route Component
199 Implementing a Header for Navigation
200 Handling Navigation
201 Building a Link
202 Changing the URL
203 Detecting Navigation
204 Updating the Route
205 Handling Command Clicks

Hooks in Practice
206 Project Overview
207 Refactoring the SearchBar
208 Refactoring the App
209 Removing a Callback
210 Overview on Custom Hooks
211 Process for Building Custom Hooks
212 Extracting Video Logic
213 Using the Custom Hook
214 Exercise Overview – Custom Hooks
215 Exercise Solution

Deploying a React App
216 Deployment Overview
217 Deployment with Vercel
218 Deployment with Netlify

On We Go…To Redux!
219 Introduction to Redux
220 Redux by Analogy
221 A Bit More Analogy
222 Finishing the Analogy
223 Mapping the Analogy to Redux
224 Modeling with Redux
225 Creating Reducers
226 Rules of Reducers
227 Testing Our Example
228 Important Redux Notes
229 Finished Insurance Policy Code

Integrating React with Redux
230 React Cooperating with Redux
231 React, Redux, and…React-Redux!
232 Design of the Redux App
233 How React-Redux Works
234 Redux Project Structure
235 Named vs Default Exports
236 Building Reducers
237 Wiring Up the Provider
238 The Connect Function
239 Configuring Connect with MapStateToProps
240 Building a List with Redux Data
241 Solution to Extracting More Data
242 Calling Action Creators from Components
243 Redux is Not Magic!
244 Functional Components with Connect
245 Conditional Rendering
246 Exercise Solution – Connecting Components to Redux

Async Actions with Redux Thunk
247 App Overview and Goals
248 Initial App Setup
249 Tricking Redux with Dummy Reducers
250 A Touch More Setup
251 How to Fetch Data in a Redux App
252 Wiring Up an Action Creator
253 Making a Request From an Action Creator
254 Understanding Async Action Creators
255 More on Async Action Creators
256 Middlewares in Redux
257 Behind the Scenes of Redux Thunk
258 Shortened Syntax with Redux Thunk

Redux Store Design
259 Rules of Reducers
260 Return Values from Reducers
261 Argument Values
262 Pure Reducers
263 Mutations in Javascript
264 Equality of Arrays and Objects
265 A Misleading Rule
266 Safe State Updates in Reducers
267 Switch Statements in Reducers
268 Reducer Case Solution
269 Dispatching Correct Values
270 List Building!
271 Displaying Users
272 Fetching Singular Records
273 Displaying the User Header
274 Finding Relevant Users
275 Extracting Logic to MapStateToProps
276 That’s the Issue!
277 Memoizing Functions
278 Memoization Issues
279 One Time Memoization
280 Alternate Overfetching Solution
281 Action Creators in Action Creators!
282 Finding Unique User Ids
283 Quick Refactor with Chain
284 App Wrapup

Navigation with React Router
285 App Outline
286 Mockups in Detail
287 App Challenges
288 Initial Setup
289 Introducing React Router
290 How React Router Works
291 How Paths Get Matched
292 How to Not Navigate with React Router
293 Navigating with React Router
294 [Optional] – Different Router Types
295 Component Scaffolding
296 Wiring Up Routes
297 Always Visible Components
298 Connecting the Header
299 Links Inside Routers
300 Exercise Overview – Additional Routes
301 Exercise Solution

Handling Authentication with React
302 OAuth-Based Authentication
303 OAuth for Servers vs Browser Apps
304 Creating OAuth Credentials
305 Wiring Up the Google API Library
306 Sending a User Into the OAuth Flow
307 Rendering Authentication Status
308 Updating Auth State
309 Displaying Sign In and Sign Out Buttons
310 On-Demand Sign In and Sign Out
311 Redux Architecture Design
312 Redux Setup
313 Connecting Auth with Action Creators
314 Building the Auth Reducer
315 Handling Auth Status Through Redux
316 Fixed Action Types
317 Recording the User’s ID

Redux Dev Tools
318 Using Redux Dev Tools to Inspect the Store
319 Debug Sessions with Redux Dev Tools

Handling Forms with Redux Form
320 Forms with Redux Form
321 Useful Redux Form Examples
322 Connecting Redux Form
323 Creating Forms
324 Automatically Handling Events
325 Customizing Form Fields
326 Handling Form Submission
327 Validation of Form Inputs
328 Displaying Validation Messages
329 Showing Errors on Touch
330 Highlighting Errored Fields

REST-Based React Apps
331 Creating Streams
332 REST-ful Conventions
333 Setting Up an API Server
334 Creating Streams Through Action Creators
335 Creating a Stream with REST Conventions
336 Dispatching Actions After Stream Creation
337 Bulk Action Creators
338 Object-Based Reducers
339 Key Interpolation Syntax
340 Handling Fetching, Creating, and Updating
341 Deleting Properties with Omit
342 Merging Lists of Records
343 Fetching a List of All Streams
344 Rendering All Streams
345 Associating Streams with Users
346 Conditionally Showing Edit and Delete
347 Linking to Stream Creation
348 When to Navigate Users
349 History References
350 History Object Deprecation Warning
351 Creating a Browser History Object
352 Implementing Programmatic Navigation
353 Manually Changing API Records
354 URL-Based Selection
355 Wildcard Navigation
356 More on Route Params
357 Selecting Records from State
358 Component Isolation with React Router
359 Fetching a Stream for Edit Stream
360 Real Code Reuse!
361 Refactoring Stream Creation
362 Setting Initial Values
363 Avoiding Changes to Properties
364 Edit Form Submission
365 PUT vs PATCH Requests

Using React Portals
366 Why Use Portals
367 More on Using Portals
368 Creating a Portal
369 Hiding a Modal
370 Making the Modal Reusable
371 React Fragments
372 OnDismiss From the Parent
373 Reminder on Path Params
374 Fetching the Deletion Stream
375 Conditionally Showing Stream Details
376 Deleting a Stream
377 Exercise Overview – Closing the Modal
378 Exercise Solution

Implementing Streaming Video
379 Viewing a Stream
380 Switches with React-Router
381 Showing a Stream
382 RTMP NodeMediaServer is not a constructor error fix
383 RTMP Server Setup
384 OBS Installation
385 OBS Scene Setup
386 Video Player Setup
387 Implementing FLV JS
388 Creating a FLV Player
389 Optional Player Building
390 It Works!
391 Cleaning Up with ComponentWillUnmount
392 Exercise Overview – Adding Some Filtering
393 Exercise Solution

The Context System with React
394 The Context System
395 An App with Context
396 App Generation
397 Selecting a Language
398 A Touch More Setup
399 Getting Data Out of Context
400 Creating Context Objects
401 Consuming the Context Value
402 The Context Provider
403 Gotchas Around Providers
404 Accessing Data with Consumers
405 Pulling From Multiple Contexts
406 Exercise Overview – Consuming Context Values From Providers
407 Exercise Solution

Replacing Redux with Context
408 Replacing Redux with Context
409 Creating a Store Component
410 Implementing a Language Store
411 Rendering the Language Store
412 Connecting the Selector to the Store
413 Connecting the Field and Button to the Store
414 Context vs Redux Recap
415 That’s All For Now

Working with Older Versions of React
416 Note on the Following Videos
417 Introduction – Github Links for Project Files!
418 Completed Projects – Github Links
419 Project Setup
420 A Taste of JSX
421 More on JSX
422 Quick Note – Getting Different Error Messages
423 ES6 Import Statements
424 ReactDOM vs React
425 Differences Between Component Instances and Component Classes
426 Render Targets
427 Component Structure
428 Youtube Search API Signup
429 Export Statements
430 Class-Based Components
431 Handling User Events
432 Introduction to State
433 More on State
434 Controlled Components
435 Breather and Review

Ajax Requests with React
436 Youtube Search Response
437 Refactoring Functional Components to Class Components
438 Props
439 Building Lists with Map
440 List Item Keys
441 Video List Items
442 Detail Component and Template Strings
443 Handling Null Props
444 Video Selection
445 Styling with CSS
446 Searching for Videos
447 Throttling Search Term Input
448 React Wrapup

Modeling Application State
449 Foreword on Redux
450 What is Redux
451 More on Redux
452 Even More on Redux!

Managing App State with Redux
453 Putting Redux to Practice
454 Reducers
455 Containers – Connecting Redux to React
456 Containers Continued
457 Implementation of a Container Class
458 Containers and Reducers Review
459 Actions and Action Creators
460 Binding Action Creators
461 Creating an Action
462 Consuming Actions in Reducers
463 Consuming Actions in Reducers Continued
464 Conditional Rendering
465 Reducers and Actions Review

Intermediate Redux Middleware
466 App Overview and Planning
467 Component Setup
468 Controlled Components and Binding Context
469 Form Elements in React
470 Working with API’s
471 Introduction to Middleware
472 Ajax Requests with Axios
473 Redux-Promise in Practice
474 Redux-Promise Continued
475 Avoiding State Mutations in Reducers
476 Building a List Container
477 Mapping Props to a Render Helper
478 Adding Sparkline Charts
479 Making a Reusable Chart Component
480 Labeling of Units
481 Google not Defined Errors
482 Google Maps Integration
483 Google Maps Integration Continued
484 Project Review

React Router + Redux Form v6
485 App Overview and Goals
486 Posts API
487 Quick Note
488 Installing React Router
489 What React Router Does
490 The Basics of React Router
491 Route Design
492 Our First Route Definition
493 State as an Object
494 Back to Redux – Index Action
495 Implementing Posts Reducer
496 Action Creator Shortcuts
497 Rendering a List of Posts
498 Creating New Posts
499 A React Router Gotcha
500 Navigation with the Link Component
501 Redux Form
502 Setting Up Redux Form
503 The Field Component
504 Generalizing Fields
505 Validating Forms
506 Showing Errors to Users
507 Handling Form Submittal
508 Form and Field States
509 Conditional Styling
510 More on Navigation
511 Create Post Action Creator
512 Navigation Through Callbacks
513 The Posts Show Component
514 Receiving New Posts
515 Selecting from OwnProps
516 Data Dependencies
517 Caching Records
518 Deleting a Post
519 Wrapup

Bonus Topics
520 Basics of Redux Thunk
521 Combining Redux and Firebase
522 Dynamic Forms with Redux Form
523 Logicless Components with Reselect
524 Data Loading Methods with Redux
525 Animation of React Components
526 The Best Way to Store Redux Data
527 Four Most Common Errors with React and Redux
528 Modals in React and Redux Apps
529 Deployment of React Webpack Apps
530 BrowserHistory in Production
531 React Integration with 3rd Party Libraries
532 Introducing JSPlaygrounds for Rapid Prototyping

React Router + Redux Form v4
533 Important Note – Do Not Skip!
534 App Overview and Goals
535 Exploring the Posts Api
536 Installing React Router
537 React Router – What is It
538 Setting Up React Router
539 Route Configuration
540 Nesting Of Routes
541 IndexRoutes with React Router
542 Back To Redux – Index Action
543 Catching Data with Posts Reducer
544 Catching Data with Posts Reducer Continued
545 Fetching Data with Lifecycle Methods
546 Fetching Data with Lifecycle Methods Continued
547 Creating New Posts
548 Navigation with the Link Component
549 Forms and Form Submission
550 More on Forms and Form Submission
551 Passing Control to Redux Form
552 CreatePost Action Creator
553 Form Validation
554 Form Validation Continued
555 Navigating on Submit
556 Posts Index
557 Dynamic Route Params
558 Loading Data on Render
559 Handling Null Props
560 Delete Action Creator
561 Navigate on Delete
562 ReactRouter and ReduxForm Wrapup

563 Bonus!