React 系列三： React 脚手架

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

前言

这节我们将介绍如何通过 React 脚手架创建一个 React 工程并进行编写内容，不用像 Hello React 那样在 html 中编写 React 代码。

本文会向你介绍以下内容：

• 前端工程的复杂化
• 脚手架是什么
• 如何搭建一个 React 脚手架
• 脚手架的目录结构
• 如何在脚手架上编写自己的代码

前端工程的复杂化

随着前端项目开发的越来越复杂，我们需要开始考虑许许多多问题，比如：

• 项目的目录结构如何划分
• 如何管理文件间的互相依赖关系
• 如何管理第三方库的依赖
• 如何让项目在发布时进行压缩，减小传输大小以及混淆变量名

如今的前端项目已经变得非常复杂了，我们不能单纯的使用 script 标签来引入大量的