00:00
好的,同学们在对组件有了一定的认识之后呢,我们开始进行第二章react面向组件编程,但是大家先别急,我们做一个准备性的工作,大家一起安装一个官方出的react调试工具,而且这工具呢,是基于Chrome浏览器的啊,所以说大家不要在别的浏览器上去安装,是基于Chrome浏览器的。那么怎么安装呢?打开Chrome浏览器谷歌应用商店大家都知道吧,打开这更多工具扩展程序,点击你的左上角,这里边有一个打开chome网上商店,在这儿呢啊,同学在下边呢,点击它走,如果你所在的网络是可以访问谷歌应用商店的,那么一会儿在这个位置会出现一个搜索框,你直接输入react搜索即可,那么你注意观察搜索出来的结果啊,同学们一定要选择那个提供。
01:00
当为Facebook的,那如果不是这个呢,你尽量别选择了,那有一些可能是民间的作品,其他团队的,那我们选择是官方的这个啊更好用,OK啊,那很多同学呢,所在的网络是无法打开我们这个谷歌应用商店的,那我也提前呢给大家准备好了离线的文件,大家直接导入即可,那在哪呢?我们看一下给大家准备好的课件里面有一个零六,其他在这个里面有一个,诶,React d tos,我们把它导入你的chome浏览器就可以了,如何导入呢?给大家演示一遍,首先打开你的ome浏览器右上角更多工具,点击扩展程序,然后有些同学这里啊开关是关闭的啊,也就是说有些同学是这个状态的,那需要你呢,把这个开关给它打开,OK,打开之后呢,多了三个选项,同学们注意看啊,123我们用哪个呢?用第一个叫加。
02:00
在已解压的扩展程序点击这里,然后呢,他让你选文件,你就选择我给你的那个文件,就可以找到全家桶,找到零六,其他找到这个,你点一下它,或者是双击进去都可以,然后点击选择文件,那这个时候呢,你就会发现你的插件里面多了一个,诶在这呢,而且你看啊,它的名字叫做react developer toth,对,正是我们所需要的那个,但是说一个小小的细节问题,就是在你这个插件啊右下角有这么一个东西,这个东西呢,它在给你表达的是你这个插件不是真正的从Chrome官方的这个商店上下载下来的,而是你导入一些第三方的文件,然后诶给他启用的,那说老师这有什么影响吗?没什么影响,对吧?那如果你访问不了谷歌应用商店,你就只能用这种方式去给他导入,也不耽误你使用,OK,然后给大家一个建议,你把这个插件呢给他。
03:00
钉在浏览器的这个位置啊,那怎么钉过去呢?就把它固定在这呢,点击这个里边找到react developer toth,点击这个小图钉,就把它钉在这里了,OK,好的,那这东西怎么用呢?你仔细观察它的颜色是不是灰色的,也就是说处于一种未激活的状态,对吗?那是因为啊,当前你的网页不是拿react写的,如果你打开了那种拿react写的网页,OK,它肯定是亮的啊,但是呢,量有两种量,咱们一个一个来啊看一下说老师我怎么找到一个是吧?React写的网页呢?可以呀,咱之前是不是写过很多呀,你比如说这个GS叉的小练习,难道它不是一个用react写的网页吗?肯定是右键打开。A,你注意观察同学,这图标是不是亮了呀,但是亮的有点诡异,React logo,我问一下是红色的吗?不是,但是它这亮的却是红色的,而且你注意啊,这个图标的右下角呢,趴着一只小虫子啊,就像一个小臭虫一样,那么亮,这种图标代表的含义就是您这网页呢,确实是拿react写的,但是啊,你这个网页呢,没有经过最终的打包,也就是说你还处于一种开发者的模式去编写你的网页。
04:26
啊,或者说的再直白点,你的网页没有经过打包上线,而是直接通过这种什么127.0.0.1这种形式去访问的,那他就长这个模样啊,说老师,那怎么能让它变成正常的颜色呢?你的项目得经过一次打包,然后呢,得最终部署到服务器上上线,你就比如说我给你找一个线上的网站吧,拿react写的谁呢?大家知不知道呀,美团啊,他就是拿react写的,那我们打开一下走,同学,你注意观察那个图标是不是亮了呀,而且亮的是不是很正常,就像react logo那样,对吧?深蓝色的背景,浅蓝色的logo,这是属于正常的,说老师,那我们这什么时候能正常呢?别急呀,我们讲完脚手架了之后呢,给大家进行一次打包,你就会发现,诶,我们写的东西也能变成这种形式,OK,好,哎,那不光要说这个,还得再多说一个,当你右键审查元素的时候,你发现啊,在你浏览器的众多选。
05:26
选项卡里边多了两个人,老师没多呀,这跟之前一样啊,点这儿更多选项卡,发现多了两个人啊,注意他俩我给你读一遍啊,第一个叫做components component是组件加个S,就是代表组件的复数,那我这里呢,画笔一开呢,它就会消失,所以说我就哎用这种形式给大家聚焦一下,在这儿呢,Components,那用这个选项卡我们能干嘛呢?可以观察我们的这个网页一共由多少个组件组成的。
06:00
然后每一个组件里边都拥有什么一些属性,哎,都可以通过它去看,要不你就得自己翻代码,多麻烦呀,那么下边还有一个叫做profile,这个profile干嘛的呀?简单说一下,这个呢,用于记录你这个网站的一些性能,你比如说渲染用了多久啊,啊,哪一个组件加载的最慢呢?那它慢的原因是什么呢?都可以用这个工具去分析出来,那当然呢,现在我们先不用这个选项卡,我们先用哪个呢?诶第一个components OK,好了,那么希望大家呢,这个把开发者工具安装好,然后咱们才能进行组件化开发好了,那这一小节呢,我们停一下。
我来说两句