[React 从入门到精通/React - The Complete Guide][MP4][2019][udemy][暂无字幕]
Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!
视频选集
（98/435）
1. Introduction
01:50
2. What is React
02:57
3. Real-World SPAs & React Web Apps
02:29
4. Writing our First React Code
15:08
5. Why Should we Choose React
02:04
6. React Alternatives
01:12
7. Understanding Single Page Applications and Multi Page Applications
03:39
8. Course Outline
07:30
9. How to get the Most out of This Course
02:30
1. Module Introduction
01:37
2. Understanding let and const
03:06
3. Arrow Functions
05:28
4. Exports and Imports
04:45
5. Understanding Classes
04:39
6. Classes, Properties and Methods
03:04
7. The Spread & Rest Operator
06:31
8. Destructuring
03:15
9. Reference and Primitive Types Refresher
04:27
10. Refreshing Array Functions
02:47
11. Wrap Up
00:53
1. Module Introduction3
00:40
2. The Build Workflow
08:01
3. Using Create React App
06:10
4. Understanding the Folder Structure
08:12
5. Understanding Component Basics
05:33
6. Understanding JSX
05:39
7. JSX Restrictions
03:10
8. Creating a Functional Component
08:10
10. Working with Components & Re-Using Them
01:48
11. Outputting Dynamic Content
03:03
12. Working with Props
04:09
13. Understanding the Children Property
02:57
14. Understanding & Using State
07:18
16. Handling Events with Methods
03:46
18. Manipulating the State
05:04
20. Using the useState() Hook for State Manipulation
13:52
21. Stateless vs Stateful Components
03:09
22. Passing Method References Between Components
07:06
23. Adding Two Way Binding
06:52
24. Adding Styling with Stylesheets
05:29
25. Working with Inline Styles
04:16
27. [OPTIONAL] Assignment Solution
22:29
1. Module Introduction4
01:05
2. Rendering Content Conditionally
10:11
3. Handling Dynamic Content The JavaScript Way
04:50
4. Outputting Lists (Intro)
01:32
5. Outputting Lists
05:33
6. Lists & State
04:13
7. Updating State Immutably
02:40
8. Lists & Keys
04:15
9. Flexible Lists
07:35
10. Wrap Up
01:57
12. [OPTIONAL] Assignment Solution
17:18
1. Module Introduction5
01:20
2. Outlining the Problem Set
01:59
3. Setting Styles Dynamically
03:21
4. Setting Class Names Dynamically
07:10
5. Adding and Using Radium
07:01
6. Using Radium for Media Queries
05:03
8. Enabling & Using CSS Modules
13:51
10. Adding Pseudo Selectors
05:09
11. Working with Media Queries
01:59
2. Understanding Error Messages
02:38
3. Finding Logical Errors by using Dev Tools & Sourcemaps
04:19
4. Working with the React Developer Tools
02:19
5. Using Error Boundaries (React 16+)
08:15
6. Wrap Up
00:58
7-1. Module Introduction
00:44
2. A Better Project Structure
07:25
3. Splitting an App Into Components
15:55
4. Comparing Stateless and Stateful Components
03:47
5. Class-based vs Functional Components
05:16
6. class Component Lifecycle Overview
05:06
7. Component Creation Lifecycle in Action
06:47
8. Component Update Lifecycle (for props Changes)
15:37
9. Component Update Lifecycle (for state Changes)
03:50
10. Using useEffect() in Functional Components
03:47
11. Controlling the useEffect() Behavior
03:41
12. Cleaning up with Lifecycle Hooks & useEffect()
06:50
13. Cleanup Work with useEffect() - Ex
01:38
14. Using shouldComponentUpdate for Optimization
06:46
15. Optimizing Functional Components with React.memo()
03:40
16. When should you optimize
02:19
17. PureComponents instead of shouldComponentUpdate
03:36
18. How React Updates the DOM
04:28
19. Rendering Adjacent JSX Elements
09:01
21. Using React.Fragment
01:30
22. Higher Order Components (HOC) - Introduction
04:22
23. Another Form of HOCs
05:57
24. Passing Unknown Props
04:59
25. Setting State Correctly
05:14
26. Using PropTypes
06:54
27. Using Refs
07:39
28. Refs with React Hooks
04:36
29. Understanding Prop Chain Problems
04:57
30. Using the Context API
10:04
31. contextType & useContext()
05:34
32. Wrap Up
01:22
35. [LEGACY] Splitting an App Into Components
15:34
36. [LEGACY] Comparing Stateless and Stateful Components
07:21
37. [LEGACY] Understanding the Component Lifecycle
07:01
38. [LEGACY] Converting Stateless to Stateful Components
02:55
39. [LEGACY] Component Creation Lifecycle in Action
08:35
41. [LEGACY] Component Updating Lifecycle Hooks
03:56
42. [LEGACY] Component Updating Lifecycle in Action
08:07
43. [LEGACY] Updating Lifecycle Hooks (Triggered by State Changes)
03:06
44. [LEGACY] Performance Gains with PureComponents
10:24
45. [LEGACY] How React Updates the App & Component Tree
02:28
46. [LEGACY] Understanding React's DOM Updating Strategy
04:28
48. [LEGACY] Returning Adjacent Elements (React 16+)
09:09
50. [LEGACY] Understanding Higher Order Components (HOCs)
04:17
51. [LEGACY] A Different Approach to HOCs
05:42
52. [LEGACY] Passing Unknown Props
04:08
53. [LEGACY] Using setState Correctly
04:23
54. [LEGACY] Validating Props
06:09
56. [LEGACY] Using References (ref)
04:59
57. [LEGACY] More on the React ref API (16.3)
14:00
58. [LEGACY] The Context API (React 16.3)
08:18
59. [LEGACY] More on the Context API (16.6)
08:14
60. [LEGACY] Updated Lifecycle Hooks (React 16.3)
05:13
61. [LEGACY] The memo Method (16.4)
03:13
62. [LEGACY] Wrap Up
01:33
2. Module Introduction
00:59
3. Planning an App in React - Core Steps
02:33
4. Planning our App - Layout and Component Tree
10:59
5. Planning the State
04:14
6. Setting up the Project
04:51
7. Creating a Layout Component
10:02
8. Starting Implementation of The Burger Builder Container
05:05
9. Adding a Dynamic Ingredient Component
08:29
10. Adding Prop Type Validation
02:50
11. Starting the Burger Component
06:51
12. Outputting Burger Ingredients Dynamically
09:45
13. Calculating the Ingredient Sum Dynamically
05:12
14. Adding the Build Control Component
07:28
15. Outputting Multiple Build Controls
04:04
16. Connecting State to Build Controls
08:24
17. Removing Ingredients Safely
07:31
18. Displaying and Updating the Burger Price
02:30
19. Adding the Order Button
10:40
20. Creating the Order Summary Modal
14:00
21. Showing & Hiding the Modal (with Animation!)
07:00
22. Implementing the Backdrop Component
08:24
23. Adding a Custom Button Component
04:47
24. Implementing the Button Component
04:55
25. Adding the Price to the Order Summary
02:06
26. Adding a Toolbar
09:12
27. Using a Logo in our Application
06:41
28. Adding Reusable Navigation Items
11:27
29. Creating a Responsive Sidedrawer
07:45
30. Working on Responsive Adjustments
04:36
31. More about Responsive Adjustments
07:19
32. Reusing the Backdrop
09:12
33. Adding a Sidedrawer Toggle Button
06:29
34. Adding a Hamburger Icon
02:21
35. Improving the App - Introduction
01:12
36. Prop Type Validation
01:19
37. Improving Performance
08:49
38. Using Component Lifecycle Methods
01:50
39. Changing the Folder Structure
04:58
40. Wrap Up
01:50
1. Module Introduction
01:04
2. Understanding Http Requests in React
01:36
3. Understanding our Project and Introducing Axios
04:16
4. Creating a Http Request to GET Data
05:30
5. Rendering Fetched Data to the Screen
03:47
6. Transforming Data
02:41
7. Making a Post Selectable
04:02
8. Fetching Data on Update (without Creating Infinite Loops)
07:57
9. POSTing Data to the Server
03:53
10. Sending a DELETE Request
02:24
11. Fixing a Bug
00:34
12. Handling Errors Locally
03:24
13. Adding Interceptors to Execute Code Globally
06:19
15. Setting a Default Global Configuration for Axios
03:11
16. Creating and Using Axios Instances
05:04
17. Wrap Up
00:48
3. Creating the Firebase Project
03:28
4. Creating the Axios Instance
02:43
5. Sending a POST Request
07:47
6. Displaying a Spinner while Sending a Request
09:21
7. Handling Errors
12:05
8. Retrieving Data from the Backend
11:23
9. Removing Old Interceptors
08:26
2. Routing and SPAs
02:44
3. Setting Up Links
04:23
4. Setting Up the Router Package
04:47
6. Preparing the Project For Routing
05:14
7. Setting Up and Rendering Routes
05:19
8. Rendering Components for Routes
01:58
9. Switching Between Pages
02:18
10. Using Links to Switch Pages
04:04
11. Using Routing-Related Props
03:13
12. The withRouter HOC & Route Props
03:45
13. Absolute vs Relative Paths
02:35
15. Styling the Active Route
05:56
16. Passing Route Parameters
06:55
17. Extracting Route Parameters
03:04
19. Using Switch to Load a Single Route
03:34
20. Navigating Programmatically
03:27
21. Additional Information Regarding Active Links
02:23
22. Understanding Nested Routes
07:56
23. Creating Dynamic Nested Routes
04:40
24. Redirecting Requests
02:46
25. Conditional Redirects
02:48
26. Using the History Prop to Redirect (Replace)
02:50
27. Working with Guards
03:47
28. Handling the 404 Case (Unknown Routes)
03:03
29. Loading Routes Lazily
11:50
30. Lazy Loading with React Suspense (16.6)
09:48
31. Routing and Server Deployment
04:20
33. Wrap Up
00:50
1. Module Introduction
01:36
2. Building the Checkout Container
11:33
3. Setting Up Routing & Routes
04:42
4. Navigating to the Checkout Page
04:52
5. Navigating Back & To Next Page
03:34
6. Passing Ingredients via Query Params
05:28
7. Navigating to the Contact Data Component
09:35
8. Order Submission & Passing Data Between Pages
11:45
9. Adding an Orders Page
05:35
10. Implementing Navigation Links
05:36
11. Fetching Orders
06:05
12. Outputting the Orders
07:36
13. Wrap Up
01:08
2. Analyzing the App
01:51
3. Creating a Custom Dynamic Input Component
11:31
4. Setting Up a JS Config for the Form
07:36
5. Dynamically Create Inputs based on JS Config
05:24
6. Adding a Dropdown Component
03:53
7. Handling User Input
07:44
8. Handling Form Submission
04:12
9. Adding Custom Form Validation
08:11
10. Fixing a Common Validation Gotcha
01:19
11. Adding Validation Feedback
05:13
12. Improving Visual Feedback
02:19
14. Handling Overall Form Validity
07:36
15. Working on an Error
02:11
16. Fixing a Bug
01:27
2. Understanding State
01:52
3. The Complexity of Managing State
02:43
4. Understanding the Redux Flow
05:19
5. Setting Up Reducer and Store
07:11
6. Dispatching Actions
06:45
7. Adding Subscriptions
02:48
8. Connecting React to Redux
03:40
9. Connecting the Store to React
08:20
10. Dispatching Actions from within the Component
05:54
12. Passing and Retrieving Data with Action
04:07
13. Switch-Case in the Reducer
03:02
14. Updating State Immutably
13:21
15. Updating Arrays Immutably
08:40
17. Outsourcing Action Types
05:20
18. Combining Multiple Reducers
10:19
19. Understanding State Types
04:51
21. [OPTIONAL] Assignment Solution
14:24
22. Combining Local UI State and Redux
07:40
23. Wrap Up
01:43
2. Installing Redux and React Redux
04:09
3. Basic Redux Setup
02:11
4. Finishing the Reducer for Ingredients
06:36
5. Connecting the Burger Builder Container to our Store
09:34
6. Working on the Total Price Calculation
06:07
7. Redux & UI State
04:09
8. Adjusting Checkout and Contact Data
09:11
9. Wrap Up
02:39
2. Adding Middleware
07:48
3. Using the Redux Devtools
07:33
4. Executing Asynchronous Code - Introduction
01:53
5. Introducing Action Creators
04:12
6. Action Creators & Async Code
06:21
7. Handling Asynchronous Code
08:15
8. Restructuring Actions
06:56
9. Where to Put Data Transforming Logic
05:44
10. Using Action Creators and Get State
03:29
11. Using Utility Functions
07:22
12. A Leaner Switch Case Statement
03:16
13. An Alternative Folder Structure
02:24
14. Diving Much Deeper
02:08
15. Wrap Up
01:01
2. Installing the Redux Devtools
02:57
3. Preparing the Folder Structure
03:07
4. Creating Action Creators
06:17
5. Executing Asynchronous Code
04:07
6. Fetching Ingredients Asynchronously
07:51
7. Initializing Ingredients in the BurgerBuilder
05:20
8. Changing the Order of our Ingredients Manually
02:13
9. Adding Order Actions
06:41
10. Connecting Contact Data Container & Actions
04:19
11. The Order Reducer
05:31
12. Working on Order Actions
04:29
13. Redirect to Improve UX
03:09
14. Combining Reducers
04:54
15. Handling Purchases & Updating the UI
08:35
16. Resetting the Price after Purchases
01:45
17. Fetching Orders (via Redux)
13:46
18. Checking our Implemented Functionalities
01:24
19. Refactoring Reducers
08:12
20. Refactoring Reducers Continued
07:56
21. Wrap Up
00:58
1. Module Introduction
01:15
2. Understanding Authentication in Single Page Applications
03:03
3. Required App Adjustments
00:54
4. Adding an Auth Form
13:12
5. Adding Actions
06:29
6. Getting a Token from the Backend
07:00
7. Adding Sign-In
05:31
8. Storing the Token
09:01
9. Adding a Spinner
06:04
10. Logging Users Out
06:52
11. Accessing Protected Resources
11:18
12. Updating the UI Depending on Auth State
07:33
13. Adding a Logout Link
06:54
14. Forwarding Unauthenticated Users
08:20
15. Redirecting the User to the Checkout Page
13:13
16. Persistent Auth State with localStorage
14:37
17. Fixing Connect + Routing Errors
07:00
18. Ensuring App Security
02:51
19. Guarding Routes
05:36
20. Displaying User Specific Orders
08:17
21. Wrap Up
00:45
2. Fixing the Redirect to the Frontpage
05:49
3. Using updateObject in the Entire App
06:46
4. Sharing the Validation Method
02:17
5. Using Environment Variables
02:37
6. Removing console.log()s
03:48
7. Adding Lazy Loading
04:59
8. Wrap Up
00:51
2. What is Testing
03:09
3. Required Testing Tools
02:27
4. What To Test
02:51
5. Writing our First Test
12:35
6. Testing Components Continued
04:06
7. Jest and Enzyme Documentations
06:29
8. Testing Components Correctly
02:29
9. Testing Containers
06:51
10. How to Test Redux
05:10
11. Wrap Up
01:28
2. Deployment Steps
02:59
3. Building the Project
02:21
4. Example Deploying on Firebase
04:08
5. Wrap Up
00:43
3. Introducing Webpack
01:16
4. How Webpack works
02:41
5. Basic Workflow Requirements
01:37
6. Project & npm Setup
03:48
7. Creating a Basic Folder & File Structure
03:13
8. Creating the Basic React Application
10:56
9. Installing Production Dependencies
01:28
10. Setting Up the Basic Webpack Config
06:40
11. Adding File Rules
03:19
12. Introducing Babel
04:53
13. Adding CSS File Support
06:20
14. Creating Rules for Images
03:24
15. Lazy Loading
05:11
16. Injecting the Script into the index.html File
04:18
17. Creating the Production Workflow
05:40
18. Wrap Up
01:01
2. Understanding Server Side Rendering
03:19
3. Setting Up a Project
06:03
4. Understanding the Basics
03:54
5. Next.js & Components & Pages
02:49
6. Styling our App in Next.js
02:48
7. Handling (404) Errors
02:02
8. A Special Lifecycle Hook
09:34
9. Deploying our App
03:00
2. Preparing the Demo Project
06:13
3. Using CSS Transitions
04:35
4. Using CSS Animations
05:33
5. CSS Transition & Animations Limitations
04:05
6. Using ReactTransitionGroup
12:21
7. Using the Transition Component
03:25
8. Wrapping the Transition Component
03:18
9. Animation Timings
03:15
10. Transition Events
02:34
11. The CSSTransition Component
05:25
12. Customizing CSS Classnames
02:32
13. Animating Lists
06:54
14. Alternative Animation Packages
04:30
15. Wrap Up
01:58
2. Installing Redux Saga
02:41
3. Creating our First Saga
06:08
4. Hooking the Saga Up (to the Store and Actions)
04:43
5. Moving Logic from the Action Creator to a Saga
05:59
6. Moving More Logic Into Sagas
10:04
7. Handling Authentication with a Saga
11:08
8. Handling Auto-Sign-In with a Saga
05:54
9. Moving the BurgerBuilder Side Effects into a Saga
07:02
10. Moving the Orders Side Effects into Sagas
12:36
11. Why Sagas can be Helpful
01:18
12. Diving Deeper into Sagas
06:57
1. Introduction
01:46
2. What are Hooks
03:10
3. Enabling Hooks
00:57
4. The useState() Hook
08:52
5. Adding Array Destructuring
02:10
6. Using Multiple State
04:49
7. Using One State Instead
03:59
8. The Rules of Hooks
02:00
9. Sending Data via Http
03:22
10. The useEffect() Hook
06:27
11. Controlling Effect Execution
03:42
12. Effect Cleanup
06:11
13. Converting the App Component
08:15
14. The useContext() Hook
10:33
15. State and Effects Gotchas
07:56
16. The useReducer() Hook
08:22
17. useReducer() vs useState()
04:43
18. Working with References and useRef()
04:09
19. Preparing & Optimizing
07:15
20. Avoiding Unnecessary Re-Rendering
03:45
21. How to think about Functional Components with Hooks
01:57
22. Creating a Custom Hook
08:28
23. Wrap Up
01:29
2. Converting App
03:29
3. Routing with React.lazy()
03:37
4. Converting the Layout Component
02:40
5. Converting withErrorHandler HOC
05:27
6. Adjusting the Order & Checkout Containers
04:29
7. Add Hooks to ContactData
05:39
8. Converting the BurgerBuilder Container
04:26
9. Adjusting Auth & Logout Components
06:02
10. Using React.memo() & More!
04:31
11. Adding a Custom Error Handling Hook
05:42
12. Wrap Up
01:04
1. Building the Burger CSS Code
24:57
1. Module Introduction29
01:01
2. React Rocks! Where to find more Examples
01:25
3. More Inspiration Real-World Projects Built with React
01:24
4. Static React Apps with Gatsby.js
02:32
5. Introducing React Native
02:18
6. Component Libraries (Example Material UI)
02:37
7. Smaller Apps with Preact
03:09
8. Comparing React with Preact
05:52
9. Congratulations
01:17
顶部