"当今更流行的JavaScript库的实操指南 在《ReactJS实践入门》一书中，全栈***Chris Minnick使用广受欢迎的前端工具ReactJS为读者讲解基本的编程概念，教会读者如何理解React，并通过示例说明了如何应用所学知识来构建应用程序。 《ReactJS实践入门》将帮助读者学习ReactJS开发人员使用的专业术语，以及实践对于React编程新手和老手都有帮助的现代示例。《ReactJS实践入门》假定读者没有软件工程知识基础或相关经验，因此在介绍相关术语时会进行详细 阐述。 对于刚接触JavaScript和前端开发的读者，包括那些初次接触编程的读者，《ReactJS实践入门》是一个很**的资源，适合初出茅庐的训练营毕业生，半路出家自学成才的程序员，以及具有WordPress、Drupal或其他编程语言基础且想要学习React的开发人员。对于**JavaScript开发人员，《ReactJS实践入门》则可作为一本简明易懂的React指南，帮助他们快速上手。 "

第1章 Hello,World！ 1 1.1 在没有工具链的情况下 如何使用React 1 1.2 使用Create React App 和JSX创建交互式 “Hello,World”应用程序 6 1.3 本章小结 7 第2章 React基础 9 2.1 React名称的由来 9 2.2 UI层 10 2.3 虚拟DOM 11 2.4 React的原理 12 2.4.1 关于组件 12 2.4.2 组合与继承 13 2.4.3 React是声明式的 13 2.4.4 React是惯用语 14 2.4.5 为什么要学习React 15 2.4.6 React与其他框架的 比较 15 2.4.7 React不是什么 17 2.5 本章小结 18 第3章 JSX 21 3.1 JSX不是HTML 21 3.2 什么是JSX 26 3.2.1 JSX的工作方式 26 3.2.2 转译器 28 3.3 JSX的语法基础 29 3.3.1 JSX是JavaScript XML 29 3.3.2 避免使用保留字 30 3.3.3 JSX使用驼峰式命 名法 30 3.3.4 为DOM元素中的自定义 属性加上data-前缀 30 3.3.5 JSX布尔属性 31 3.3.6 使用花括号包含 JavaScript字面量 31 3.3.7 何时在JSX中使用 JavaScript 32 3.3.8 JSX中的条件 32 3.3.9 JSX中的表达式 34 3.3.10 在JSX中使用子 元素 35 3.3.11 React Fragment 36 3.3.12 本章小结 37 第4章 组件 39 4.1 什么是组件 39 4.2 组件和元素 40 4.2.1 组件定义元素 40 4.2.2 元素调用组件 41 4.3 内置组件 42 4.3.1 HTML元素组件 42 4.3.2 Attributes和Props 46 4.4 用户定义的组件 50 4.5 组件类型 51 4.5.1 类组件 51 4.5.2 逐步了解React类 组件 60 4.5.3 函数组件 67 4.5.4 函数组件和类组件的 区别 75 4.6 React子组件 75 4.6.1 this.props.children 75 4.6.2 Children的用法 76 4.7 组件的生命周期 79 4.7.1 挂载 79 4.7.2 更新 80 4.7.3 卸载 82 4.7.4 错误处理 82 4.7.5 提高性能并避免错误 82 4.8 渲染组件 87 4.8.1 用ReactDOM渲染 87 4.8.2 虚拟DOM 88 4.8.3 其他渲染引擎 89 4.9 组件的术语 91 4.10 本章小结 92 第5章 React DevTools 93 5.1 安装和入门 93 5.2 检查组件 95 5.2.1 使用组件树 96 5.2.2 搜索组件 97 5.2.3 筛选组件 99 5.2.4 选择组件 100 5.3 在DevTools中编辑组件 数据 101 5.4 使用额外的DevTools 功能 103 5.5 性能分析 104 5.6 本章小结 106 第6章 React数据流 107 6.1 单向数据流 107 6.1.1 理解单向数据流 108 6.1.2 为什么使用单向 数据流 109 6.2 Props 110 6.2.1 组件接收Props 110 6.2.2 Props可以是任何数据 类型 110 6.2.3 Props是只读的 111 6.2.4 使用PropType验证 传入的Props 112 6.2.5 默认Props 123 6.3 ReactState 127 6.3.1 什么是state 127 6.3.2 初始化state 127 6.3.3 state和props的区别 130 6.3.4 更新状态 130 6.3.5 状态中应包含的 内容 140 6.3.6 构建Reminders应用 程序 141 6.3.7 状态中不应包含的 内容 147 6.3.8 放置状态的位置 147 6.3.9 状态提升 148 6.3.10 关于key Prop 154 6.3.11 筛选提醒 160 6.3.12 实现isComplete 更改功能 164 6.4 转换为类组件 166 6.5 本章小结 173 第7章 事件 175 7.1 React中事件的运行 机制 175 7.2 什么是SyntheticEvent 177 7.3 使用事件侦听器属性 178 7.4 Event对象 178 7.5 支持的事件 180 7.6 事件处理函数 184 7.6.1 编写内联事件处理 程序 184 7.6.2 在函数组件中编写 事件处理程序 185 7.6.3 在类组件中编写 事件处理程序 186 7.6.4 绑定事件处理程序 函数 187 7.6.5 将数据传递给 事件处理程序 190 7.7 本章小结 191 第8章 表单 193 8.1 表单具有状态 193 8.2 受控输入与非受控输入 194 8.2.1 更新受控输入 195 8.2.2 控制函数组件中的 输入 195 8.2.3 控制类组件中的输入 196 8.3 提升输入状态 197 8.4 使用非受控输入 199 8.5 使用不同的表单元素 200 8.5.1 控制input元素 200 8.5.2 控制textarea元素 201 8.5.3 控制select元素 201 8.6 阻止默认操作 202 8.7 本章小结 203 第9章 ref 205 9.1 什么是ref 205 9.2 如何在类组件中 创建ref 206 9.3 如何在函数组件中 创建ref 206 9.4 使用ref 206 9.5 创建回调ref 208 9.6 何时应使用ref 209 9.7 何时不应使用ref 210 9.8 示例 210 9.8.1 管理焦点 210 9.8.2 自动选择文本 210 9.8.3 控制媒体播放 212 9.8.4 设置滚动位置 212 9.9 本章小结 213 第10章 样式化React 215 10.1 样式的重要性 215 10.2 将CSS导入HTML 文件 216 10.3 在组件中使用普通的旧 CSS 216 10.4 编写内联样式 218 10.4.1 JavaScript样式 语法 219 10.4.2 为什么使用内联 样式 220 10.4.3 为什么不使用内联 样式 220 10.4.4 使用样式模块改进 内联样式 220 10.5 CSS模块 221 10.5.1 命名CSS模块 文件 222 10.5.2 **CSS模块 功能 223 10.6 CSS-IN-JS和样式化 组件 224 10.7 本章小结 226 第11章 hook介绍 227 11.1 什么是hook 227 11.2 为什么要引入hook 227 11.3 使用hook的规则 228 11.4 内置hook 229 11.4.1 使用useState管理 状态 229 11.4.2 使用useEffect链入 生命周期 233 11.4.3 使用useContext订阅 全局数据 240 11.4.4 将逻辑和状态与 useReducer相结合 241 11.4.5 使用useCallback缓存 回调函数 242 11.4.6 使用useMemo缓存 计算值 245 11.4.7 使用useRef访问 子对象 246 11.4.8 使用useImperativeHandle 自定义公开值 247 11.4.9 使用useLayoutEffect 同步更新DOM 248 11.5 编写自定义hook 248 11.6 使用UseDebugValue标记 自定义hook 250 11.7 查找并使用自定义 hook 252 11.7.1 use-http 252 11.7.2 react-fetch-hook 252 11.7.3 axios-hook 252 11.7.4 react-hook-form 253 11.7.5 @rehooks/local- storage 253 11.7.6 use-local-storage- state 254 11.7.7 其他有趣的hook 254 11.7.8 hook列表 254 11.8 本章小结 254 第12章 路由 257 12.1 什么是路由 257 12.2 React中路由的用法 259 12.3 使用React Router 260 12.3.1 安装并导入 react-router-dom 260 12.3.2 路由器组件 261 12.3.3 链接到路由 263 12.3.4 创建路由 268 12.3.5 location、history和 match对象 274 12.4 React Router hook 280 12.4.1 useHistory 281 12.4.2 useLocation 281 12.4.3 useParams 281 12.4.4 useRouteMatch 281 12.5 本章小结 281 第13章 错误边界 283 13.1 锦囊妙计 283 13.2 什么是错误边界 284 13.3 实现错误边界 286 13.3.1 构建自己的 ErrorBoundary组件 286 13.3.2 安装预先构建的 ErrorBoundary组件 295 13.4 错误边界无法捕获的 错误 296 13.4.1 使用try/catch捕获 错误边界中的错误 296 13.4.2 使用react-error-boundary 捕获事件处理程序中的 错误 297 13.5 本章小结 298 第14章 部署React 299 14.1 什么是部署 299 14.2 构建应用程序 299 14.2.1 运行build脚本 300 14.2.2 检查build目录 300 14.2.3 filenames的由来 302 14.3 部署的应用程序有何 不同 303 14.4 开发模式与生产模式 303 14.5 发布到Web上 304 14.5.1 Web服务器托管 304 14.5.2 节点托管 304 14.5.3 使用Netlify进行 部署 305 14.6 本章小结 308 第15章 从头开始初始化React 项目 309 15.1 构建自己的工具链 309 15.1.1 初始化项目 310 15.1.2 HTML文档 310 15.1.3 主JavaScript文件 311 15.1.4 根组件 311 15.1.5 在浏览器中运行 312 15.2 Webpack的工作原理 315 15.2.1 加载器 315 15.2.2 插件 315 15.3 自动化构建过程 316 15.3.1 制作HTML模板 316 15.3.2 开发服务器和热 重载 317 15.3.3 测试工具 317 15.3.4 创建npm脚本 321 15.4 构建源目录 322 15.4.1 按文件类型分组 322 15.4.2 按功能分组 323 15.5 本章小结 323 第16章 获取和缓存数据 325 16.1 异步代码：与时间 有关 325 16.2 JavaScript永不休眠 326 16.3 在React中如何运行异步 代码 329 16.4 获取数据的方法 331 16.5 使用Fetch获取数据 332 16.6 使用axios获取数据 332 16.7 使用Web Storage 334 16.7.1 Web Storage的两个 属性 334 16.7.2 何时使用 Web Storage 335 16.7.3 何时不使用 Web Storage 335 16.7.4 Web Storage是 同步的 335 16.7.5 使用localStorage的 示例 336 16.7.6 使用localStorage 存储数据 336 16.7.7 从localStorage 读取数据 337 16.7.8 从localStorage中 删除数据 339 16.8 本章小结 339 第17章 Context API 341 17.1 什么是prop drilling 341 17.2 Context API如何解决 问题 342 17.2.1 创建Context 342 17.2.2 创建Provider 343 17.2.3 使用Context 343 17.3 Context的常见用例 345 17.4 不适用Context的情况 345 17.5 合成模式作为Context的 替代方案 346 17.6 示例应用程序：用户偏好 设置 349 17.7 本章小结 351 第18章 React Portal 353 18.1 什么是Portal 353 18.1.1 如何创建Portal 353 18.1.2 为什么不直接渲染 多个组件树 356 18.2 常见用例 357 18.2.1 模态对话框的渲染与 交互 357 18.2.2 使用模态管理键盘 焦点 362 18.3 本章小结 363 第19章 React中的无障碍性 365 19.1 为什么无障碍性 很重要 365 19.2 无障碍性基础 366 19.2.1 Web内容无障碍性 指南(WCAG) 366 19.2.2 Web无障碍计划-无障碍 富互联网应用程序 (WAI-ARIA) 367 19.3 在React组件中实现无障 碍性 367 19.3.1 React中的ARIA 属性 367 19.3.2 语义化的HTML 368 19.3.3 表单无障碍性 369 19.3.4 React中的焦点 控制 369 19.3.5 React中的媒体 查询 371 19.4 本章小结 373 第20章 **主题 375 20.1 测试 375 20.1.1 Mocha 376 20.1.2 Enzyme 376 20.1.3 Chai 377 20.2 服务器端渲染 379 20.2.1 Flux 380 20.2.2 Redux 380 20.2.3 GraphQL 382 20.2.4 Apollo 383 20.2.5 React Native 383 20.2.6 Next.js 384 20.2.7 Gatsby 384 20.3 需要关注的人 384 20.4 有用的链接和资源 385 20.5 本章小结 385