React.js+Node.js+MongoDB企业级全栈开发实践

　　《React.js Node.js MongoDB企业级全栈开发实践》系统介绍Web应用全栈开发技术，通过一个真实的企业项目，讲解如何使用React全家桶以及Node.js、MongoDB进行全栈开发，帮助开发人员快速积累开发经验，全面掌握开发技巧。读完本书相当于真实参与一个完整的全栈项目开发。本书配套示例项目源代码。 《React.js Node.js MongoDB企业级全栈开发实践》共27章，内容包括开发环境的搭建、组件化的理解、主流前端框架的介绍、React组件和状态管理、Redux/React Redux的运用、Hooks API的运用、高阶组件、中间件、路由、webpack、axios、前端常用第三方工具库、UI框架antd、前端存储、国际化、toggle、前端调试、质量管理、前端工程化管理、与第三方继承、React项目性能优化、服务器开发的准备、Express应用框架、MongoDB的连接和数据操作、使用Postman测试接口、企业项目的React前端开发、企业项目的Node后端开发。 《React.js Node.js MongoDB企业级全栈开发实践》既适合React初学者、React Node全栈开发初学者、了解基础知识但缺乏全栈开发经验的前端开发人员，以及想要拓宽职业技能的Web应用开发人员，也适合高等院校或高职高专Web应用开发相关课程的师生。

　　李海燕，联想（北京）有限公司前端开发工程师。毕业于北京理工大学，拥有十多年前端开发经验，深刻理解互联网和软件系统开发。曾就职于搜狐、天涯社区等公司。希望本书对有志于前端开发的初学者们有所帮助。

 
第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
23.6  脚手架express-generator 236
23.6.1  脚手架安装 236
23.6.2  脚手架项目结构 237
23.7  nodemon 238
23.8  jsonwebtoken 239
23.9  cors 239
23.10  实现get接口 240
23.11  实现post接口 241
23.12  小结 242
第24章  MongoDB的连接和数据操作 243
24.1  MongoDB的简介与安装 243
24.2  MongoDB的存储结构 245
24.3  MongoDB的连接 245
24.4  集成MongoDB到Express框架中 248
24.5  小结 254
第25章  使用Postman测试接口 255
25.1  Postman的下载与安装 255
25.2  界面导航说明 256
25.3  测试get接口 258
25.4  测试post接口 259
25.5  小结 261
第26章  项目React前端开发 262
26.1  项目开发流程 262
26.2  项目初始化与配置 263
26.3  项目架构 264
26.4  项目公共文件 265
26.4.1  编写项目公用样式文件 265
26.4.2  增加项目的静态文件 265
26.4.3  增加项目的代理文件setupProxy.js 266
26.4.4  编写request.js 266
26.4.5  编写constants.js 267
26.4.6  创建空文件占位 269
26.5  项目的入口文件index.js 269
26.6  编写登录/注册页面 270
26.6.1  容器组件Login 270
26.6.2  表单子组件LoginForm 272
26.7  编写系统介绍模块 275
26.8  编写功能区模块 276
26.8.1  容器组件Bar 276
26.8.2  子组件Step1 278
26.8.3  子组件Step2 282
26.8.4  子组件AppIcons 285
26.8.5  子组件AppLists 287
26.8.6  子组件Search 288
26.9  编写联系我们模块 289
26.10  编写产品模块 292
26.10.1  容器组件Products 292
26.10.2  子组件SearchSoftwares 295
26.10.3  子组件ClearAll 296
26.10.4  子组件ProductLists 297
26.10.5  子组件Product 299
26.10.6  子组件CarouselCard 300
26.10.7  子组件CarouselButton 301
26.10.8  子组件Category 302
26.10.9  子组件Stock 302
26.10.10  子组件ProductTable 303
26.10.11  子组件TotalPrice 304
26.10.12  子组件PriceTip 304
26.11  编写反馈模块 305
26.11.1  容器组件FeedBack 305
26.11.2  子组件FeedBackModal 306
26.12  编写内容页面 310
26.13  编写组件处理国际化 311
26.14  编写组件样式 315
26.15  编写actions.js 316
26.15.1  Login组件的actions 317
26.15.2  Bar组件的actions 318
26.15.3  Product组件的actions 321
26.15.4  FeedBack组件的actions 323
26.15.5  App组件的actions 324
26.15.6  Wrappers组件的actions 325
26.16  编写selector.js 327
26.16.1  Login组件的selector 327
26.16.2  Bar组件的selector 327
26.16.3  Product组件的selector 328
26.16.4  Wrappers组件的selector 328
26.17  mock数据 328
26.18  增加toggle控制 330
26.19  小结 332
第27章  项目Node后端开发 333
27.1  开发环境的准备和搭建 333
27.2  编写公用文件 335
27.3  创建并连接MongoDB数据库，准备数据 337
27.4  定义接口的路由 339
27.5  编写接口/login 340
27.6  编写接口/register 342
27.7  编写接口/featuresToggle 343
27.8  编写接口/product/getLocales 344
27.9  编写接口/product/getApplication 345
27.10  编写接口/product/recommend 346
27.11  编写接口/product/saveFeedback 347
27.12  小结 348