上节课我们对react的前面的基础知识做了一些简单的回顾。这节课开始我们来进入react脚手架的学习。
为什么要用脚手架
今天开始我们就要使用脚手架来写代码了，但是为什么呢？我们之前一直在html中写代码，通过babel来把jsx转为原生js不是挺好的嘛。
不知道大家还记不记得，我们之前这种方法控制台一直给我们一个警告说生产环境不能这么写。那么我们写代码的目的是什么啊？是不是就是为了放到生产环境啊？那么我们肯定就不能这样了啊?
另外还有一点，就是如果代码量实在太多，我们总不能一个html文件全写出来啊，就算你一个html写出来了，但是babel库在做语法转换的时在效率上也会很慢的，这样的话用户体验也是很差的。所以说这里我们就要开始用到脚手架了。
什么是脚手架
那么我们都说了为什么要用脚手架了，那么什么是脚手架呢？
- 帮助开发者快速创建基于某个模板的项目的工具
- 包含了所有需要的配置
- 下载好了相关的依赖
- 可以直接运行一个简单的效果
react提供了一个用于创建react项目的脚手架库create-react-app- 项目的整体技术架构为
react + webpack + es6 + eslint - 使用脚手架开发的特点:模块化，组件化，工程化
安装脚手架
那么好，我们了解了为什么要使用脚手架以及什么是脚手架之后，我们怎么用？首先第一步是不是要安装我们的脚手架？那么好，通常我们安装一个库我们都会借助nodejs提供的npm命令，安装这个库也是一样，我们通过npm install -g create-react-app来在全局环境下来安装我们的react的脚手架库。
创建项目并启动
我们已经安装好了我们的脚手架库，那么我们想要用脚手架来编写代码那么肯定得用脚手架来创建项目啊。然后再编写代码，最后启动项目看我们的效果。那么怎么创建和启动呢？
- 打开我们的命令工具，你想在哪创建项目就进入到那个目录里
- 然后执行我们的命令
create-react-app hello-react，这个命令不难理解，就是我们的脚手架名称后面跟上项目名称。 - 进入到项目文件夹
cd hello-react - 启动项目
npm start
完成以上步骤就可以在网页中看见我们的项目的示例页面了。
其实在创建项目的过程中还是比较漫长的，当我们看见命令行里面出现了像下图所示的提示信息就说明我们的项目创建完成了。
我们来看一下这里面的信息都是什么把
首先跟我们说创建成功了，然后后面跟我们说了觉得我们可能接下来要执行这些命令，那这些命令都是什么意思呢？
npm start这个是启动我们的测试服务器，因为我们在写代码过程中要看页面效果，那么这个命令就可以为我们启动一个测试服务来供我们看页面效果npm run build这个是我们所谓的打包就是把我们的整个项目进行打包，打包出来的结果才是能够放在生产环境中的文件。npm test这个是做测试的，我们几乎用不到，我很少用这个方法来测试页面npm eject我们之前说了这个脚手架里面是有webpack的，但是呢是隐藏起来的，因为官方怕我们不小心把webpack中的配置改错了导致环境崩溃。但是这个命令执行之后就会使得相关的webpack文件都展示出来。
最后又给了我们一个提示信息，说的是什么呢？官方看我们项目创建完成了，觉得我们可能要启动项目看一下是什么样子，所以就给我两条命令说，先进入项目文件夹，然后执行npm start来启动项目。那么我们试一下看看吧：
当我们执行完命令之后，自动为我们打开了浏览器访问了localhost:3000我们看见了官方的示例页面，其余的什么都没有，就是一个logo。
以上就是本节课的内容，带大家来认识一下react的脚手架
总结
- 使用
npm全局安装create-react-app库 - 在命令行中使用
create-react-app命令来创建脚手架项目 - 创建完成项目之后可以通过
npm start来启动项目
Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.
Link of this article：https://work.lynchow.com/article/init_scaffold_of_react/
