# 实战篇 01：开发前准备

# 为什么选择 React

企业管理系统作为供企业内部人员使用的应用，在浏览器适配性方面的要求并没有供普通用户使用的应用那么严格，这为我们选择现代的 JavaScript 框架提供了一定的便利。于是接下来的问题就变为了在 React、Angular、Vue 这三大 JavaScript 框架中应当选择哪一个？

其实这个问题在具体技术层面并没有一个确定的答案，更多的还是要看团队成员们的背景。如果专业前端比较多的话，React 和 Vue 都是不错的选择。如果团队中后端背景的全栈比较多的话，大而全且接近 Java 思想的 Angular 可能是最优的选择。

至于 React 的 Vue 之间的选择可以说虽然二者在写法上有着许多的不同，但核心的区别却是在于二者的社区构成。React 的社区更加去中心化，许多常用的第三方库都不是由官方提供的。这让 React 社区非常得活跃，在一个问题上大家可能会产生出许多种不同的解决方案。Vue 的社区则相对而言更中心化一些，除了 Vue 本身支持的功能要比 React 多之外，如 Vuex、Vue Router 这样由官方维护的第三方库也让 Vue 的社区更多地是在官方的指导下去解决问题。简而言之的话，React 选择更多，Vue 更标准化，但二者之间并没有好坏之分。

最后还有一点值得比较的就是二者对于 TypeScript 的友好程度。React 社区在 TypeScript 方面的探索以及积累的经验相对而言要比 Vue 社区更多一些，而 Vue 则是在 2.5 版本之后才完善了自身对于 TypeScript 的支持。所以如果你的技术选型中有 TypeScript 的话，在渲染框架层面 React 可能会是一个更好的选择。

# 示例项目列表

在进入具体的实战篇之前，先交代下后面实战篇中会涉及的示例项目：

基础脚手架：react-boilerplate
企业管理系统脚手架：react-boilerplate-pro
侧边栏组件：react-sider
包含鉴权的路由：react-acl-router
国际化多语言文件注入：react-intl-context

这其中前两个是完整的示例项目，在把项目 clone 到本地后根据 README.md 文件中的指导就可以运行起来。后三个是企业管理系统中常用模块的组件抽象，全部都应用在了 react-boilerplate-pro 项目中，推荐搭配着 demo 一起研究。

# Node.js

笔者本地的 Node.js 版本是 8.11.3。推荐使用 8.10.0 或 9.10.0 以上的版本，否则将不能够兼容 ESLint 当前最新的 5.0 版本。

# 包管理工具

各位在安装项目依赖时可以使用默认的 npm，但在这里推荐使用 Yarn 作为项目的包管理工具，在所有的项目中也都提供了相应的 yarn.lock 文件。这样可以确保大家使用的第三方依赖与笔者本地的保持一致，而且 Yarn 自身强大的 cache 功能也可以在重复安装相同依赖时起到一定的加速作用。

# 第三方依赖

所有项目中需要用到的第三方依赖都在项目的 package.json 以及 yarn.lock 中有所体现，大家使用 yarn install（或 npm install）安装即可。

这里列出一些使用的重要依赖的版本，供大家参考：

react: 16.4.2
react-dom: 16.4.2
redux: 4.0.0
redux-thunk: 2.3.0
react-router-dom: 4.3.1
connected-react-router: 4.3.0
antd: 3.6.6
webpack: 4.16.5
babel-core: 6.26.3
eslint: 5.3.0
jest: 23.4.2

示例项目会定时对使用的第三方依赖进行升级，但因为第三方依赖的更新速度较快，所以上面列出的第三方依赖版本可能会与实际示例项目中的有所出入，一切以实际示例项目中的 package.json 和 yarn.lock 为准。

# 拓展学习资料

AlanWei/blog：笔者的 GitHub 博客，里面有更多关于 React、组件库、前端数据层、服务端渲染的资料。
pure render：阿里数据中台前端团队分享前端相关经验。
前端精读评论：阿里数据中台前端团队分享前端界的好文精读。
前端新能源：分享前端有深度的新思想和新方法。
蚂蚁金服体验科技：探索极致用户体验与最佳工程实践。

实战篇 01 开发前准备|React专题

实战篇 01 开发前准备|React专题