20_尚硅谷_练习1_评论管理_拆分组件与实现静态组件.avi原创

好，刚才有一个是需要注意一下啊，大家第一次打开这一个项目的时候呢，应该有可能会报一些错误，就是有一些红色的波浪线。是因为这个one storm呢，它不识别JSX语法。这个该怎么办呢？告诉他一下。在设置啊语言。啊，以前我们不配置过ES6吗？对吧，但ES6不够。啊，因为现在我们用的是什么。是不是GSX等于八，这个它要识别。你要选择这个点击应用就可以了。知道了就会好啊。大家要注意好了，那下面呢，我们要去做一个效果。啊，做一个评论管理的一个小DEMO，我们来看一下这个DEMO呢，啊是这样一个结构，这个结构其实并不难啊，左侧是一个表单，可以添加。

啊，点击提交就可以添加到右侧的最上面。啊，右边呢，可以删除啊，点击删除就可以删除指定的某一个。啊，最后一个上完之后呢，就会出现一个没有评论的提示。功能应该看懂吧。嗯。而且呢，这里面静态页面我也给大家。哎，这里面有一个comment page。哎，我把这个静态页面，这个静态页面包含页面也包含样式啊，我把整个文件夹。暂时放在这里吧，放在这里，放在这啊。之所以发生之后，并不是说我这个项目需要，而是说我有一个参照啊，我要做什么效果打开它。嗯。但这一个页面它有交互吗？

没有说了，是个静态页面。那下面呢，我们就要去根据这一个静态页面呢，做一个动态的组件化的效果。来吧，开工做啊。开工之后啊，那我们还是要想我们第一步做什么，拆分组件是吧？拆分组件，拆分组件实际上就是我们需要去啊来因为第一次做，所以我还是跟大家先截个图画一画啊。就在这把这样一个，嗯，好点一下复制。把这个放大一点。嗯，就这样吧，好。这是不是有点太大了？嗯，差不多好，那怎么拆呢？啊，我用框的形式来代表对它的一个拆解那一个啊，一个应用肯定至少最外围先要有一个组件。

能懂不？最外围先要有一个，又有一个组件，就是必然的来换一个大小啊，小一点再换一个颜色。嗯，差不多。这是对外围，我们把称号为什么，是不是APP组件固定的。那接着怎么猜呀？这个头部要不要拆起来？他是个屎啊，拆它干嘛？这要有一条，说白了数据要动态展现，有条交互的是不是才有可能拆啊，下面这个道可以拆啊。是不是左右两个部分。来。左边。是一个是吧，哎，右边是一个。

能看到吧。甚至于啊，你这个里面不是个列表吗。列表可以拆成多个item。但是这两个item应该是同一个组件写的吧？因为它的结构是一样的嘛。能看到吧。好，那给每一个区域啊，每一个组件都取个名字。这个叫它APP是吧，固定的。啊，写小写的吧，我们再都小写的啊好下面这一个。啊，这个我们是一个评论的一个。添加吧。是吧，啊，譬如叫评论啊，好跟大家说一下啊。

我在写文件名的时候，我们每一个组件都是一个组件文件名嘛，组件文件我都会用小写中间用。杠隔开，这是个习惯，说白了我会写这样一个这样一个文件。看懂吧，啊OK，还有这边。那你应该能知道我叫什么了，杠list减去SX。对吧，而这一个呢。是什么啊？对吧，其实这下面这个是不是一样的，是同一个组件嘛，只是写上来是不是两个标签，同一个组件写上两个标签啊，Command跟item点击SS都是这个同一个组件，看懂吗。好，而且大家知道一个组件，它除了这个文件，它是不是也有可能包含一个样式。听懂吧，样式是不是属于我组建的一个组成部分？

能懂吗？所以我再去创建组件的时候，我不是直接在框下面创建这个文件，而是创建一个组件文件夹。认了吧，这个文件夹下面有JSX。有什么CSS？因为这个GSX相当于包含了GS和HTM了。对不对。是这意思吧，因为我们的GSX里面包含了标签吗？那我们的页面上要素不都会包含了吗？当然如果有图片的话，是不是也可以包含图片，那我这里有图片吗？没有。嗯。能看到吧，好，那我们现在就是把这整个相当于把整个项目结构来创建出来。

这一个怎么办呢，是吧，看到我。我这样。啊，给它备份一下啊，给它做一个备份，你这个也别丢掉了啊，怎么样备份呢？可以改一个名字，但改名吧，得先看看它，把它停一下。你们听一下啊，来改个名。啊，写个B吧。嗯嗯，这个估计是有文件，嗯。就有什么东西还在引用着这一个这一个文件，所以它它改不了啊，大家看到我这边改一个base。是吧，那怎么办呢？看到看下C看下V，不止一本写一个base啊，留着啊。好，下面这个里面啊，我们来去做我们的事情，把这一些啊，这两个都给了什么。

三呢，把这个括它里面的也先干了啊干。好了吧，好，我们说我们一共有几个组件看一下。几个？这看不见吗？天呐，怎么说的呀？四个组件吧，啊，四个组件啊。好，来看到我是这么做，在这个components里面。建一个文件夹。再去建一个什么呢。建个什么文件，ap.jsx样式文件到后面再建，需要的时候再建，因为有可能他没有自己的样式能懂吧，样式是可能有，也可能什么没有，不管有没有，我先搞个文件再说。好，还有什么？啊，还有什么文件夹，有什么文件夹，就看有什么样的主件呢，叫common杠。

