介绍课程内容，学习建议和注意事项。演示课程项目，让学员有一个整体的认识。
介绍 React 的历史、背景和每次版本更新。介绍 React 的核心概念：组件化 + 数据驱动视图。对比 React 和 Vue ，其实 React 比 Vue 更简洁。
本章将使用 Create-React-App 创建 React 项目环境，它是 React 官方推荐的创建工具。此外本章还会配置 ESLint 和 Prettier 规范代码格式，并把代码提交到 git 仓库。
JSX 和组件是 React 的基础，本章将从 0 讲解 JSX 语法，从 0 认识组件、属性，以及组件的拆分和嵌套。即学即用，开发一个问卷列表页。
Hooks 是 React 的重要内容，React 使用各种 Hooks 来处理逻辑、更新数据。本章学习基础 Hooks 如 useState useEffect ，高级 Hooks 如 useMemo useCallback useRef ，还有自定义 Hooks 和第三方 Hooks 。即学即用，使用 Hooks 重构之前的问卷列表页。
React 有多种 CSS 方案，如引入普通 CSS 、CSS-Module、CSS-in-JS 等，本章将全部介绍和对比，最后选择 CSS-Module 方案，并使用 Sass 语法开发 CSS。即学即用，为页面增加 CSS 样式。
路由是 Web 多页系统的必备配置，否则无法实现多页面和页面跳转。React-router 是 React 项目路由配置的不二选择。本章使用 React-router 配置路由，并讲解相关的 Layout Outlet 等知识点。即学即用，将路由用于问卷项目中，配置首页、列表、标星、回收站等页面。...
现代 Web 系统都要使用 UI 组件库，它封装了常用的 UI 组件，如 Button Input 等，拿来即用。AntDesign 是国内 React 技术栈 UI 组件库的不二选择。本章引入 AntDesign ，并即学即用，使用 AntDesign 重构各个页面。
表单组件是 Web 开发中比较独立的部分，React 中也是如此。本章讲解常见的表单组件，如 input radio checkbox 等，并学习几种常见的表单校验工具。即学即用，开发登录、注册页，并配置校验规则。
本章使用 Nodejs + Mock.js 模拟服务端功能，设计 API ，使用 axios 发送 Ajax 请求，使用 useRequest 处理请求状态。即学即用，在问卷列表页，星标页和回收站页，使用 Ajax 获取 API 数据。
本章继续使用 Ajax 开发分页和 LoadMore（上划加载更多）功能，为你准备了多种形式的列表和分页形式。此外，本章还开发各种问卷操作功能，和登录注册的网络请求。本章结束后，你将开发出完整的列表页和登录注册页。
复杂项目必须使用状态管理，React 有多种状态管理方案，如 useContext useReducer Redux 和 MobX ，本章都会讲解并对比，最终选择 Redux 。即学即用，使用 Redux 存储管理用户数据。
开发编辑器是课程中最难的一部分，功能多，关联性强。本章用两个组件 QuestionTitle 和 QuestionInput 打通了编辑器的所有功能：画布、组件库、属性、工具栏… 组件虽少，功能俱全。这种设计思路也可以照搬参考到同学们日常的工作项目中。...
本章基于现有的设计规则，扩展其他 5 个组件，展现了页面极强的扩展性和灵活性。扩展性是工作项目中必须考虑和设计的，避免堆积“屎山”。此外，本章还开发了图层、保存、发布、页面设置等功能。
对于拖拽排序，本章选择了 5 个第三方工具来介绍和对比，最终选择 dnd-kit ，并封装组件，实现画布和图层的拖拽排序。对于撤销重做，本章选择 redux-undo 来扩展 redux 的撤销重做功能，展现出一种简洁易用的扩展方式。
创建、编辑、发布问卷以后，能得到实际的统计数据和答卷列表，有输入有输出，才能体现完整项目的业务闭环。本章将开发统计页面，展现答卷列表，并使用 Recharts 开发图表统计。
问卷编辑发布完以后，会产出一个 H5 页面，供用户填写提交答卷，即 C 端。本章使用 Next.js 开发 C 端 H5 页面，让你从 0 学会 React 技术栈的 SSR 服务端渲染。本章内容和 B 端的发布、统计有很强的关联，体现系统的统一完整性。
性能优化是所有 Web 项目必备的事项。本章将对问卷项目进行性能优化，使用 useMemo 和 useCallback 缓存数据，使用路由懒加载和 webpack 拆分代码。最终将 main.js 代码体积从 1.6M 优化到 33KB ，极大提升加载效率。
测试是现代 Web 系统的重要流程，前端工程师也要参与到测试中来。本章讲解 React 组件单元测试，以及通过 pre-commit 实现自动化测试流程，不怕遗漏。同时，使用 Storybook 进行组件的可视化测试，让组件一目了然。
过去分词
| 欢迎光临 优百课栈 (https://www.ubkz.com/) | Powered by Discuz! X3.4 |