00:00
接下来我们开始进行组件的学习,在学习组件之前,我们先来安装一个啊react的开发者工具,那这个开发者工具怎么安装呢?首先啊,它是谷歌浏览器的一个扩展诶。所以说我们要去谷歌的网上应用商店去安装。来。那谷歌的应用商店从哪里进入呢?找这里啊,更多工具有一个啊扩展程序。好。在这里我们可以打开这个谷歌的啊网上应用商店。打开之后啊,在这里去搜索啊,React就可以了啊。搜索到之后,哎,就是这个工具啊,注意一下,一定要是这个提供方式Facebook,那我们点进去之后添加到谷歌浏览器就可以了,当然这是在你能访问谷歌啊的前提下,你才可以去访问这个谷歌的这个网上应用商店,也就是说。
01:03
你要能访问哎,谷歌这个网站,你才能访问这个谷歌的网上商店,但我想大部分人应该是访问不了的,哎,所以呢,我们应该采取第二种方式。就是使用这个啊,加载已经打包的这个组件,哎。直接我们把。就是说这个工具已经打包下来了,然后大家要使用的时候呢。直接去加载啊,这个打包好的这个组件就可以了啊,这个啊组件呢,我已经给大家打包下来了啊,放到了这里,最后会放到这个章节里面啊,大家可以去下载,那我们怎么把它去加载到谷歌浏览器里面呢?来看一下谷歌浏览器,诶还是在我们的扩展程序里面啊。怎么进呢,还是从这个里面啊,就是说更多工具。扩展程序我们就进到了这里面,对不对,然后进到这里面之后呢?啊,注意一定要把这个开发者模式打开啊,现在是关着的,你看它是灰色的,把这个打开,这个打开之后这里会多几个选项可以看到啊,我们可以打包已经安装的扩展程序,而也可以去加载已经解压的。
02:13
这个扩展程序对不对?来我们就点这个啊,然后从这个啊桌面哎,找到我们的这个目录啊,直接去选择这整个目录就可以啊,啊这里面内容我们不用管,直接选择这整个目录,然后选择诶可以看到啊这个react这个开发者工具就过来了,对吧?好注意一下,它这里有一个这个图标,那这个图标的意思就是说这个是我们加载的这个已经解压的这个扩展程序,你看他也给我们提示是未封装的扩展程序,说明不是我们直接从谷歌的应用商店去安装的,兄弟们,你像这些直接从谷歌的应用商店去安装的,它是没有这个图标的啊,这个大家不用在意,不影响我们使用啊。哎,这个有一个按钮,就是说当我们把这个按钮打开的时候,哎,我们的就说谷歌浏览器就会使用这个扩展,就什么,你看有些关闭的就是没有在使用,那大家可能以为,诶,那我怎么去使用它呢?在哪去看呢?诶注意啊,你刚装好这个扩展成序之后呢。
03:13
它是在这个里面呢,并没有显示出来。对吧,如果你看我们这么多扩展程序,如果全部显示出来,我们的这个浏览器这个占的就会特别特别长,所以它有一个这个东西,把我们的这个扩展程序都给折叠起来了,那我们想让它显示到这个外面也可以啊,在这里面找到这个。啊。我们的这个react啊,这扩展工具,然后这有个丁啊,我们把它点亮,它就会出现到这里,好这个时候当我们去哎刷新,就是说刷新这个react开发的这些诶页面的时候,这个图标就会变亮。清楚吧,好,那我们来看一下啊。这个是我们,哎之前写的这个todo list的这个例子,下面我们用浏览器运行,诶。可以看到啊,这个是我们用react写的,对吧,所以这个图标它就亮了。
04:01
看到了吧,啊。然后嗯,那它有什么作用呢?我们在这打开,你会发现,诶,这里多了一个components。对吧,Components组件,然后这里还多了一个这个啊,性能调试的一个工具,诶这个我们可能用的比较多一些,就是我们再去开发组件,写组件,或者用到一些组件相关的一些内容,我们都可以在这里去啊。看这个相关的一些组件的一些信息,哎,这个是可以帮我们更好的去调试去开发我们react的这个程序啊,呃,我们来看一下啊。Re react,它这个官网啊,官方文档它肯定是用react写的,对不对,那现在我们来刷新下,因为这个程序是我们后来装的啊,这个页面是我们早就加载的,所以说它没有变量是不是,那我们来刷新一下,可以发现是不是变亮了啊,但是你们可能会有疑问,诶它这个怎么是这个颜色和它的官方图标一个颜色,哎,这个是很定的是不是,但是我们自己的啊,为什么是红色,而且还多了一个这个黑色的一个。这样的一个点是吧,那是因为哎我们这个是属于开发模式啊,就是没有经过打包编译的一个react,哎,这个是经过最终这个build啊,经过这个打包,经过这个转移之后的一个啊,已经发布的一个,呃,生产环境的一个正式的一个染的项目啊,这个是我们就是说开发环境,所以它这个图标的个颜色。
05:19
哎,大家要留意啊。哎,当然你装了这个之后,你再去访一些网站,你就知道哪个网站,诶,它是用开发的啊。好,这个是关于这个react,它的这个开发者工具的一个安装啊,有两种安装方式,如果你能访问啊,这个谷歌商店啊,就是说你能访问谷歌这个网站,你就能访问这个谷歌商店嘛,那你直接去这个网上商店里面搜索react,哎,找到这个提供方式,Facebook官方的啊提供,然后直接添加到谷歌浏览器就可以了,这个方式是比较简单的啊,当然。我们不能访问谷歌浏览器,不能访问这个谷歌的这个网上商店,也没有关系啊,这里我给大家已经提供好了一个,呃,打包好的这个包啊,这个包大家只需要在这个。
06:05
哎,扩展程序里面把这个开发者模式打开,然后加载就可以了。就什么啊,最后再给大家说一下怎么去进这个,哎,扩展程序啊,我在在这打开一个新标签给大家看,从这里啊,你找到这个更多工具里面有个扩展程序。好,这样就进到了我们这个扩展程序,好,那把这个开发者模式打开,就可以加载已经解压的这个扩展程序,哎,如果你想去这个啊,网上的这个应用商店,把这里点开,这底下就可以去网上的应用商店。
我来说两句