00:00
好了各位啊,脚手架里这些文件呢,怎么玩咱们也知道了啊,这插件呢,咱也安装完了,那接下来呢,咱得写点案例了,对吧?那写案例之前啊,同学我有两种做法,第一种就是把src里的东西全都右键删除好了,同学啊,刚才那讲完了这堆东西老师删了,那等你最后学完了之后你发现。我所剩下的代码啊,就是最后一个案例的代码,我想把每一个案例的代码都留下来,所以说接下来呢,我这样做,同学,Public里的东西吧,它都是固定的,偏爱图标咋的,写一个案例换一个不用吧,Index atml里的东西你觉不觉得也是固定的呀,我这只要准备好一个容器就行了吧,所以说呀,同学们,Public里的东西呢,我不在这个复制一份了,Public就这样,我把src呢,我给你复制一份,你看刚才我写了一个零一脚手架自带文件,那么接下来我把src呢复制一份,然后给它改名叫零二_src_hello_react我这么写啥意思,大家得会看啊,你比如说零一脚手架自带文件,我就编了个号,脚手架自带,你打开这个,里边有脚手架自带的public和src,对吗?但是你看二这个文件夹啊,我明确的说了叫02S RC hello react,那就证明。
01:23
名这个里边放的东西都是我在写hello react的那个案例的时候,Src文件夹里的东西,那如果说接下来我在写别的,那这些东西我可就都要删了,就从这到这儿白白喽,都删掉了,然后我再重新写好吧,写一个给大家存一个,你比如说同学,我现在这个里边写了乱七八糟的很多东西啊,但等你回头学这个react的时候,老师我就想运行一下你那个s rrc hello react,那怎么办呀,你可以这样,你把现在的src啊,给它改个名叫做SRC00000,然后你把这个名字给它重新改回src,因为脚手架不找SRC00000,它只找src,好了,是不是改回来了,改回来之后呢,你再重新执行n PM start,你就能运行现在src里边这些组件啊,所产生的那些效果了啊,你打开稍等。
02:21
等会他编译一下,哎,你看效果是不是出来了,哎,那等你看完了呢,你可以把它的名字呢,再给他改回去啊,这样做只有一个目的,想把每一个案例的代码都给大家留下,好吧,诶粘过来还叫零二,但是有的时候你发现它不让你改,为什么呢?因为你这边启动着呢,你正在用这个文件,它不让你改,就说你停掉,你看一下子就改过来了,OK,好了,那这呢也别叫SRC00000了,嗯,那给这个呢,给它删掉,好说老师,那接下来这里边咱写什么呢?同学,不管你写什么案例,有几个人好像必须要有的,对吗?首先第一个有个文件夹叫做components,对吧,组件什么的都往这里放,那还得建立一个文件叫做app.js,你叫JS叉也行啊,那就JS叉,那当然不是文件啊。
03:11
啊,不是文件夹啊,是文件点JS叉好了,那还得有一个入口文件是吧?哎,index.js来吧,同学,我最后呢,给大家写一遍这个index.js以后这个index.js呢,我就不一遍一遍的写了啊,再来一遍啊走,引入react核心库,其实再写一遍的目的啊,就是说希望大家把这东西呢给它记住好吧,引入react from,从react这个库里边还得引入,诶,改过来啊,引入react DOM import react DOM fromm react DOM还得引用谁呢?Import APP当前路径下的app.js叉可以不写,直接省略最后一步渲染。
04:11
的do render APP did不叫test了,叫root是吧,这就是入口文件的固定写法啊,当然了,后期我们讲到一些别的技术呢,可能在这里边做出一些微微的改动啊,微微的改动关掉,那么APP毕竟是个组件吧,来快速的用咱刚才那个代码模板rcc走你叫APP这儿了,哎,就写一个APP写什么我还不知道是吧?嗯,APP好写完了吧,这时我是组件里边你还不知道你写什么呢,所以说先空着OK啊来,那我重新呢,运行一下n PM start。关于运行的时候怎么停啊同学是按一下你键盘上的CTRL加C是吧?啊,因为可能之前有些同学一点命令行也没接触过,就是在这儿,这不运行着的吗?怎么让它停下来呀,不是说给它关掉,关掉它也没停,你得按一下CTRLC,对,就是你复制粘贴那个快捷键啊,复制的那个快捷键好来那再运行一下走。
05:15
稍等。以后啊,咱不用每一次的写完东西都停再启动,可以一直让它启动着,你比如说同学啊,因为它有实时刷新的效果吗?我在这比如说想把APP包在一个HR里,你就直接写,诶回到页面看效果就直接有效果了,哎,你想说老师我给他改一下这个样式style啊,你改背景色呀,还有这个什么字体大小都可以在这来,比如说style走啊字体是吧,Fo size,你比如说叫做啊40PX啊,那你回头看效果是不是大了呀,哎,所以说不用一遍一遍的重启,就有的时候如果他要卡了呀,咱就重一下,OK好了,同学,那这一小节主要跟大家讲什么呢?来说说这么一个事儿,回到课件当中,这些文件和文件夹我们已经看完了,同学说一个重要的事儿就是功能界面组件化编码的流程。
06:08
哎,这个呢是特别重要的,首先第一步呢,你得拆分组件,这个怎么理解呢?我们往上划,在第一章的时候再讲一点,四里边有这么一个东西叫组件,画的时候同学你还记得这个图吗?我给大家放大一下。如果说人家设计师设计完了,说要实现这个页面,那你首先第一件事儿,你得分析一下页面里边能分为几个组件,你比如说我觉得蓝色的就是left menu左侧菜单的这么一个组件,那这个hier呢,就是头部的组件,那这个all k呢,就是所有分类的哎,这么一个组件,对吧?首先第一步自己心里边必须得明白啊,我这东西呢,得拆成几个组件,说老师拆组件是不是可简单了呀?呃,怎么讲呢?如果要是简单的应用挺简单的,要是复杂的应用吧,可能就稍微麻烦一点啊,你就比如说同学啊,你如果要这么划分组件,那就有点不太对了,怎么划分呢?说老师我想让我给你换个颜色,粉色的啊,走,老师我想让粉色的东西作为一个组件。
07:13
那你说它叫叫什么名呢?啊同学,你说这粉色组件它叫什么名呢?如果说红色的吧,它确实是头部的hi点,这确实是整个分类,这确实是左侧菜单,你非得把它们画到一起,你说叫什么名吧。是不是觉得没法命名了呀?同学说一下,如果你拆完的组件,哎让你哎抓耳挠腮的不知道怎么命名了,多半意味着您这组件拆的不合理。你觉不觉得同学这部分区域就不应该跟这一部分区域放到一起,对不对,哎,好,那我们再往下看啊,走第一步呢,就是你得清醒,你得知道拆成几个组件,然后呢,同学你注意就得拆分里边的这些结构文件了啊,你比如说atml啊,CSS啊,然后你把它定义出来一个一个的组件,然后第二步呢,就是实现静态组件。
08:05
你拆是拆完了,只是你心里明白了,你得去实现,你写了,你真正去写了一个这个东西来打开。这是吧,哎,应该是在哪儿呢?是在这儿啊,在这个组件画这一块是吧,哎,1.4,也就是说你心里边明白了啊,这是头部组件,这是左侧导航,这是所有分类,这只是第一步,你心里边想好了,你拆,接下来呢,你得付出行动,你得去写代码,你得写出hier这个组件的静态,啥叫静态?不要考虑这个搜索框,没有搜索这功能,就直接先把搜索框写好,没有任何的交互,就是一个静态的页面,那也就是我们所说的第几步呢,打开,也就是我们所说的来到这儿,是这个离面往上,我们所说的第一步静态组件啊,拆分组件,然后再实现静态组件,静态组件实现完了,同学你再琢磨琢磨,得让它动态,那怎么动态呢?里边还分为呢两大步,先看3.1,就是你得先让页面的那个初始化展示的数据啊,它得是动态加载进来的。
09:12
哎,也就是说你不能说一上来就做交互页面里的东西,你得是动态展示数据吧,那你想动态的展示数据,同学,那我问你,你想展示是不是状态中的数据驱动的页面展示啊,那你就得琢磨琢磨了,那个状态放在哪儿。对吧?哎,你得琢磨一下,你比如说同学举这么一个例子吧,啊,现在可简单了,页面上呢,就想展示诶一堆学生的列表,在上方呢,有输入学生姓名,年龄啊,还有这个所在年级的这些信息,然后在后边呢,有这么一个按钮叫添加,然后在中间呢,展示了一些学生的信息,同学你说这个是不是就可以分为两个组件。那么第一个组件就是粉色区域啊,叫做hier区域,头部区域,那还可以再划分一个,就是橙色的这个区域,就是中间的展示学生的列表,那个列表区对不对,也就是说这个组件可以叫做list啊,那这个粉色的头部组件呢,我就可以叫做ter,对吗?那同学你想第一步是不是完成了拆分组件,那第二步呢,实现静态组件,去把hi写好,去把list写好,让它运行的时候能有一个效果,那么第三步是不是实现动态组件呀?那同学你想一上来这得展示一些学生的信息吧,你首先得让这些学生的信息呢是动态的,你不能是写死的,你写死了四个Li是吧,就是四个学生,那不行是吧,还得让他动态的,那你想展示数据就得琢磨,同学,你说学生之所以能展示到页面上,是不是你把学生的信息放到了状态里,它才能展示到页面上啊?那么问题是状态保存一堆学生,你得用什么数据类型呢?你比如说一堆学生,我。
10:57
这用数组啊,我还是用对象啊,对吧?得想好这个问题,还有就是名称你得选好,但是我觉得啊,大家起名应该不是什么费劲儿的事儿,你比如说一堆学生的信息students呗,是吧?哎,然后再考虑一下这个状态保存在哪个组件呀,是吧?哎,你状态得是放在某一个组件里的状态吗?你不能说状态直接放在那儿啊,谁也不是不行,然后呢,进入第三步里的,诶最后一大步就是加交互,你比如说获取输入的学生的姓名啊,年龄,所在年级啊,然后呢,再加上这个点击按钮的交互,你点击添加不,这就多了一个学生,对吧?哎,这是整体的这么一个流程,也就是说是组件化编码的流程,同学,这个呀,是一个通用性的东西,嗯,你在什么时候都可以用这种形式去,哎捋把你的东西就写出来,那当然作为初学者来说呢,我希望大家啊,按照这个顺序。
11:57
来,但如果说呀,你学着学着自己这个段位啊,不断的高了,那你就可以完全打破这个顺序,就说白了什么拆组件没这环节一看页面是吧,直接就知道几个组件了,什么实现静态组件呢?实现静态组件的同时,我就把状态定义好了,同时交互我也加好了,你当然可以这么玩,就有点像咱们学车的时候,同学,如果你是一个初学者,那肯定得按照教练的来,对不对,哎,上车啊,松手刹,挂挡,松离合,给油,车走了是吧?那如果说啊,你以后特别熟的同学,那就简单说,那你就直接三档起步对不对,你直接漂移起步是不是也行?哎,所以说希望大家呢,在学基础的时候,还是尽量按照这个逻辑去走好吗?那光说不练呢,肯定不行是吧,不能告诉大家把这记咨,然后也没有实际操作呀,所以说呢,在接下来的这一小节呢,我去给大家呢,写一个案例好吧,但是不是在这个小节里边写这个小节只是跟大家说了一下,对吧,叫做组件化的编码。
12:57
流程啊,其实啊,同学,嗯,这个东西呢,你正常思考的流程是不是也是这样的呀?同学你说你在写静态组件的时候,就要考虑交互,然后就要考虑状态放在哪儿,你不觉得压力太大了吗?是吧?好了,那这一小节呢,我们停一下,下一小节我们直接开始写案例。
我来说两句