第一章：React 基础（10）
- 01|课程介绍
- 02|React 出现的历史背景及特性介绍
- 03|以组件方式考虑 UI 的构建
- 04|JSX 的本质：不是模版引擎，而是语法糖
- 05|React 组件的生命周期及其使用场景
- 06|理解 Virtual DOM 及 key 属性的作用
- 07|组件设计模式：高阶组件和函数作为自组件
- 08|理解新的 Context API 及其使用场景
- 09|使用脚手架工具创建 React 项目
- 10|打包和部署
第二章： React 生态圈 (12)
- 11| Redux(1):前端为何需要状态管理库
- 12| Redux(2):深入理解 Store、Action、Reducer
- 13| Redux(3):在 React 中使用 Redux
- 14| Redux(4):理解异步 Action、Redux
- 15| Redux(5):如何组织 Action 和 Reducer
- 16| Redux(6):理解不可变数据（Immutability）
- 17| React Router(1):路由不只是页面切换，更是代码组织方式
- 18| React Router（2):参与定义，嵌套路由的使用场景
- 19 | UI 组件库对比和介绍：Ant.Design、Material UI、Semantic UI
- 20 | 使用 Next.js 创建 React 同构应用
- 21 | 使用 Jest、Enzyme 等工具进行单元测试
- 22 | 常用开发调试工具：ESLint、Prettier、React DevTool、Redux DevTool
第三章 ：构建可维护可扩展的前端应用 (6 讲)
- 23 | 前端项目的理想架构：可维护、可扩展、可测试、易开发、易建构
- 24 | 拆分复杂度（1）：按领域模型（feature）组织代码，降低耦合度
- 25 | 拆分复杂度（2）：如何组织 component、action 和 reducer
- 26 | 拆分复杂度（3）：如何组织 React Router 的路由配置
- 27 | 使用 Rekit（1）：创建项目，代码生成和重构
- 28 | 使用 Rekit（2）：遵循最佳实践，保持代码一致性
第四章 ：常见场景的最佳实践 (13 讲)
- 29 | 使用 React Router 管理登录和授权
- 30 | 实现表单（1）：初始数据，提交和跳转
- 31 | 实现表单（2）：错误处理，动态表单元素，内容动态加载
- 32 | 列表页（1）：搜索，数据缓存和分页
- 33 | 列表页（2）：缓存更新，加载状态，错误处理
- 34 | 页面数据需要来源多个请求的处理
- 35 | 内容页的加载与缓存
- 36 | 基于 React Router 实现分步操作
- 37 | 常见页面布局的实现
- 38 | 使用 React Portals 实现对话框，使用 antd 对话框
- 39 | 集成第三方 JS 库：以 d3.js 为例
- 40 | 基于路由实现菜单导航
- 41 | React 中拖放的实现
第五章：React 性能优化 (5 讲)
- 42 | 性能永远是第一需求：时刻考虑性能问题
- 43 | 网络性能优化：自动化按需加载
- 44 | 使用 Reselect 避免重复计算
- 45 | 下一代 React：异步渲染
- 46 | 使用 Chrome DevTool 进行性能调优
https://codesandbox.io/s/6n20nrzlxz
https://6n20nrzlxz.codesandbox.io
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
Learn More
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
npm run build fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify