18_尚硅谷_使用react脚手架创建应用.avi原创

那我们。就开始继续往下学啊，我们看一下。来下一个我们要看的就是我们现在要开始真正的用去做应用，做项目，先做一些小的啊。嗯，真正去做项目的时候呢，就涉及到一个问题，嗯，就是他的真正的项目呢，需要有一个非常比较大的一个环境，就写一些配置有很多依赖。那这种事情呢，其实是通用的。既然是通用的，那就应该有专门的人，有专门的工具来帮我们去做。这种工具我们叫它什么呢？叫脚手架。知道脚手架是什么啊，OK，他应该是有点像那个做工程的时候啊，大家修房子的时候是不是先先搭一个在房子要修起来先搭个架子，知道吗？就那样的话才好便于修房子吧，啊它的这个脚手架啊，实际上是一个库，这个库呢能帮我们去创建一个空的项目。

但是空的项目啊，这个空不是指的他什么都没有。而是指的是没有什么我们写的代码，那整个项目的结构。已经搭好了配置所有都写好了啊，甚至依赖都把你下载好了。那你后面要做的事情是什么？写代码呀，对吧，写组件呢。嗯，OK什么的，环境都好了。啊，来看一下，有专门这样一个空有这样一个工具，它实际上也是个包啊，也是个应用，我们来看一下，去get up上面找一找。

来搜一下。这个你能看得出来，应该是Facebook官方的一个库。能看到吧，OK，但这个库不一样，这个库跟我们平常说的库不一样啊，平常我们P的时候，我们是不是也是个库啊，啊，这个户是我们引用引入到项目里面，是不是实现我们项目功能的，但这个户呢。不是他是帮我们去啊，生成一个啊模板项目啊，生成一个模板项目来。那怎么用呢？这个地方应该会教你怎么用吧。那其实这样的写法呢，这写法比较怪啊，不用他用他的写法来，我们来去用我的。首先要对它有一个理解啊，这个脚手架啊，我们除了react有脚手架，我们后面不要学，另外一个库叫view吗？它也有脚手架。

啊，一样的，是用这个脚手架吗？不是，你看这名字，这个脚手架专门用来干嘛的下的啊，看的名字你都很清楚啊。而创建出来的那个项目呢？啊，实际上那项目怎么创建出来的，就是网上有那个项目的代码，你执行用这个工具可以去把它什么下载下来，那你创建和我创建的结果是什么。一样的，为什么？因为我们俩下的同一个项目，那当然一样了。能懂吧，这个项目里面所有的依赖配置都搞好了。啊。呃，这个地方，而且那个项目呢，会实现一个简单的效果，非常非常简单的效果，我们到时候可以来看一看啊，而且这个项目它已经有了一个整体的技术架构。

React。WiFi。打包嘛是吧，ES6模块化的语法。EST，诶，这个是什么呢？这个是一个代码规范的检查工具。啊，代码规范有什么问题，你的检查你的语法到底好还是不好啊，规不规范啊。真正的一个项目肯定是需要的。而且你的项目的特点有这么三个特点。模块化是必要的吧，组件化也是必要的，多出来一个化叫什么工程化？什么叫工程化的项目呢？很简单，就是你通过一个命令就可以对项目进行打包编译。啊，OK，进行运行。就输入一个命令NPM命令就能搞定啊，其他所有的事情他都帮你做好了，你只要发个命令出去，那他就帮你做。啊，为什么要这么做？

就这样效率高啊，你的事情，你重点的事情是干什么？是不是实现功能代码。你的目标是其他所有事情。由他来帮你干。这就是用脚手架的好处啊。来吧，首先第一步要去全局的去下载这一个什么。这个包实际上也是个包啊。能看到这个命令吗？啊，后面点击下载。啊，全局下载有什么特点。就是全局上，首先得说这个全局是什么概念，就是所有的应用都能看得见。对吧，它还有一个特点，既然说以为我需要反复下载吗？不需要，那我怎么知道我全集有没有下载过了。对吧，啊OK，来这里有个命令叫n PM root-G，就看一下全局的下载跟目录在哪里。

