17_尚硅谷_react脚手架应用分析.avi原创

好，那下一步呢，我们就是把这个项目给它打开，我们也看一看呗，对吧，看一看怎么行呢，看下C。欧。走，你。不动了。不动，我们就在这里看，因为我们就在这附近，是这个吧。好，走。大家看一下，其实这结构并不复杂是不是啊，看一下上面这一个应该能看懂，是不是所有我当前项目依赖的包啊，依赖的包啊，这一个是不是刚才我他的脚手架自动帮下载的吧？啊OK，而且看一下这个脚手架帮我们下载了哪些包。啊，一共有三个包。一共有三个包啊，这两个概念应该要读。一个叫depends，一个叫DV depends区别在哪里？

啊，一个叫开发式依赖，一个叫什么呢？运行式依赖。那开发式依赖是什么意思呢？是编译打包的时候才需要运行的时候，不需要所说的开发的时候，就是编译打包的时候。那么懂，他是我们编译打包的一个工具包。来看一下啊，我们运行时遇到两个包，一个是react，一个什么react动。基本上也是最新的版本，16年级的版本。而这个里面啊，这个里面其实这个包非常的复杂啊，包含的包也很多，大家知道啊，一个包可能包含其他的包。能不懂啊，是怎么看的，大家看一下啊，这个里面你看我下载很多。有人说老师不对呀，你这你这不就说只要下载三个包吗，123这个数还是会数的呀。

对不对，那为什么有这么多包呢？大家要知道他在去n PM in store的时候，其实我们也可以通过n PM store是不是去下载包啊，那除了下载这个包本身来看一下，我们找一下它，找到它。React gun script。它这个是按字母顺序去排的，所以呢，我们应该可以找得到啊。而且你能看得出来啊，你在这个里面声明的包颜色都不一样。而其他的包是什么包呢？是我当前这个包依赖的包。就当你下载一个包的时候，难道就是下载这个包本身吗？不是他依赖一个包，可以依赖于其他包吧？我们怎么看出来他依赖谁了？打开他的派权，这就是个工程了。

说白了，这也是个项目。懂不懂，好把它打开。什么意思？是不是他依赖这么多？那有这些要不要下？要。甚至有可能。举个例子，他这个包。有可能什么依赖其他的，那其他要不要下药。说白了，就是将我直接依赖和间接依赖的所有包都要下载下来。能不懂？嗯，OK，这个应该要能懂啊行。好，后面呢，而且你能看得出来啊，你看着。大家看的一个是当我去执行这个命令的时候找的谁？找了这样一个命令，那这个命令找的谁呀？

你，你拍着大腿，你都应该想得出来。找谁？找他呀。看到了吧，找他说白了啊，这个脚手架将它所有啊编译打包的一些功能吧，都封装到这个包里面。听懂不这样的话，你看起来舒服一点，就是你现在在外围看好像没什么东西是吧。真的很看起来很简单的。没有几个东西。就是因为他已经做了很好的封装。你看到配置了吗？我告诉你这个里面配置都没看见。你我们说过了，这里面是不是用的外派了，外派是不是需要一个配置。He了。准备看到WiFi配角。都被他什么了？封装起来了。那刚才其实我们也打开看了一下，最好是看一下。

看到了。能不能看到。啊，这个通过这个名字你能看出来，肯定是外派相关的配置吧，那必然有，没有的话怎么用上外派了。啊。这就脚手架的好处啊，让你很舒服。好来，我们再往里面来看一下其他的这个。这个有一个他。有个页面啊，我们做的下面呢啊，后面会说一个东西叫SPA。叫什么？SPA吧，对吧，SPA是啥呀。嗯。但是啊，这是我们程序员里面的是吧，嗯嗯，这个呢，实际上是什么呢？这个S是single的意思，Single single什么意思啊，单一的P是。

翻页呢？是pap什么P？是什么应用application？陈轩，都是单身狗吗？不是啊，你是单身狗，不能说别人是单身狗啊，别人活的好幸福啊。别人可能说我也不是，是吧。好。后面我们会去专门去讲啊，什么样是单用，就是简单来说就是只有一个真正的页面。啊，我们就我们这个当前这个应用就是只有这一个页面。其实这个页面它非常非常简单，就是只有一个div。别看别的，别的都是一些辅助性的。