什么ID？再改一下这个名字。能不能看到，其实我们这里面样式比较简单的，但我是将我这个简单的应用看待成一个比较难的应用来去做的啊好，后面还有一些别的common的什么。接着把这个里面的这个改一改。没了吧，好，还有一个。啊，爱上。I。OK。就是整个啊，组件的结构我都创建好了。

能不能看到啊。这里面这个给他干啊，这个样子给他干了，这个怎么做AP下面的AP，也就是说这个还需要动吗。不需要动了。我们需要动的就是这个里面的组件，一个一个写就行是吧，需要他们就行了。那希望他们是我们，相当于是我们第二步，我们第二步要干嘛来着。第一步，创建组件，拆分组件已经搞好了呀，啊定义什么静态组件。对吧，定义静态组件呢，实际上就是要去啊，针对我们的这个页面。啊，进行拆分是吧，进行拆分好，这里面呢，会引用到一个全局的一个boot的样式，那怎么办？这个倒是啊，因为它是个全局的，所以我直接在这里面建一个文件夹叫CSS。

我放的是临时放置啊，这个实际上是不需要的啊，把这个boot放在里面，接着我在哪去引入它呢？页面。真懂吧啊，我的页面引入是不是所有的位置都可以看得见？好，来引入一下。用的什么link啊，接着是我当前跟目录跟应用下面的什么呢？啊，CSS下面呢。是不，他。也就是说我这个public下面所有的资源，相当于就是我应用跟目录下面的一些可见的资源，能不能啊，OK，好，这个就不用再改了，关了。关了以后，下面我们继续看我们这个页面呢，里面的东西啊，先拆解这个标签结构啊。整个看一下，这是头部是吧，这是下面部分，下面部分又分为左边和什么。

右边能看到吧。好，看到我啊，我就将整个div。在这个div ctrl c拷到哪个组件里面去。这个你应该要知道哪个组件APP嘛。对吧。来写一个名字叫什么APP，考到这里来吗？对不对，好报错，报错的原因很有可能啊，有一些特别的，譬如说你的这个里面有没有结束标签。来回报错。能不能看到这里面必须要有结石标签？看是不是没问题啊，有还有一些特别的需要改的，我们一次性先改掉哪些class，改成class，但这个class要改吗？

不用看着我，我是把它看。把它改了，改成什么呢？Name等于。那么，Replace。能看到还有一个东西需要改的就是样式style。Style不能写成这个样子。Ah。必须写成什么呢？两个大括号。对吧，两个大括号这样不对。在不对。这个没问题，这个有问题。你这么写的，这不是个变量吗？能不能弄啊，现在是写GS代码，你要不写单引号就是这个变量，哪有这个变量的。

能不能看到啊，OK，先做好准备工作啊，做好准备工作，因为这里面就这里有个style，别的地方都没有。好。DOS完了吗？完了吗？大家想啊，我们刚刚说了我们要拆啊，我们要我们不能就是把所有东西都放在APP里面了。对不对，我们要想象这一个，这一个结构非常复杂，其实这个结构说实话现在很简单。对吧，但是我们还是要把下面的这两个部分。啊，OK，下面这两个部分是不是拆成两个组件里面去啊，拆两个组件这一个部分。大家看它这个。我们放到哪去看X啊，猜到我们的，这是左边的，猜到什么I里面。是吧，来走你啊叫的。

能看到吧，这是大写的啊，好，接着这里。揍你。能懂吧，啊下面一个。这个。一个意思吧，看见X放在什么里面。嗯嗯嗯，这个写错了。好，来写一个叫comment。整理是吧。好，但是我们这两个组件是不是要在这里面写成两个标签呢？好吧。是不是引入，首先引入左边的叫from。先是回退吧，接着是comment，下面的comment，哎。

类似的吧，还有一个的你。再给加missed。究啊，能让看到它的提示。这就说明你肯定写对了，只要能提示就说明肯定写对了，只要没有提示啊，十有八九是错的。好，真非常简单了，直接什么是不是写标签。是两个。看不懂，好，这个item现在还查不了，因为item是动态产生的，所以我暂时不拆item。因为我们现在做静态的效果。啊好，下面啊，页面拆完以后还要看样式。啊，样式我还没有做，没处理呢，是制定样式还没处理打开它。

这个样式呢，现在说一下啊，它整体上用到了布STEM的样式，自己写的样式其实并不多。你看这个样式，大家觉得是哪里的？II。那个列表他的。能懂不啊列表嘛，好，这这个里面说一下那个和那个里面没有自定义的样式，全部都是那个boot的样式。这里面制定样式都是谁的呢？跟大家说，暂时来说都是这个历史的。这个list，看到里面有一个样式，就是这个。是不是这样一个类名呢？那我们怎么做呢？看到在这一个文件夹，也就这个组件文件夹下面创建一个什么CSS，对取一个名字，那我这一次这么写啊。Common。C不用写了吧，只能生成把它全部搞过来展示的发卷，其实这一个这个部分下面这个部分都是谁的了，都是item的，但是item我现在抽了吗。

还没有抽，因为item得动态产生，得写GS代码动态产生数据才行啊，但是现在我还没做，所以我临时放在这里也必须，现在只是必须放在这。好，好了吗？样式一起做了吗？没有吧，没有你得在这个组件里面干嘛去，是不是引入啊，非常简单，Import点斜杠。这个吧。看完了，嗯，那好了，那这一部分就完了，这整个那也就说到此为止。我们的静态组件就实现完成。那实验完成下一步我们是不是要看看行不行啊对不对，一起怎么命令m PM start。

嗯。这开始的时候呢，他正在打包处理啊看。A吧，好，看一下那个打印输出有没有错误，没有A。