走吧。哎，在这里啊，不同的人呢，可能不太一样，有的人可能还改过。我再打开一个给我看一下啊。我有下载吗。有没有有啊，OK。打开这个外围啊，这个说一下啊，这个说一下啊，有的呢，大家看到我们是不是以前也下这个wipa呀，啊下这个wipa呃，看我的这一个。嗯，这个里面还有一些别的说明，我还下载过什么。1212，你学过吗？有没有学过是吧？啊后面跟大家说一说啊，它也是跟NPM差不多的一个包管理工具，就能帮我们去下载啊一些包的。

好，下载完了以后啊，刚才我已经下载了啊，下载完了以后下一步。就执行这一个命令。执行这个命令，哎，这一个命令大家想想看。啊，我看先行不行啊，看有没有。先试一下。来。嗯。呃，我我不在这等啊，不在这再换一个位置。换一个位置啊，这个位置不太好来进入我们的这里来。这是我们的文件夹，进入我们的workspace，进入。好，我在这个里面CMD。我准备在这里生成一个项目，能懂不好用一下，我刚才那个命令啊，叫create。React。

这个不能随便瞎写，固定的其实就是跟那个项目，跟我刚才全局下的那个包的名字一模一样。后面指定什么，后面指定你要生成那个项目的名称。听到不？呃，我叫一个什么名字呢？呃，我就叫react AP吧，好吧。行吧，就是一个应用嘛。啊，这个名字可以随便写来，看到走你。走你看它首先它一上来是不是生成一个文件夹，大家知道他现在干嘛去吗？啊下载那个对应的应用，以及它依赖的什么呢模块。啊，现在是不是先生成了一个什么PA连接啊，我们可以把这个pack连接上打开看一看，现在还什么都没有，它现在正在正在去下载了，其实被下载的这个东西看慢慢他是不是要下载了，其实在网上就有，他已经定义好了，说白了有他觉得这个事情吧，做起来特别费劲。

那他是不是帮你做了？他把你做了以后，他是不是挂到网上，挂到网上以后呢，你不是直接去网上下载，而是通过一个专门的工具来下载。呃，这个工具我们称它，为什么呢？脚手架是一个概念而已。啊，现在呢，就在下载。OK。啊，这个要点时间啊，要点时间等他下载功能，我们继续往下看啊，继续往下看。那下载完了以后啊，下载完了以后，我们这一句话是干嘛进入这个项目，接着呢，N PM start的启动，这个n PM start，它的完整命令应该怎么说start。这个start的这个run可以什么省略，再问一个事情，N PM run start，它去看谁，为什么我为什么不n p run叉叉叉呀，啊对啊，这个非常关键，你要不知道就很危险啊，就是看这一个拍点里面配置的命令。

对吗？OK，在这里面是配置了好几个命令啊，其中就有一个什么大的命令。这个start是用来去编译并启动我们的项目的，这个里面呢，先不管它啊，后面还有一个命令，我们后面会用到叫build build什么意思？构建啊，构建，说白了其实就是生成打包文件。就打包这个概念应该懂吧。就他不是学构建工具吗，说吧。学过吗？怎么这么？没没底气干嘛呀？哎。

好。好了吗？诶好了是吧，你看后面都提示的是什么命令呢命令。看到了吗？其实通过这个提示你能感觉出来啊亚，我们后面就跟大家讲啊，啊很简单一个事情，让跟我们NPM是不是很类似的啊，但是它的命令呢，更加简洁一点，而且它的工具呢，下载东西会更快一点点啊，后面再跟大家说啊，先用上NPM再说啊。下一步。激怒吧，啊，激怒他。接着了NPM。他会去对我们的项目啊进行编译打包，但是这个编译打包是在内存中进行的。最后还启动了一个浏览器啊，很爽的，诶，这就是他。实现的最最基本的一个效果。

这已经是主件化编程了，我们来看一下，看看是不是。怎么看呢？对吗？也就是说你看它这外围是个什么组件APP，看看里面还有别的组件吗？好像没了，全部都是一些我们基本的一些标签是吧，是不是，是不是就用一个APP组件来写的。能看到吧，啊来。