也就是说它内容开始的时候就一个div，空div。那怎么显示这个效果呢？靠谁来显示出来？靠我们RA的主件呢，对吧，靠主件来整出来，那后面呢，它里面src里面一些东西啊，这个都不用看啊。SC里面看起来挺复杂的对吧？啊，里面东西很多，但有些东西呢，都可以实际上干掉都没问题啊。大家知道一个外派应用必须要有一个什么GS路口，GS。能不能路口GS，其实入口GS名字叫什么？是配置配的。看到吧，啊，可有两种名称比较常见，一个叫index JS，一个叫main.gs比较常见。啊，Main是主要的嘛，啊OK。这里面它的入口配置成了index。其实有的代码我们来看下，就有的代码是完全可以删掉啊，这这些代码没啥用，把这个干掉啊，影响视线。

这代码大家能看懂。说实话，这个。引入水啊，引入react，诶现在写法就慢慢就是啊模块化啊，工程化的写法。啊，不再像我们在页面上引入一些G。引渡谁？最终我们要干嘛？渲染，渲染谁？APP组件渲染到哪里去？The root为什么要写root？看谁看这个页面的div。说白了，我这个标签最终差哪去？插在这个div里面了，对吧，但是肯定显示也不是这个这个标签。它是组件标签，组件标签本身是不显示在页面上去的。得看什么剧？

看它这个组件render返回的是什么。对吗？对的，而且他引入了什么。CSS。能看到吧，最终我的样式是不是就会进行打包啊，哎，我引入样式的时候，我要像他这样去引入啊。需要像这么引怒吗？就是什么什么什么。不需要啊，引入样式只需要说明一下你引入哪个样式的路径就行。懂吗？最后就会将这个样子打包，这个东西大家应该是整过的啊。美女吧，啊，OK，好。下面啊，我们继续的往下看看这个APP呗。对吧，这个AP引入了谁。引怒了。Component component是哪个里面的？可以这么写吧。

这什么意思啊？这不结构吗？是不是从里面取出那个component呢？能看到不也就说我要不这么写，我该怎么写。我应该怎么写，我应该这么写。是不是真的不，我就不想洗啊？那我该怎么办？最大括号啊。当然你也可以把这个写成两条语句，可不可以，可以，那写成一条语句不爽一些吗？啊，最终render是不是渲染返回一个结构啊，啊有一个div，有个hand hand里面有image和什么一有一个什么P标签啊，里面有内容，诶看到这里面。所有的都是什么class？能看懂不啊能看到好了，下面再看一些其他的啊，其他的这个是什么。

进行get版本控制的是不是忽略配置啊，这个忽略配置里面有几个重要的，来看一下这个。哪个要忽略，依赖模块要忽略，这个文件夹肯定忽略。这个文件要我告诉你，那所以你的那个管理那就特特别慢了。因为这个文件夹特别大。有有必要吗？这个说白了，他有没有必要管你没有。那我没他，有时候没他你运行不起来呀，没有我可以下，对呀，很好，就是可以下。对吧，说白了没他我到时候肯定可以有的，对不对，嗯，好。下面这个我要后面再跟大家说啊。呃，这个里面应该缺一些东西啊，缺一些东西，譬如说缺一个点idea。对不对，因为如果我不改的话，到时候版本控制idea也会管理上。

那样是不太好的吧，所以我写个斜杠是吗？能看到吧，啊，这个项目到时候要版本控制了啊。好。下面啊，潘杰这个很好说是吧。Package是谁？Package是什么意思？包？谁是包啊？包子的水，这样你要知道拍啊包的一个节省文件。所以。就是当前这个应用。有一个应用就是一个包，也就是说我们这里面下载的每一个都是包，对不对，依赖包，依赖包不是每一个都是包吗。那每一个包包到底是什么东西呢？就是一个应用。能不能？怎么一个文件夹？怎么样才称之为应用？

