本文主要介绍了React脚手架的研究，并通过实例代码进行了详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
一、前端工程的复杂化
如果我们只开发几个小的演示程序，那么我们永远不需要考虑一些复杂的问题：
比如目录结构是如何组织和划分的；比如，如何管理文件之间的相互依赖关系；比如如何管理对第三方模块的依赖；比如项目发布前如何压缩打包；等待.
现代前端项目变得越来越复杂：
不再是在HTML中引入几个css文件，引入几个编写的js文件或者第三方js文件那么简单；
比如css可能是less、sass等前置处理器写的，我们需要把它们转换成普通的css让浏览器解析；
比如JavaScript代码不再只是写在几个文件里，而是由数百个文件以模块化的方式组成。我们需要通过模块化技术来管理它们的相互依赖性；
比如项目需要依赖很多第三方库，如何更好的管理它们(比如管理它们的依赖关系，版本升级等。);
为了解决这些问题，我们需要学习更多的工具：
如babel，webpack，gulp。他们配置转换规则、打包依赖项、热更新等等；
脚手架的出现就是为了帮助我们解决这一系列问题；
二、脚手架是什么呢？
传统脚手架指的是建筑的一种结构：建筑或建造时的临时框架；
编程中提到的脚手架，其实是帮助我们快速生成项目工程结构的工具；
每个项目的效果不同，但它们的基本工程结构是相似的；
既然差不多，就没必要每次都从头开始建。我们可以使用一些工具来帮助我们制作基本的工程模板。
不同的项目，在这个模板的基础上进行项目开发或者简单修改一些配置；
这样也可以间接保证项目的基本制度一致性，方便后期维护；
总结：脚手架让项目从搭建到开发，再到部署，整个流程变得快速和便捷；
三、前端脚手架
现在三种流行的框架都有自己的脚手架：
Vue的支架：vue-cli
角形脚手架：角形cli
React的支架：创建-反应-应用
他们的作用是帮助我们生成一个通用的目录结构，我们已经配置好了我们需要的工程环境。
使用这些脚手架需要依靠什么？
目前这些支架都是node写的，基于webpack
所以我们必须在自己的电脑上安装节点环境；
我们这里主要研究React，所以还是用React的脚手架工具：create-react-app作为解释；
四、安装node
React scaffold本身需要依赖节点，所以我们需要安装节点环境：
无论是windows还是Mac OS，都可以通过node官网直接下载；
地址：https://nodejs.org/en/download/,官网注：这里推荐你下载LTS(长期支持)版本，是长期支持版本，会比较稳定；
下载后，双击安装：
1.在安装过程中，环境变量将被自动配置；
2.在安装时，它会帮助我们同时安装npm管理工具；
输入以下命令：
节点版本
npm版本
如果版本号出现，则安装成功。
五、包管理工具
什么是npm？
节点包管理器的全称，即“节点包管理器”；
作用肯定是帮助我们管理依赖的工具包(比如react、react-dom、axios、babel、webpack等。);
作者开发的目的是为了解决“模块管理不好”的问题；
此外，还有一个著名的节点包管理工具yarn:
Yarn是由脸书、Google、Exponent Tilde联合推出的一款新的JS包管理工具。
纱线的出现弥补了npm的一些缺陷；
早期的npm有很多缺陷，比如安装依赖慢，版本依赖混乱等等。
虽然从npm5开始做了很多升级改进，但是很多人还是喜欢用纱；
反应支架也使用纱线；默认情况下；
npm安装-g纱线
输入yarn - version，如果输出版本号，则安装成功。
六、Yarn和npm命令对比
七、安装脚手架
补充：在中国，某些情况下，使用npm和yarn可能无法正常安装库。这个时候，我们可以选择使用cnpm。
NPM install-g cnpm-registry=https://registry . NPM . Taobao . org
最后需要安装的是创建React项目的脚手架：
npm安装-g创建-反应-应用程序
输入create-react-app-version，如果输出版本号，则安装成功。
八、创建React项目
现在，我们可以通过搭建来创建React项目。
创建React项目的命令如下：
注意：项目名称不能包含大写字母。
还有更多创建项目的方法，请参考GitHub的自述。
创建-反应-应用程序项目名称
创建完成后，进入相应的目录，就可以运行项目了：
CD 01-测试-重新启动
九、目录结构分析
十、了解PWA
整个目录结构非常容易理解，除了一个与PWA相关的概念：
Pw全称Progressive WEB App，即progressive web application
PWA应用首先是网页，网页应用可以用Web技术编写；
然后添加App Manifest和Service Worker，实现PWA安装和离线功能；
这种Web存在形式，我们也称之为Web App；
PWA解决了哪些问题？
它可以添加到主屏幕。单击主屏幕图标开始播放动画并隐藏地址栏。
实现离线缓存功能，即使用户手机无网，仍可使用部分离线功能；
实现了消息推送；
等等一系列类似于Native App相关的功能；
十一、webpack是什么
我们说过React的脚手架是基于Webpack配置的：
Webpack是现代JavaScript应用程序的静态模块打包器。
webpack在处理一个应用的时候，会递归地构建一个依赖图，这个依赖图包含了应用需要的每个模块，然后把这些模块全部打包成一个或者多个bundle；
十二、脚手架中的webpack
这里暂时不谈webpack，因为里面的内容很多(以后webpack上会有专门的话题)；
但是，很奇怪：我们在目录结构中没有看到与webpack相关的内容？
原因是React scaffold说隐藏了webpack相关的配置(其实从Vue CLI3开始就隐藏了)；
如果我们想看到webpack的配置信息，应该怎么做？
我们可以在package.json文件中执行一个脚本：“inject”:“react-scripts inject”
这个操作是不可逆的，所以在执行过程中会提示我们；
纱线弹出
十三、脚手架中的webpack
十四、文件结构删除
通过脚手架创建项目后，很多同学还是觉得目录结构太复杂，我打算从头开始写代码。
让我们先删除所有不必要的文件：
删除src下的所有文件，删除public file下列出的所有文件，除了favicon.ico和index.html。
十五、开始编写代码
在src目录中，创建index.js文件，因为这是webpack打包的入口点。
开始在index.js中编写React代码：
我们会发现写出来和写出来的代码在逻辑上是一致的；只是在模块化开发中，我们需要手动导入React和ReactDOM，因为它们都在我们安装的模块中；
如果不想直接在ReactDOM.render中写太多代码，可以单独提取一个组件App.js:
这就是这篇关于反应支架研究的文章。要了解更多相关的React搭建内容，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。