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 | 47.5 Hours | 21.7 GB
eLearning | Skill level: All Levels

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 Exploring a Create-React-App Project
3 Starting and Stopping a React App
4 Javascript Module Systems
5 Displaying Content with Functional Components
6 Link to Completed Github Repo
7 Common Questions About My Environment
8 Important Codepen Info
9 Our First App
10 CodePen Solution and Blank White Screen Help
11 Critical Questions!
12 Installing Node JS
13 Important Update About React App Generation
14 Generating a React Project
15 Why Create React App

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

Communicating with Props
26 Three Tenets of Components
27 Passing and Receiving Props
28 Passing Multiple Props
29 Passing Props – Solutions
30 Component Reuse
31 Implementing an Approval Card
32 Showing Custom Children
33 Component Reuse
34 Exercise – Props
35 Props Exercise Solution
36 Application Overview
37 Exercise – Children
38 Children Exercise Solution
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
45 React’s Props System

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

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

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

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

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

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

On We Go…To Redux!
131 Introduction to Redux
132 Important Redux Notes
133 Redux by Analogy
134 A Bit More Analogy
135 Finishing the Analogy
136 Mapping the Analogy to Redux
137 Modeling with Redux
138 Creating Reducers
139 Rules of Reducers
140 Testing Our Example

Integrating React with Redux
141 React Cooperating with Redux
142 Configuring Connect with MapStateToProps
143 Building a List with Redux Data
144 Calling Action Creators from Components
145 Redux is Not Magic!
146 Functional Components with Connect
147 Conditional Rendering
148 Connecting Components to Redux
149 Exercise Solution – Connecting Components to Redux
150 React, Redux, and…React-Redux!
151 Design of the Redux App
152 How React-Redux Works
153 Redux Project Structure
154 Named vs Default Exports
155 Building Reducers
156 Wiring Up the Provider
157 The Connect Function

Async Actions with Redux Thunk
158 App Overview and Goals
159 Middlewares in Redux
160 Behind the Scenes of Redux Thunk
161 Shortened Syntax with Redux Thunk
162 Initial App Setup
163 Tricking Redux with Dummy Reducers
164 A Touch More Setup
165 How to Fetch Data in a Redux App
166 Wiring Up an Action Creator
167 Making a Request From an Action Creator
168 Understanding Async Action Creators
169 More on Async Action Creators

Redux Store Design
170 Rules of Reducers
171 Dispatching Correct Values
172 List Building!
173 Displaying Users
174 Fetching Singular Records
175 Displaying the User Header
176 Finding Relevant Users
177 Extracting Logic to MapStateToProps
178 That’s the Issue!
179 Memoizing Functions
180 Memoization Issues
181 Return Values from Reducers
182 One Time Memoization
183 Alternate Overfetching Solution
184 Action Creators in Action Creators!
185 Finding Unique User Ids
186 Quick Refactor with Chain
187 App Wrapup
188 Argument Values
189 Pure Reducers
190 Mutations in Javascript
191 Equality of Arrays and Objects
192 A Misleading Rule
193 Safe State Updates in Reducers
194 Switch Statements in Reducers

Navigation with React Router
195 App Outline
196 [Optional] – Different Router Types
197 Component Scaffolding
198 Wiring Up Routes
199 Always Visible Components
200 Connecting the Header
201 Links Inside Routers
202 Mockups in Detail
203 App Challenges
204 Initial Setup
205 Introducing React Router
206 How React Router Works
207 How Paths Get Matched
208 How to Not Navigate with React Router
209 Navigating with React Router

Handling Authentication with React
210 OAuth-Based Authentication
211 Redux Architecture Design
212 Redux Setup
213 Connecting Auth with Action Creators
214 Building the Auth Reducer
215 Handling Auth Status Through Redux
216 Fixed Action Types
217 Recording the User’s ID
218 OAuth for Servers vs Browser Apps
219 Creating OAuth Credentials
220 Wiring Up the Google API Library
221 Sending a User Into the OAuth Flow
222 Rendering Authentication Status
223 Updating Auth State
224 Displaying Sign In and Sign Out Buttons
225 On-Demand Sign In and Sign Out

Redux Dev Tools
226 Using Redux Dev Tools to Inspect the Store
227 Debug Sessions with Redux Dev Tools

