Udemy - [Stephen Grider] Modern React with Redux [2019 Update]

4422
3
2020-01-23 21:44:00
26
6
124
11
Udemy
视频选集
(23/468)
1 How to Get Help
01:02
2 Our First App
10:19
3 Critical Questions
07:32
4 Installing Node JS
03:41
5 Generating a React Project
05:11
6 Why Create React App
05:26
7 Exploring a CreateReactApp Project
04:09
8 Starting and Stopping a React App
03:38
9 Javascript Module Systems
07:55
10 Displaying Content with Functional Components
04:57
11 What is JSX
05:13
12 Converting HTML to JSX
05:39
13 Inline Styling with JSX
03:14
14 Converting Styling to JSX Format
03:09
15 Class vs ClassName
02:20
16 Referencing JS Variables in JSX
02:55
17 Values JSX Cant Show
05:04
18 Finding Forbidden Property Names
03:07
19 Exercise Introduction
01:38
20 JSX Exercise Solution
01:10
21 Three Tenets of Components
02:55
22 Application Overview
02:51
23 Getting Some Free Styling
07:16
24 Naive Component Approach
04:33
25 Specifying Images in JSX
06:07
26 Duplicating a Single Component
01:56
27 Extracting JSX to New Components
05:02
28 Component Nesting
06:43
29 Reacts Props System
03:43
30 Passing and Receiving Props
07:06
31 Passing Multiple Props
03:11
32 Passing Props Solutions
06:08
33 Component Reuse
03:26
34 Implementing an Approval Card
05:53
35 Showing Custom Children
05:47
36 Component Reuse
02:46
37 Exercise Props
01:33
38 Props Exercise Solution
02:29
39 Exercise Children
02:02
40 Children Exercise Solution
02:36
41 ClassBased Components
05:17
42 Application Overview
04:02
43 Scaffolding the App
05:59
44 Getting a Users Physical Location
05:57
45 Resetting Geolocation Preferences
02:34
46 Handling Async Operations with Functional Components
03:55
47 Refactoring from Functional to Class Components
05:13
48 The Rules of State
06:08
49 Initializing State Through Constructors
06:17
50 Updating State Properties
07:44
51 App Lifecycle Walkthrough
07:06
52 Handling Errors Gracefully
06:22
53 Conditionally Rendering Content
05:39
54 Introducing Lifecycle Methods
07:15
55 Why Lifecycle Methods
06:36
56 Refactoring Data Loading to Lifecycle Methods
02:46
57 Alternate State Intialization
05:21
58 Passing State as Props
04:20
59 Determining Season
05:35
60 Ternary Expressions in JSX
03:40
61 Showing Icons
04:35
62 Extracting Options to Config Objects
04:14
63 Adding Some Styling
09:33
64 Showing a Loading Spinner
06:21
65 Specifying Default Props
04:53
66 Avoiding Conditionals in Render
05:23
67 Breather and Review
08:17
68 Exercise Solution ClassBased Components
02:03
69 Updating Components with State
03:43
70 App Overview
05:04
71 Component Design
03:40
72 Adding Some Project Structure
04:31
73 Showing Forms to the User
03:54
74 Adding a Touch of Style
03:42
75 Creating Event Handlers
07:43
76 Alternate Event Handler Syntax
02:30
77 Uncontrolled vs Controlled Elements
03:39
78 More on Controlled Elements
10:28
79 Handling Form Submittal
03:44
80 Understanding this In Javascript
11:28
81 Solving Context Issues
07:21
82 Communicating Child to Parent
03:37
83 Invoking Callbacks in Children
04:43
84 Fetching Data
04:31
85 Axios vs Fetch
04:42
86 Viewing Request Results
08:17
87 Handling Requests with Async Await
07:39
88 Setting State After Async Requests
06:20
89 Binding Callbacks
02:18
90 Creating Custom Clients
05:29
91 Rendering Lists
02:42
92 Review of Map Statements
05:41
93 Rendering Lists of Components
02:55
94 The Purpose of Keys in Lists
05:33
95 Implementing Keys in Lists
04:28
96 Grid CSS
06:21
97 Issues with Grid CSS
04:21
98 Creating an Image Card Component
05:17
99 Accessing the DOM with Refs
03:25
100 Accessing Image Height
07:44
101 Callbacks on Image Load
02:54
102 Dynamic Spans
07:19
103 App Review
03:56
104 App Overview
02:39
105 Component Design
03:07
106 Scaffolding the App
06:18
107 Reminder on Event Handlers
06:36
108 Handling Form Submittal
03:42
109 Accessing the Youtube API
09:13
110 Searching for Videos
06:55
111 Putting it All Together
06:53
112 Updating State with Fetched Data
04:46
113 Passing State as Props
03:49
114 Rendering a List of Videos
04:42
115 Rendering Video Thumbnails
04:42
116 Styling a List
08:44
117 Communicating from Child to Parent
05:06
118 Deeply Nested Callbacks
06:00
119 Conditional Rendering
05:54
120 Styling the VideoDetail
03:11
121 Displaying a Video Player
08:16
122 Fixing a Few Warnings
06:39
123 Defaulting Video Selection
04:53
124 Introduction to Redux
03:24
125 Redux by Analogy
07:06
126 A Bit More Analogy
05:21
127 Finishing the Analogy
09:25
128 Mapping the Analogy to Redux
05:45
129 Modeling with Redux
08:45
130 Creating Reducers
11:46
131 Rules of Reducers
04:57
132 Testing Our Example
08:28
133 Important Redux Notes
07:33
134 React Cooperating with Redux
01:41
135 React Redux andReactRedux
05:35
136 Design of the Redux App
04:37
137 How ReactRedux Works
06:45
138 Redux Project Structure
04:07
139 Named vs Default Exports
03:51
140 Building Reducers
05:13
141 Wiring Up the Provider
03:19
142 The Connect Function
05:55
143 Configuring Connect with MapStateToProps
06:44
144 Building a List with Redux Data
07:06
145 Calling Action Creators from Components
07:22
146 Redux is Not Magic
06:05
147 Functional Components with Connect
06:33
148 Conditional Rendering
05:15
149 Exercise Solution Connecting Components to Redux
06:30
150 App Overview and Goals
07:38
151 Initial App Setup
06:18
152 Tricking Redux with Dummy Reducers
03:17
153 A Touch More Setup
02:26
154 How to Fetch Data in a Redux App
06:00
155 Wiring Up an Action Creator
03:02
156 Making a Request From an Action Creator
05:14
157 Understanding Async Action Creators
08:57
158 More on Async Action Creators
05:49
159 Middlewares in Redux
03:53
160 Behind the Scenes of Redux Thunk
10:08
161 Shortened Syntax with Redux Thunk
06:45
162 Rules of Reducers
02:55
163 Return Values from Reducers
03:08
164 Argument Values
05:05
165 Pure Reducers
02:36
166 Mutations in Javascript
06:51
167 Equality of Arrays and Objects
02:40
168 A Misleading Rule
12:25
169 Safe State Updates in Reducers
10:00
170 Switch Statements in Reducers
04:08
171 Dispatching Correct Values
06:45
172 List Building
04:01
173 Displaying Users
07:40
174 Fetching Singular Records
04:11
175 Displaying the User Header
05:08
176 Finding Relevant Users
07:50
177 Extracting Logic to MapStateToProps
07:48
178 Thats the Issue
02:39
179 Memoizing Functions
06:55
180 Memoization Issues
06:50
181 One Time Memoization
04:48
182 Alternate Overfetching Solution
04:26
183 Action Creators in Action Creators
07:43
184 Finding Unique User Ids
08:37
185 Quick Refactor with Chain
04:12
186 App Wrapup
03:35
187 App Outline
06:17
188 Mockups in Detail
05:15
189 App Challenges
05:10
190 Initial Setup
02:47
191 Introducing React Router
08:07
192 How React Router Works
03:58
193 How Paths Get Matched
08:36
194 How to Not Navigate with React Router
04:57
195 Navigating with React Router
05:10
196 Optional Different Router Types
18:18
197 Component Scaffolding
05:52
198 Wiring Up Routes
04:10
199 Always Visible Components
02:21
200 Connecting the Header
05:52
201 Links Inside Routers
02:45
202 OAuthBased Authentication
09:04
203 OAuth for Servers vs Browser Apps
05:35
204 Creating OAuth Credentials
05:13
205 Wiring Up the Google API Library
08:55
206 Sending a User Into the OAuth Flow
05:48
207 Rendering Authentication Status
09:49
208 Updating Auth State
07:15
209 Displaying Sign In and Sign Out Buttons
03:23
210 OnDemand Sign In and Sign Out
03:03
211 Redux Architecture Design
09:30
212 Redux Setup
04:14
213 Connecting Auth with Action Creators
04:35
214 Building the Auth Reducer
05:17
215 Handling Auth Status Through Redux
05:25
216 Fixed Action Types
05:35
217 Recording the Users ID
06:09
218 Using Redux Dev Tools to Inspect the Store
09:42
219 Debug Sessions with Redux Dev Tools
04:15
220 Forms with Redux Form
06:11
221 Useful Redux Form Examples
02:42
222 Connecting Redux Form
04:05
223 Creating Forms
08:03
224 Automatically Handling Events
09:24
225 Customizing Form Fields
03:51
226 Handling Form Submission
05:35
227 Validation of Form Inputs
06:45
228 Displaying Validation Messages
05:26
229 Showing Errors on Touch
07:23
230 Highlighting Errored Fields
03:29
231 Creating Streams
02:47
232 RESTful Conventions
04:49
233 Setting Up an API Server
06:23
234 Creating Streams Through Action Creators
05:37
235 Creating a Stream with REST Conventions
06:01
236 Dispatching Actions After Stream Creation
02:54
237 Bulk Action Creators
12:20
238 ObjectBased Reducers
07:43
239 Key Interpolation Syntax
07:48
240 Handling Fetching Creating and Updating
06:03
241 Deleting Properties with Omit
03:12
242 Merging Lists of Records
07:45
243 Fetching a List of All Streams
03:27
244 Rendering All Streams
06:07
245 Associating Streams with Users
06:27
246 Conditionally Showing Edit and Delete
07:07
247 Linking to Stream Creation
04:54
248 When to Navigate Users
05:26
249 History References
06:13
250 Creating a Browser History Object
04:11
251 Implementing Programmatic Navigation
02:11
252 Manually Changing API Records
02:35
253 URLBased Selection
06:34
254 Wildcard Navigation
05:20
255 More on Route Params
04:38
256 Selecting Records from State
08:05
257 Component Isolation with React Router
04:52
258 Fetching a Stream for Edit Stream
05:58
259 Real Code Reuse
08:23
260 Refactoring Stream Creation
05:24
261 Setting Initial Values
09:58
262 Avoiding Changes to Properties
08:09
263 Edit Form Submission
04:06
264 PUT vs PATCH Requests
05:45
265 Why Use Portals
07:19
266 More on Using Portals
13:12
267 Creating a Portal
07:38
268 Hiding a Modal
08:06
269 Making the Modal Reusable
05:43
270 React Fragments
04:52
271 OnDismiss From the Parent
03:11
272 Reminder on Path Params
04:22
273 Fetching the Deletion Stream
07:26
274 Conditionally Showing Stream Details
06:57
275 Deleting a Stream
07:52
276 Viewing a Stream
03:45
277 Switches with ReactRouter
04:04
278 Showing a Stream
05:28
279 RTMP Server Setup
06:20
280 OBS Installation
02:32
281 OBS Scene Setup
04:32
282 Video Player Setup
03:39
283 Implementing FLV JS
04:05
284 Creating a FLV Player
06:35
285 Optional Player Building
07:21
286 It Works
03:16
287 Cleaning Up with ComponentWillUnmount
04:28
288 The Context System
03:30
289 An App with Context
04:22
290 App Generation
02:59
291 Selecting a Language
03:30
292 A Touch More Setup
04:04
293 Getting Data Out of Context
04:07
294 Creating Context Objects
08:30
295 Consuming the Context Value
05:04
296 The Context Provider
04:12
297 Gotchas Around Providers
09:13
298 Accessing Data with Consumers
05:47
299 Pulling From Multiple Contexts
09:03
300 Replacing Redux with Context
05:54
301 Creating a Store Component
04:10
302 Implementing a Language Store
07:11
303 Rendering the Language Store
03:47
304 Connecting the Selector to the Store
03:07
305 Connecting the Field and Button to the Store
03:06
306 Context vs Redux Recap
03:42
307 Introducing Hooks
03:17
308 App Overview
02:35
309 Building Stateful Class Components
05:10
310 The UseState Hook
05:16
311 UseState in Detail
07:17
312 Building the ResourceList
03:57
313 Fetching a Given Resource
07:33
314 ComponentDidUpdate vs ComponentDIdMount
07:30
315 Refactoring a Class to a Function
04:21
316 Lifecycles with UseEffect
04:00
317 Updates with UseEffect
05:46
318 Does It Get Called
04:47
319 Quick Gotcha with UseEffect
04:23
320 Rendering a List
01:26
321 Actual Code Reuse
04:34
322 Code Reuse with Hooks
05:18
323 Weather Hooks
01:06
324 App Overview
03:34
325 Refactoring a Class to a Function
08:43
326 Extracting Reusable Logic
03:44
327 Introduction Github Links for Project Files
03:40
328 The Purpose of Boilerplate Projects
03:43
329 Environment Setup
01:46
330 Project Setup
02:55
331 A Taste of JSX
11:30
332 More on JSX
04:36
333 ES6 Import Statements
04:00
334 ReactDOM vs React
02:28
335 Differences Between Component Instances and Component Classes
03:39
336 Render Targets
05:54
337 Component Structure
06:27
338 Youtube Search API Signup
06:40
339 Export Statements
08:41
340 ClassBased Components
08:12
341 Handling User Events
09:31
342 Introduction to State
05:14
343 More on State
06:05
344 Controlled Components
07:48
345 Breather and Review
03:38
346 Youtube Search Response
04:27
347 Refactoring Functional Components to Class Components
07:44
348 Props
07:43
349 Building Lists with Map
07:07
350 List Item Keys
03:56
351 Video List Items
07:54
352 Detail Component and Template Strings
07:06
353 Handling Null Props
04:42
354 Video Selection
11:41
355 Styling with CSS
03:44
356 Searching for Videos
07:53
357 Throttling Search Term Input
05:48
358 React Wrapup
05:26
359 Foreword on Redux
02:18
360 What is Redux
02:46
361 More on Redux
03:43
362 Even More on Redux
04:20
363 Reducers
07:44
364 Containers Connecting Redux to React
07:24
365 Containers Continued
04:01
366 Implementation of a Container Class
10:47
367 Containers and Reducers Review
04:10
368 Actions and Action Creators
07:32
369 Binding Action Creators
09:42
370 Creating an Action
06:46
371 Consuming Actions in Reducers
07:17
372 Consuming Actions in Reducers Continued
05:07
373 Conditional Rendering
06:40
374 Reducers and Actions Review
05:03
375 App Overview and Planning
05:11
376 Component Setup
07:58
377 Controlled Components and Binding Context
09:57
378 Form Elements in React
06:30
379 Working with APIs
08:14
380 Introduction to Middleware
07:28
381 Ajax Requests with Axios
13:04
382 ReduxPromise in Practice
10:16
383 ReduxPromise Continued
10:57
384 Avoiding State Mutations in Reducers
09:54
385 Building a List Container
06:55
386 Mapping Props to a Render Helper
06:08
387 Adding Sparkline Charts
09:56
388 Making a Reusable Chart Component
06:02
389 Labeling of Units
10:39
390 Google Maps Integration
08:01
391 Google Maps Integration Continued
07:17
392 Project Review
02:37
393 App Overview and Goals
06:50
394 Posts API
09:21
395 Installing React Router
03:01
396 What React Router Does
05:37
397 The Basics of React Router
09:00
398 Route Design
06:32
399 Our First Route Definition
05:58
400 State as an Object
09:08
401 Back to Redux Index Action
07:08
402 Implementing Posts Reducer
10:30
403 Action Creator Shortcuts
08:07
404 Rendering a List of Posts
09:20
405 Creating New Posts
05:44
406 A React Router Gotcha
04:46
407 Navigation with the Link Component
05:59
408 Redux Form
05:34
409 Setting Up Redux Form
09:28
410 The Field Component
10:50
411 Generalizing Fields
08:55
412 Validating Forms
10:32
413 Showing Errors to Users
04:31
414 Handling Form Submittal
09:32
415 Form and Field States
06:08
416 Conditional Styling
07:07
417 More on Navigation
03:13
418 Create Post Action Creator
10:06
419 Navigation Through Callbacks
07:32
420 The Posts Show Component
03:40
421 Receiving New Posts
09:27
422 Selecting from OwnProps
11:28
423 Data Dependencies
05:33
424 Caching Records
06:14
425 Deleting a Post
09:27
426 Wrapup
09:11
427 Basics of Redux Thunk
07:18
428 Combining Redux and Firebase
12:18
429 Dynamic Forms with Redux Form
14:43
430 Logicless Components with Reselect
18:10
431 Data Loading Methods with Redux
09:30
432 Animation of React Components
12:34
433 The Best Way to Store Redux Data
15:06
434 Four Most Common Errors with React and Redux
12:03
435 Modals in React and Redux Apps
18:44
436 Deployment of ReactWebpack Apps
23:16
437 BrowserHistory in Production
19:47
438 React Integration with 3rd Party Libraries
18:43
439 Introducing JSPlaygrounds for Rapid Prototyping
12:19
440 App Overview and Goals
06:50
441 Exploring the Posts Api
13:27
442 Installing React Router
02:37
443 React Router What is It
05:35
444 Setting Up React Router
04:40
445 Route Configuration
05:17
446 Nesting Of Routes
08:03
447 IndexRoutes with React Router
05:05
448 Back To Redux Index Action
05:51
449 Catching Data with Posts Reducer
06:30
450 Catching Data with Posts Reducer Continued
02:39
451 Fetching Data with Lifecycle Methods
05:44
452 Fetching Data with Lifecycle Methods Continued
06:51
453 Creating New Posts
05:24
454 Navigation with the Link Component
04:27
455 Forms and Form Submission
10:13
456 More on Forms and Form Submission
07:38
457 Passing Control to Redux Form
07:52
458 CreatePost Action Creator
11:22
459 Form Validation
08:29
460 Form Validation Continued
08:52
461 Navigating on Submit
12:38
462 Posts Index
04:32
463 Dynamic Route Params
07:10
464 Loading Data on Render
05:46
465 Handling Null Props
05:32
466 Delete Action Creator
07:08
467 Navigate on Delete
02:26
468 ReactRouter and ReduxForm Wrapup
07:03
客服
顶部
赛事库 课堂 2021拜年纪