00:00
好了,各位,光说不练呢肯定不行,教了大家组件化的编码流程,那咱得用这流程跑一个案例啊是吧?接下来呢,我们做这么一个案例啊,同学叫组件的组合使用,我们要写这么一个案例,叫todo list,长什么样呢?别靠这文字去描述了,直接看这个动态图走着来,我先锁一下屏啊,页面上呢,有这么一个效果,展示了一堆呢,你要做的事儿啊,首先在这个区域呢,你可以输入你想做什么,输入完了之后啊,你按回车,然后就能确认了。啊,比如说我有打代码睡觉吃饭,你比如说我还想再加一个我要做的事叫逛街,那就在这个里面输入逛街,然后敲回车,然后呢,诶就能把这个东西加在这儿了,而且呢,后加的东西要在前方展示,比如说添加一个逛街之后啊,那个逛街应该展示到这个位置,OK,如果说前边这个打勾,这啥意思呢?如果你觉得睡觉这件事你已经做完了,那你就点一下把它打个勾就代表做完了啊,那下边呢,是一个底部的这么一个组件啊,这显示完成了多少个,为啥现在是零啊,因为上边一个勾都没打对吗?那全部的为什么是三呢?因为全部的真是三,那这个勾什么意思呀?
01:25
这个勾只要你一勾,那就是全都做完了,那这些人呢,也就自动诶都打上勾了,同学,我说一下,千万别觉得这个案例,哎呀老师so easy是吧,简直low到爆炸,不是的,你尽量自己呢,呃,多练一练这个案例,什么叫你能把这个案例练透了呢?就是你能一次性的写出来,而且不犯什么错误是吧?好,那我们看一下动态图的演示啊同学,哎,首先啊,输入一个你想做的事儿啊。好,这一上来啊,开始走,比如说test,然后呢,哎敲回车,你看这东西是不是就来了,而且注意啊,同学,你鼠标悬浮到睡觉这个事儿的时候啊,你注意。
02:07
他睡觉这一行呢,就高亮了,没发现和别人的颜色不一样吗?而且后边出现一个删除的按钮,对吧?不是说所有人后边都有删除按钮,是你鼠标悬浮到谁身上,谁谁那儿才有删除按钮,而且你点了删除按钮之后啊,它会弹出一个窗,问你确定删除吗?你点击确定,那然后呢,你发现这一条就没了啊,那来整体看一下交互,我先关掉重新开啊,要不那个GIF图呢,跟咱们的不太匹配,来走输入test敲回车走来了啊,然后这些人看有高亮显示,点击删除,睡觉确定吗?点击确定,嗯,睡觉没了,诶你看我把打代码和吃饭勾上了,已完成是不是就两个。啊,然后清除已完成什么意思呀,打代码吃饭我都完成了,那所以说是不是得把他们三个,哎,他们两个是不是得清掉啊,你一点清除他们就没了,来再看一遍走,哎悬浮谁谁有删除删除确定吗?确定睡觉没了。
03:09
勾打代码,勾吃饭,然后点清除已完成,OK,没了,哎,就这么一个案例,好同学觉不觉得这个案例呢?相对来说页面就会好看一点啊啊来吧,同学,你觉得这个案例我应该拆成几个组件呢?我先抢答一下啊,整体的那个组件叫APP好了,接下来你去思考吧,你觉得你要拆成几个组件呢?同学,不同的人进行组件拆分的时候肯定有不同的结果啊,我们不追求说,哎,一个统一的标准,说这个就能拆,这个就不能拆,不是的,你可以随意的去拆。但是初学者呀,有的时候就陷入两个极端,有的时候你太左了,就啥意思呢,老师,我觉得一个组件就挺好,不用拆别的了,就叫APP,你这就属于太左了。
04:04
还有一些同学呢,可能太右了,什么意思呢?老师,这删除按钮就是一个组件,我的妈呀,也不用这么细对吧?同学再次想想组件的定义,实现界面局部功能,所有代码和资源的集合,同学,这个东西它得是一个功能点吧,是吧?那所以说呢,我说说我的想法啊,首先呢,我把这上边的这一个作为一个组件。为什么把它做一个组件呢?同学,那你想它能完成一些固定的功能,是不是可以添加一个todo,是不添加一个要做的事儿,哎,所以说你给它起名字吧,你叫什么名字都行,你比如说老师我叫做ADDDD行不行,添加吗?这个组件能完成添加一个todo的,那所以说叫ADDDD也没毛病,或者说老师我叫hier行不行也可以啊,毕竟它是头部的嘛,啊那我叫什么呢?我就先叫hier吧,先叫hier,你觉得还有哪能拆呢?来说说我的设计啊,我想让这个粉色的区域啊,又是一个组件,因为你觉不觉得这个粉色的区域是专门展示一堆todo的呀,所以说我想让它叫这个名字,叫list,哎,List列表组件对不对?好,然后呢,你注意啊,同学,我还想拆的再细致一点。
05:26
啊,尽可能的带着大家多拆一些组件,但是吧,这组件您得拆的有意义,说老师我让他是一个组件啊,这玩意儿它又是一个组件,这就属于没意义的,你就拆的太细了,然后你注意看啊,我还想在例子里边进行一次更仔细的划分,大家注意观察,我切成橙色的画笔,我想让其中的某一项啊,又是一个组件,List不是列表吗?那你发没发现同学list这个列表里边每一个todo像长得都一样。都是展示自己的名字,前边有个打勾的地方,后边有个删除按钮,对吗?哎,所以说我不想写那么多,我想给它拆成一个组件,然后一复用就出来了,所以说这个组件我叫做item,对吧?List是列表,列表里的每一项是不是可以叫做item呀?OK,然后呢,同学观察下方,这其实就简单了,来,我换成这个什么呢?换一个颜色,换一个这个绿色吧,走,我让下边的这一块呢,它也是一个组件,那给它起个名字吧,我就叫做福特。
06:31
哎,福特底部的这一块啊,福特好同学,那我问一下,我不算APP的话,拆了几个组件呀,Hier list item,还有福。APP我们一直都不算啊,因为呢,你肯定得有一个外壳组件,对吗?好了,Hi list item foot,来吧,开始写,说老师这个效果难不成得我自己写吗?不是的,我们已经提前给大家写好了,这些静态的页面一点一点写,多耽误时间呀,毕竟我们现在在讲react,而不是讲HTML和C3那些东西。OK,好,关掉APP同学,你需要在component里边建立这么几个文件夹,Hier组件。
07:17
再建立一个list组件,再建立一个item组件,再建立一个F组件对吗?好嘞,那里边是不是都得写上东西啊同学,那先给它都折叠起来走,先从hier开始啊,或者从fer开始也行啊,来右键新建一个,说老师你是要。这种写法呢啊,Foot特点GS叉,还是说你用这种写法呢,就叫做index呢啊,那我就选择一个公司里边相对来说写的比较多的一个写法,就是用index,好,那接下来开始rcc把组件准备好,For里边可不能写东西,因为我还不知道写什么呢,对不对?好,那我把这堆代码呢,复制来到hier里边,新建index.js叉粘过来名字改一下her。
08:13
好,这儿呢,再新建一个index.gs叉啊,粘过来名字照样改叫做item,那这儿呢,又建新建一个index.gs叉,粘过来名字再改叫list,对吧?OK,同学,组件我都定义好了,但是都是空白的,里边还没写东西呢,对不对,好了,折叠起来啊,那这个呢,可以给它删掉啊,Vs code的生成的这么一个debug的这么一个啊,但是他不让你删,为什么呢?因为你这个项目正在启动,而且你Vs code还开着,你把Vs code关掉啊,其实不删也行,但是我就觉得它比较烦,嗯,来到这儿找到debug.logg来给它干掉啊,总是诶还不行吗?看一下那在浏览器里边好像还用着的呢,是吧,那关掉,那在这儿呢,来,我再删一下走,这回就让删了,然后Vs code的重新打开咱们的工程来,那如果说要靠你自己写呀,那你可是挺麻烦的了是吧?来咱说了,给大家准备好了,那个静态页面在哪呢?在这儿最小化。
09:13
React全家桶静态页面同学在这儿呢?To do下划线配置在这呢?一个样式文件,一个结构文件是吧,那我打开我这个白板,这个文本编译器啊,然后呢,我把这个todos啊放到这啊,这样看起来比较清晰,我不想把这些东西再掺和进Vs code里边去啊,Vs code里面我只写react相关的东西,OK,好走index.html。啊,就是用于实现呢,呃,刚才那个结构的,那这个CSS呢,就是加样式的,我们可以大概看一下啊,右键浏览器打开,哎,就是这么一个东西是吧,都给大家写好了啊那来吧,同学,诶组件化编码第一步是干什么来着,我们看一下是不是拆分组件呀,呃,拆完了,而且组件文件夹我都建立好了呢,那接下来呢,是不实现静态组件呀?啊来吧,那回到人家写好的这些结构当中,如老师明白,那就是全选完了复制,诶别这样,同学回到你的脚手架里边,Public index atml文档声明啊,还有这种hide标签啊,Title是不这都写好了呀,你没必要把这些东西全拿过来,那是不对的,你只要把里边真正的内容拿过来,所以说呢,怎么分析啊,同学,我知道这些结构啊,是我写的,所以说我心里边明白啊,哪块就是干嘛的,但是我不想。
10:46
绑架你啊,说来同学这会儿呢,就是这个,你记住咋就是那个了呀,对吧,你工作当中同学也有这种需求,就是一个老项目,就直接用最传统的方式写的,要改成react,那你就必须得有拆分结构和样式的能力,首先呢,你这么的啊,同学慢慢来看着啊,我这div折叠,同学所有东西是不是都没了,那也就意味着你刚才所看到的那个todo啊,那个案例所有的结构是不是都在这里呢?说老师那就把这个拿回来吧,不行,你注意观察它这个ID是不是叫root。
11:22
那你看一下你的这个里边是不是已经有了这个root了呀,所以说同学你觉得最外侧的这个root div我还需要拿过去吗?你可能说不需要了,但是你别激动,同学,万一人家写静态页面的时候,通过这个ID呀,给这里边儿一些东西设置样式了怎么办?对吧?所以说千万不要觉得,哎,老师我就直接不拿就行了,最好瞄一眼来搜索一下走查找是不是没有啊,也就是说没有用ID呢,去写那个样式,那咱就敢拿了。同学把root里边的div折叠,我是不是可以这么说,这一堆东西如果我都带走todos案例,整个那个结构我是不是就都粘过来了?那所以说复制回到代码当中,说老师接下来我是不是得琢磨一下往哪个里放,不用我教你一招啊同学,这样不要让你压力太大,你把components文件折叠起来,同学,是我定义了这么多组件,我问一下里边写东西了吗?没有,那我再问一下我用了吗?这组件我定义好了,我用了吗?没用,因为你的APP里边写的还是这呢,对不对?哎,所以说同学折叠起来,这个components,你先把那一堆结构都给它粘在APP里边,先不拆分组件,一堆东西都在APP里边,你一粘你就发现不对了,缩进是不是有问题,所以说调一下走走。
12:42
啊说老师,那就接下来拆吧,不行,同学记不记得GS叉和最原始的HTML有区别,Class,也就是说你指定样式的类名的时候不能用class,用谁来着,Class name,还有就是style不能写这种字符串的形式,得写双画括号的形式,对不对?所以说来吧,同学你看这,哎呀,是不是都得改呀?啊,CTRLCCTRLF批量替换。
13:10
然后打开这个箭头,然后把所有的class都替换成class name,但你这么一替换不要紧,它是不是也被改变了呀?哎,不能改它,那所以说怎么办呀,把那等号带着,哎,Class等于全都换成class name等于啊,来这呢,就是全部替换,如果你觉得不托底,你可以一个一个进行替换,OK,咱们匹配的挺精准的,Class等于是吧,所以说在这儿批量替换,OK,换完了,那接下来呢,查找一下这个结构里面存不存在style,哎呀,很不好存在,那咋办?你的display none不能写成字符串,得写成双花括号的形式,对吗?这么写对不对啊,我就直接放在这不对不对,这个none呢,要加引号,你不加引号,人家不就是处罚查找none那个变量了吗?对不对,哎,那这有display none呢?那这是不是也有啊?
14:03
诶好了,那说老师那还有什么别的需要改的吗?目前来看啊,没啥别的要改的了,说老师标签没有闭合呢,兄弟你放心,标签如果没闭合直接飘红,比如说这儿标签没闭合看直接飘红了啊所以说诶标签是都没问题的闭合了,哎同学,那你说要这样的话,我是不是把整个结构全都搬过来了呀?啊都作为APP里的结构了,我还没拆分组件,那我们运行一下看效果呗,啊能不能出现诶那么好看的效果呢?看一下,等着它启动,稍等。哎呀,你不能说没出来是吧,哎,这效果出来了,来控制台也打开,同学,样式是不是没了呀?老师样式怎么就丢了呢?嘿,我问一下你引入这个index.css了吗?是吧,没有,哎,那所以说非常简单,全选复制,同学,我问一下这个样式里边那可有很多样式,就有你刚才所拆分的。
15:02
Footer的样式,Hier的样式,Item的样式,List的样式是不是都在这里呢?说老师,那我接下来是不是也得马上就拆分样式啊,我劝你也别这样做,咱怎么做呢?右键新建一个app.cssok,叫app.css你把你所有的样式都粘在这个里面来,然后关掉,也就是说结构先不拆一堆全写在这,样式也不拆一堆全写在这儿,你确保功能能正常的展示了,哎,然后呢,你再开始拆,那所以说别忘了这一步你是不是得引入那个样式啊,当前路径下的啊,然后是这个app.css对吧,它刚才没提示,那就自己补一下呗,好了,那这个时候呢,回到页面,你再看效果,哎,同学,怎么样?刷新一下看,哎,是吧,结构也对,样式也对,那接下来呢,同学你再去琢磨,哎,把这个结构拆一拆,把样式拆一拆,好不,先拆结构,我们再拆样式,同学整体一折叠,哎呀,东西都没了,那就再给分析这结构,同学其实分析这的时候就看你之前的功底够不够了,如果你之前啊,在练这个页面布局的时候,你HTML和CSS你敲的少,你组件化编码的时候也是吃力的,对吧,基本功得有好了,那我们折叠啊,同学这一折叠呢,没了,那所以说再折叠呗,这一折叠哎哟,好像也都没了,那这里边好像又是一个容器,而且你观察一下它的类名叫todo rapper啥意思呢?Todo这个案例的包裹容器,那你就不能折叠这个了,说老师要不行就把它作为hier吧。
16:38
那行,那我问你中间的list呢,那那foot呢,那不都没了吗?哎,所以说不要折叠它看着啊,这todo header是吧,哎,那个头部,所以说这一折叠这是谁呀,头部,你再往下这一折叠u Li Li,那就是列表,你这一折叠其实就是底部的foot特,也就是说同学看这就是头部,这就是list,这个呢就是foot。
17:04
啊,我知道有些同学说,老师,那你看你写的,你折吧折吧你就知道了是吧,那要不是我写的呢?哎,那所以说啊同学如果说真的是老项目往react上改,其实拆样式和拆结构真是一个费事的工作啊,来吧,那打开这这一堆东西都得带走。你是带走了咋的?这就不写了呀啊,我问一下这就啥也不了呀,不行,这得替成一个组件叫hier组件对吗?你说用就用啊,是不是得引入啊?哎,好了,同学,引入包的时候呢,有原则,第三方的包往上靠,自己的包呢往下靠啊,或者说模块,第三方的模块就那种成型的react往上靠,你自己的往下靠,样式一般放到最后啊,那所以说我得这么写import引入hier吧,From,那当前路径下的component下的hier还用再写了吗?Index可以省略,所以说hier引进来了吧,换成这个了吧,那赶紧的把你刚才那结构粘给谁hier,那hier里边就别写这些东西了,把这个粘过来缩进调一调是不是可以了?
18:13
I关掉,不出意外的话,跟刚才应该是一样的,别继续往下拆,看一下对不对,OK hier没问题,说老师,那我要把hier删掉呢,那你试试呗,你保存走,你看头部是不是没了,而且你看有个警告,他说你的hier啊,这个东西定义了,但是你没有使用,你看这就是脚手架的检查工作,对不对?哎,来,那回来hier啊,得用同学来吧,那你说u Li Li里边肯定是todo的列表,那这是一个todo,这是一个todo,所以说你需要做的把这个带走,那这取而代之的就是list,那你这就得引入list,对吧,在这呢,List好了,回到list当中,走到这儿,把东西呢,给它带过来,缩进呢,简单调一调,往前保存,回头看对不对,也是可以的,那最后一步是不是得把那个福特给他带过去啊,那也就是说从这儿到这儿。
19:10
第二得瞄好了,从这到这是谁呢?Foot特好,诶F呢是大写的,那就得要求你引入福特,那这就得引入福特,你就得把结构交给。Foot缩紧调一调,好保存,回头调效果,哎,是不是也是对的呀?那么别忘了,同学有一个人你还没有给他拎出来呢,就是item对吧?List里边的每一项都是item,那你觉不觉得这是一个todo?这是一个todo啊,所以说我们不要一遍一遍的自己写这么多次,这个不要了,我只要这一个,这一个结构就是一个todo,所以说在这呢,我得换成item对吧,那就需要你啊引入item对吧?Item又是list的一个子组件,哎,当前目录下的不行了吧,得翻出去点点杠,然后是哪个item下的,那就不用再写了。哎,好了,保存,那回头来瞧,嗯,说老师东西咋没有呢?你还没给item里边粘的呀,对吧?这一堆粘过来往前动一下保存,回头再看效果,老师,它怎么是一个呢?那是因为你例子里边就写了一个item组件呀,如果你写2345保存,那你回头来瞧是吧?哎,出来了,那这只是代表你把结构拆完了,对吧?那接下来拆啥呀?样式同学,我说一下样式。
20:46
好不好拆?结构这东西吧,咱得说慢慢分析,谁都能看得懂对吧?无非就是那些几种布局方案,但是样式这东西我可跟大家讲,就不像你想的那么简单,如果这个人样式写的一点注释都没有,而且东一头西一头的,你比如说前十行是hier的,居然后两行也是hier,这样式你就拆起来特别恶心啊,那我这儿呢,给大家写的相对来说规整一点啊,同学你看啊,这个base是什么意思呢贝?
21:14
Base是什么意思呀?就是谁都用的一些通用性的东西啊,然后你再往下,再往下再往下,哎,这hier hier什么意思呢?Hier hier就是头部的那一堆样式,那所以说呢,我这样做啊,同学,我把所有这个贝斯的样式呀,我就都作为APP的样式了,因为你想base是不是基本样式,那APP不是最外壳的组件嘛,那就都给APP去用好吧,那么hier来hier的样式折叠,那就把hier的样式带走。然后写在hier里边,建立一个hier的样式,对吗?粘过来,那就需要你在hier里边这个组件里边你得引入样式啊,线下讲这个案例的时候呀,也有很多同学都说,老师我这东西咋不出效果呢?一看好家伙,样式没引入,那不行啊,哎,当前目录下的index.cssok,样式带过来,那能不能行呢?刷新一下,诶样式也是可以的是吧?来,那我们再继续来到这个样式里边,那mean是哪儿呢?我说一下啊,就我画这个静态页面的时候吧,这个meanin呢,代表的其实就是这个list。
22:19
啊,我当时画的时候,我就认为这是主要的一个显示区域,我就随便写了一个mean啊好了,那走,粘到list里边新建一个list的样式,也叫做index.css in啊,Dex.CSS我知道作为初学者来讲呢,我这会儿可能要是用list呢,大家可能会看起来哎,更舒服一点啊,但是公司呢,用这种方式的比较多,所以说呢,我得用一个比较多的这个写法去写,得从最开始就养成一个良好的习惯啊好,那把这一堆呢粘过来,粘过来之后呢,你得在list里面去引入样式,对不对啊,Import引入当前目录下的index.cssok,那再往下找,还剩下谁了呢?就是item啊,里边的每一项的折叠折叠折叠好了,从这到这呢,就是item的样式,我就拿到item里边去新建一个index.css,都是固定的套路,然后把东西粘进来,在item里边呢,去引入这个样式import,引入啊,这个当前路径下的index.cs。
23:19
S还差最后一步,就是底部F特,从这到这全都带走,空行全都删掉,来到F特里边新建一个index.cssf的样式粘过来,在组件里边引入样式import,写好当前路径下的index.css,好了东西全都关掉,回到页面看最终的效果,一点问题没有,刷新一下OK也是可以的,所以说同学恭喜大家,你完成的第一步就是其实是第二步了,对吧?拆分组件在脑海里已经拆了,所以说这是第二步了,叫做静态组件,OK啊,那希望大家呢,一环扣一环的慢慢来,同学切到脚手架这种工程化的开发,肯定是文件相对来说多一点啊,希望你呢能慢慢的给它捋,好好吧,慢慢来,这小节呢,我们先停一下。
我来说两句