Handling Forms with Redux Form
228 Forms with Redux Form
229 Showing Errors on Touch
230 Highlighting Errored Fields
231 Useful Redux Form Examples
232 Connecting Redux Form
233 Creating Forms
234 Automatically Handling Events
235 Customizing Form Fields
236 Handling Form Submission
237 Validation of Form Inputs
238 Displaying Validation Messages

REST-Based React Apps
239 Creating Streams
240 Handling Fetching, Creating, and Updating
241 Deleting Properties with Omit
242 Merging Lists of Records
243 Fetching a List of All Streams
244 Rendering All Streams
245 Associating Streams with Users
246 Conditionally Showing Edit and Delete
247 Linking to Stream Creation
248 When to Navigate Users
249 History References
250 REST-ful Conventions
251 History Object Deprecation Warning
252 Creating a Browser History Object
253 Implementing Programmatic Navigation
254 Manually Changing API Records
255 URL-Based Selection
256 Wildcard Navigation
257 More on Route Params
258 Selecting Records from State
259 Component Isolation with React Router
260 Fetching a Stream for Edit Stream
261 Setting Up an API Server
262 Real Code Reuse!
263 Refactoring Stream Creation
264 Setting Initial Values
265 Avoiding Changes to Properties
266 Edit Form Submission
267 PUT vs PATCH Requests
268 Creating Streams Through Action Creators
269 Creating a Stream with REST Conventions
270 Dispatching Actions After Stream Creation
271 Bulk Action Creators
272 Object-Based Reducers
273 Key Interpolation Syntax

Using React Portals
274 Why Use Portals
275 Conditionally Showing Stream Details
276 Deleting a Stream
277 More on Using Portals
278 Creating a Portal
279 Hiding a Modal
280 Making the Modal Reusable
281 React Fragments
282 OnDismiss From the Parent
283 Reminder on Path Params
284 Fetching the Deletion Stream

Implementing Streaming Video
285 Viewing a Stream
286 Creating a FLV Player
287 Optional Player Building
288 It Works!
289 Cleaning Up with ComponentWillUnmount
290 Switches with React-Router
291 Showing a Stream
292 RTMP NodeMediaServer is not a constructor error fix
293 RTMP Server Setup
294 OBS Installation
295 OBS Scene Setup
296 Video Player Setup
297 Implementing FLV JS

The Context System with React
298 The Context System
299 Gotchas Around Providers
300 Accessing Data with Consumers
301 Pulling From Multiple Contexts
302 An App with Context
303 App Generation
304 Selecting a Language
305 A Touch More Setup
306 Getting Data Out of Context
307 Creating Context Objects
308 Consuming the Context Value
309 The Context Provider

Replacing Redux with Context
310 Replacing Redux with Context
311 Creating a Store Component
312 Implementing a Language Store
313 Rendering the Language Store
314 Connecting the Selector to the Store
315 Connecting the Field and Button to the Store
316 Context vs Redux Recap

Hooks with Functional Components
317 Introducing Hooks
318 Lifecycles with UseEffect
319 Updates with UseEffect
320 Does It Get Called
321 Quick Gotcha with UseEffect
322 Rendering a List
323 Actual Code Reuse!
324 Code Reuse with Hooks
325 App Overview
326 Building Stateful Class Components
327 The UseState Hook
328 UseState in Detail
329 Building the ResourceList
330 Fetching a Given Resource
331 ComponentDidUpdate vs ComponentDIdMount
332 Refactoring a Class to a Function

More Fun with Hooks
333 Weather Hooks
334 Project Zip
335 App Overview
336 Refactoring a Class to a Function
337 Extracting Reusable Logic
338 That’s All For Now

[Legacy] An Intro to React
339 Introduction – Github Links for Project Files!
340 ES6 Import Statements
341 ReactDOM vs React
342 Differences Between Component Instances and Component Classes
343 Render Targets
344 Component Structure
345 Youtube Search API Signup
346 Export Statements
347 Class-Based Components
348 Handling User Events
349 Introduction to State
350 Completed Projects – Github Links
351 More on State
352 Controlled Components
353 Breather and Review
354 The Purpose of Boilerplate Projects
355 Environment Setup
356 Project Setup
357 Support for Create React App
358 A Taste of JSX
359 More on JSX
360 Quick Note – Getting Different Error Messages

