如何将react项目从零开始搭建到成功部署的每一步详细教程？

本文共计1061个文字，预计阅读时间需要5分钟。

启动新项目+文档主要记录近期工作一个新项目从0-1的过程，主要记录3个节点：选型、运行时、上线。+项目选型+React+脚手架初始化，选择社区流行的cra（create-react-app）和umi。以下几步：

开展新项目

本文主要记录最近工作一个新项目从0-1的过程，主要记录3个节点，选型、运行时、上线。

项目选型

react 脚手架初始化，社区比较火的有cra（create-react-app）和umi，从以下几点进行对比最终选择了比较贴合项目的umi。

1. 易用性，开箱即用。umi内置了许多功能，可是也带来很多限制，譬如对项目结构的规定提供自己生态的插件需要学习成本，cra初始化简洁选取模板即可开始，不需要额外的学习成本（即使vue玩家过来也没负担）。
2. 可拓展性，修改webpack配置。cra提供eject（不可逆的操作）全部暴露出来自己控制，丧失了一开始想要简单配置的初衷，或者使用react-app-rewired和customize-cra可看这里。 umi需要修改webpack配置时可直接写文件（基于webpack-chain），还提供了一个运行态的配置。
3. 生态，umi是阿里开源的，里面有许多插件都与他们的开源关联起来了，比如比较火的antd，qiankun，官网提供了大量的实践指导，而且是中文文档（有部分人会倾向于此），cra简洁只负责一个脚手架的工作（容易理解内部实现，出问题能快速定位解决）。

最终考虑到一个项目需要快速搭建需要许多成型的插件支持所以采用了umi。antd真香！！！@umijs/plugin-model，推荐这个插件看懂内部实践基本就掌握了数据管理了。