《React.js+Node.js+MongoDB企业级全栈开发实践》讲解一个真实的企业项目——计算机选购配置系统的开发。这个项目是一个在线工具,可以根据用户选择的软件和应用程序,自动给出笔记本电脑和服务器的 配置。本书的项目开发结合当前热门的技术,如React.js、Redux、Hooks、webpack、Node.js、Express、MongoDB、axios、Antd等进行讲解,使读者全面了解并熟悉React.js全栈开发技术,快速掌握企业级项目的全栈开发方法。
第1章 组件化开发 1
1.1 什么是组件化开发 1
1.1.1 多页应用 1
1.1.2 单页应用 2
1.1.3 组件化的概念 3
1.2 为什么要用组件化开发 3
1.2.1 前后端分离思想 3
1.2.2 组件复用 4
1.3 计算机选购配置系统 4
1.3.1 系统介绍 4
1.3.2 系统UI界面 4
1.3.3 登录页面和模块介绍 6
1.3.4 注册页面和模块介绍 6
1.3.5 内容页面初始界面和模块介绍 6
1.3.6 产品列表界面和模块介绍 8
1.4 小结 9
第2章 三大主流前端框架介绍 10
2.1 React 10
2.2 Vue 11
2.3 Angular 12
2.4 如何选型 13
2.5 小结 13
第3章 前端环境的搭建 14
3.1 Node.js的安装与使用 14
3.2 npm的安装与使用 15
3.3 nvm的安装与使用 16
3.4 CLI与create-react-app 17
3.5 小结 21
第4章 React全家桶介绍 22
4.1 React项目整体架构 22
4.2 状态管理 25
4.3 路由 26
4.4 集成axios 27
4.5 集成UI框架 28
4.6 小结 29
第5章 React组件 30
5.1 组件类型 30
5.1.1 class组件 30
5.1.2 function组件 33
5.1.3 Hooks 34
5.2 JSX 40
5.2.1 概念和原理 40
5.2.2 JSX规则 41
5.3 React组件状态管理 48
5.3.1 state 49
5.3.2 props 50
5.3.3 context 53
5.4 React组件的生命周期和执行时机 54
5.4.1 class组件的生命周期函数和执行时机 54
5.4.2 Hooks API执行时机 55
5.5 事件 59
5.6 小结 61
第6章 React Redux 62
6.1 React、Redux、React Redux的关系 62
6.2 Redux和Redux Toolkit 63
6.2.1 Redux中数据更新的流程 63
6.2.2 Redux的核心概念 64
6.2.3 Redux Toolkit 65
6.3 React Redux 66
6.3.1 Provider 66
6.3.2 connect 67
6.3.3 Hooks 67
6.4 结合案例的应用场景 68
6.5 小结 73
第7章 路由 74
7.1 路由原理 74
7.2 路由切换 75
7.2.1 Link 75
7.2.2 HashRouter/BrowserRoute和Route 76
7.2.3 useNavigate 77
7.2.4 useHistory 81
7.3 小结 82
第8章 webpack 83
8.1 什么是webpack 83
8.2 webpack的作用 86
8.3 webpack的配置 87
8.4 webpack-dev-server 89
8.5 create-react-app中配置proxy代理 90
8.6 小结 92
第9章 前端项目中常用的工具库 93
9.1 lodash 93
9.2 classnames 96
9.3 moment 99
9.4 uuid 101
9.5 小结 101
第10章 使用axios进行数据交互 102
10.1 axios的基本用法 102
10.2 封装axios公用组件 103
10.2.1 封装axios公用方法 103
10.2.2 在组件中调用封装好的axios方法 105
10.3 小结 111
第11章 前端调试利器 112
11.1 Chrome开发者工具 112
11.2 Redux DevTools 116
11.3 小结 120
第12章 UI框架 121
12.1 antd组件的基本用法 121
12.2 集成antd 133
12.3 使用示例 134
12.4 小结 141
第13章 前端存储 142
13.1 sessionStorage 142
13.2 localStorage 146
13.3 cookie 147
13.4 IndexDB 149
13.5 LevelDB 151
13.6 小结 154
第14章 中间件 155
14.1 什么是中间件 155
14.2 项目中常用的中间件 156
14.2.1 applyMiddleware 156
14.2.2 redux-thunk 157
14.3 小结 158
第15章 高阶组件 159
15.1 高阶函数和高阶组件 159
15.2 高阶组件的作用 165
15.3 自定义高阶组件 165
15.4 小结 168
第16章 国际化 169
16.1 什么是国际化 169
16.2 react-intl 170
16.3 antd组件国际化 182
16.4 小结 183
第17章 toggle控制 184
17.1 toggle介绍 184
17.2 toggle函数 185
17.3 toggle的使用 187
17.4 小结 189
第18章 前端质量管理 190
18.1 代码检查工具ESlint 190
18.2 单元测试 193
18.3 常用的测试框架 193
18.3.1 Jest 194
18.3.2 Chai 195
18.3.3 Sinon 195
18.4 小结 196
第19章 前端工程化管理 197
19.1 Git 197
19.2 GitHub和GitLab 199
19.3 单体仓库和多仓库策略的利弊 199
19.4 小结 200
第20章 与第三方集成 201
20.1 通过iframe标签的集成方式 201
20.2 带特定token的URL集成方式 203
20.3 微前端的集成方式 203
20.4 小结 207
第21章 React项目的性能优化 208
21.1 组件拆分 208
21.2 函数功能单一 211
21.3 循环中的key 212
21.4 shouldComponentUpdate防止组件重复渲染 213
21.5 PureComponent代替Component 217
21.6 懒加载组件 218
21.7 Gzip压缩 219
21.8 小结 220
第22章 服务器端开发的准备 221
22.1 模块化规范 221
22.1.1 CommonJS 221
22.1.2 AMD 222
22.1.3 CMD 223
22.1.4 ES 6 223
22.2 HTTP/HTTPS协议 224
22.3 Content-Type 225
22.4 小结 226
第23章 Express应用框架 227
23.1 Node.js基础 227
23.2 什么是Express 230
23.3 安装Express 230
23.4 Express基础 231
23.4.1 常用方法 231
23.4.2 Express中间件 234
23.4.3 快速编写Hello World程序 235
23.5 RESTful接口规范 236