[Legacy] Ajax Requests with React
361 Youtube Search Response
362 Styling with CSS
363 Searching for Videos
364 Throttling Search Term Input
365 React Wrapup
366 Refactoring Functional Components to Class Components
367 Props
368 Building Lists with Map
369 List Item Keys
370 Video List Items
371 Detail Component and Template Strings
372 Handling Null Props
373 Video Selection

[Legacy] Modeling Application State
374 Foreword on Redux
375 What is Redux
376 More on Redux
377 Even More on Redux!

[Legacy] Managing App State with Redux
378 Putting Redux to Practice
379 Consuming Actions in Reducers
380 Consuming Actions in Reducers Continued
381 Conditional Rendering
382 Reducers and Actions Review
383 Reducers
384 Containers – Connecting Redux to React
385 Containers Continued
386 Implementation of a Container Class
387 Containers and Reducers Review
388 Actions and Action Creators
389 Binding Action Creators
390 Creating an Action

[Legacy] Intermediate Redux Middleware
391 App Overview and Planning
392 Avoiding State Mutations in Reducers
393 Building a List Container
394 Mapping Props to a Render Helper
395 Adding Sparkline Charts
396 Making a Reusable Chart Component
397 Labeling of Units
398 Google not Defined Errors
399 Google Maps Integration
400 Google Maps Integration Continued
401 Project Review
402 Component Setup
403 Controlled Components and Binding Context
404 Form Elements in React
405 Working with API’s
406 Introduction to Middleware
407 Ajax Requests with Axios
408 Redux-Promise in Practice
409 Redux-Promise Continued

[Legacy] React Router + Redux Form v6
410 App Overview and Goals
411 Back to Redux – Index Action
412 Implementing Posts Reducer
413 Action Creator Shortcuts
414 Rendering a List of Posts
415 Creating New Posts
416 A React Router Gotcha
417 Navigation with the Link Component
418 Redux Form
419 Setting Up Redux Form
420 The Field Component
421 Posts API
422 Generalizing Fields
423 Validating Forms
424 Showing Errors to Users
425 Handling Form Submittal
426 Form and Field States
427 Conditional Styling
428 More on Navigation
429 Create Post Action Creator
430 Navigation Through Callbacks
431 The Posts Show Component
432 Quick Note
433 Receiving New Posts
434 Selecting from OwnProps
435 Data Dependencies
436 Caching Records
437 Deleting a Post
438 Wrapup
439 Installing React Router
440 What React Router Does
441 The Basics of React Router
442 Route Design
443 Our First Route Definition
444 State as an Object

[Legacy – Do Not Take] Bonus – RallyCoding
445 Basics of Redux Thunk
446 Deployment of ReactWebpack Apps
447 BrowserHistory in Production
448 React Integration with 3rd Party Libraries
449 Introducing JSPlaygrounds for Rapid Prototyping
450 Combining Redux and Firebase
451 Dynamic Forms with Redux Form
452 Logicless Components with Reselect
453 Data Loading Methods with Redux
454 Animation of React Components
455 The Best Way to Store Redux Data
456 Four Most Common Errors with React and Redux
457 Modals in React and Redux Apps

[Legacy – Do Not Take] React Router + Redux Form v4
458 Important Note – Do Not Skip!
459 Back To Redux – Index Action
460 Catching Data with Posts Reducer
461 Catching Data with Posts Reducer Continued
462 Fetching Data with Lifecycle Methods
463 Fetching Data with Lifecycle Methods Continued
464 Creating New Posts
465 Navigation with the Link Component
466 Forms and Form Submission
467 More on Forms and Form Submission
468 Passing Control to Redux Form
469 App Overview and Goals
470 CreatePost Action Creator
471 Form Validation
472 Form Validation Continued
473 Navigating on Submit
474 Posts Index
475 Dynamic Route Params
476 Loading Data on Render
477 Handling Null Props
478 Delete Action Creator
479 Navigate on Delete
480 Exploring the Posts Api
481 ReactRouter and ReduxForm Wrapup
482 Installing React Router
483 React Router – What is It
484 Setting Up React Router
485 Route Configuration
486 Nesting Of Routes
487 IndexRoutes with React Router

488 Bonus!