一个文件夹怎么样才能成为一个应用，成为一个包？这个你应该要知道。非常简单，它有一个专门的信息文件，探险精神。包的一个描述文件。那你就要知道包是谁啊？你连包是谁都不知道，你整了半天，那怎么行呢？说白了就是你在看，你看得懂这里面东西有啥用啊。你都不知道描述谁的。啊，我们这个简介就是用来去描述我当前项目相关信息的一个文件。大家知道一个有哪些重要的方面吗？啊OK，首先是我当前这个包的标识，我我不会去说有什么样的属性名的。孩子的一个思想，我开始是不会记这些东西。

我需要知道有哪些方面，哪个方面涉及了一些具体的东西。嗯，首先我刚才说过了，我们的派是描述我当前项目的，你首先我这个项目是不是要有个标识，标识用来干嘛呢？是用来别人来引用我的。能不能我们引用一些包的时候，譬如说我引用这个包是不是要指定一些东西啊，啊标首先是我当前应用的标识，既然是我当前应用的依赖。就是我依赖其他的什么包对吧，第三个我当前这个应用如何运行打包。或者叫打包运行。等等相关的一些对我应用的操作的命令三个方面。这三个方面呢，首先看第一个标识，标识涉及到两个配置。一个是一个是wash。Name就是我的名称，我是我的什么版本号？

你想想看，你再去下载某一个应用的时候，是不是有去某一个版本。不同的版本，那个应用内容一样吗？不一样，所以说我的标识。说白了，我name以后会变吗？Name变不变不变，但是变不变变，随着我应用的升级，我的version是不是有可能变了。啊，但name是不变的。没问题吧，没问题，下面依赖，依赖也有两种，依赖也说有两个配置。一个叫dependc，一个叫什么dependc。一个是运行时依赖，一类是什么？开发是依赖，所谓的开发时依赖就是编译打包的时候需要。啊OK，再一个就是我的运行的一些打包运行的一些命令。啊，这个专门配在一个里面，Script script大家知道是什么。脚本。

啊，这些命令都通过谁来运行？N PM run来运行。N让运行吗？能不懂啊？所以你应该像这么去。是吧？比如说首先你第一步是知道这个派尼是一个什么东西，就它是什么。对吧，它是我们当前应用的一个描述文件，那也就是说这个pack指的谁当前应用。对吧，下面再说它里面该写什么呢？我们说有几个方面，三个方面。其他的都是次要的，你先把这三个最重要的给它记住了啊，我的标识，我的依赖。我运行该做的一些命令对不对。下面再说啊，标识涉及到哪些属性，依赖涉及到哪个属性，运行涉及到哪些。

你应该是这么去记。也就是说，说白了，你按照这个流程去做，你对这个知识才是理解透彻了，不然的话你啊就去看哦，我知道我大概知道那里面好像有个那那里面好像有个depend，连他是这个判描述出的是什么都不知道。那其实很悲哀的。OK。好，后面呢，大家知道啊。每个项目，其实除了这个，一般还会有一个文件叫read med文件。Read me MD，你看着名字，你说觉得它是个什么文件呢？就是对应用了一个什么说明文件，Read密码叫什么。赌我什么叫读物啊，就是你想看这个项目，你先读读我。扔了吧，啊OK，这里面呢，就有一些啊，这是他帮我们生成的这个东西不要啊，后面我们可以写一些，我们譬如说我们在去做这个过程中总结了一些知识点是吧，那我们就可以写在这上面可以吧。

啊，可以OK。就应用的说明文件。这是个mark文件啊。啊，大家知道我一旦提交到get上面去，一旦交到get up上面去，大家看一下我的那个应用啊。这个read me就会显示出来。这不是我们前面讲的吗？打开它。大看呢，你看。我就有一个read me。你们应该没有，今天早上我提交了。这个密会自动的就是一上来就是我整个当前仓库项目的首页就会显示，而且以页面的网页的形式显示。看了吧，他为什么是个markdown，就是markdown是很轻松的，能转换成网页。

啊，看起来比较舒服，而且你去看别人的项目，基本上都会有read文件。而且你没有这个，它会提示你希望你加一个文件。这前面跟大家演示过的，能看到吧，啊OK。那整个这个样是，嗯，这个样点look是他。其实自动下载的是通过样本来下载的，会有这样一个文件，你不用管它啊，这个东西它自动生成。整个项目的结构应该清楚了吧？