React脚手架

前端工程的复杂化

如果我们只是开发几个小的demo程序，那么永远不需要考虑一些复杂的问题:

• 比如目录结构如何组织划分;
• 比如如何管理文件之间的相互依赖:
• 比如如何管理第三方模块的依赖;
• 比如项目发布前如何缩、打包项目;

现代的前端项目己经越来越复杂了，不会再是在HTML中引入几个css文件，引入几个编写的is文件或者第三方的is文件这么简单。比如css可能是使用less、sass等预外理器进行编写，我们需要将它们转成普通的css才能被浏览器解析，比如JavaScript代码不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上千个文件中，我们需要通过模块化的技术来管理它们之间的相互依口 比如项目需要依赖很多的第三方库，如何更好的管理它们(比如管理它们的依赖、版本升级等)。

为了解决上面这些问题，我们需要再去学习一些工具:比如babel、webpack、gulp，配置它们转换规则、打包依赖、热更新等等一些的内容，脚手架的出现，就是帮助我们解决这一系列问题的。

脚手架是什么

编程中提到的脚手架 (Scaffold)，其实是一种工具，帮我们可以快速生成项目的工程化结构; 每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的；既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生产基本的工程化模板，不同的项目，在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可；这样也可以间接保证项目的基本机构一致性，方便后期的维护。

使用这些脚手架需要依赖什么呢？目前这些脚手架都是使用node编写的，并且都是基于webpack的，所以我们必须在自己的电脑上安装node环境。

安装node

React脚手架本身需要依赖node，所以我们需要安装node环境，无论是windows还是Mac OS，都可以通过node官网直接下载官网地址: nodejs.org/en/download…

注意: 这里推荐大家下载LTS (Long-term support)版本，是长期支持版本，会比较稳定。

全局安装

npm install create-react-app -g

💡 如果是Mac的话要加上sudo

安装使用

create-react-app 项目名字

❌ 注意:项目名称不能包含大写字母。如果是Mac的话要加上sudo

写在最后

如果大家喜欢的话可以收藏本专栏，之后会慢慢更新，然后大家觉得不错可以点个赞或收藏一下 🌟。