00:00
对react有了一个基本的了解之后,我们来使用react完成一个小案例啊,就是一个哈的一个案例啊,看一下我们的结构有一个。Div ID是test,然后里面有一个he标签,里面的内容是哈,哎,那接下来我们就使用react去完成这个例子,回想一下之前我们在学习的时候,我们是怎么样来使用j query的,是不是我们引入了一个啊j query.js哎,然后就可以使用j query提供的这个导德对象去来学习啊和使用这个JA query。同样的,我们在学习这个react的时候啊,为了尽可能的减少学习这个成本,我们也使用最简单的学习方式,直接引入react的一个GS来进行的一个代码的编写。啊。那这个GS呢,已经给大家啊准备好了。啊,那有两个版本,一个16.8,一个17.0 17.0呢是目前啊react的最新的一个版本,当然我们16.8也要讲,对吧,因为我们去到公司以后,不可能说每个公司用的都是最新的47.0,哎,大部分公司他用的可能还是就是说之前的比较稳定的一个版本啊,16.8啊,所以我们会以16.8为主为这个基础去讲,在讲到啊,就是说新版本新增的一些内容的时候,我们再引入新版本去做一个对比。
01:21
来看一下啊,这几个GS都有什么啊作用,首先是react.development.g这个是react的核心GS库啊,然后是一个react-do对吧?点GS这个是react DOM呢是react用于操作这个do的一个GS的一个扩展啊。接下来是一个啊,Proper这个我们暂时用不到啊,先不说那。这个背b.GS啊,之前我们也用过,那什么地方用呢?就是我们在学习这个ES6的时候,哎,我们浏览器中要识别这个ES6,就把ES的语法转成ES5,用到了这个背点面点GS对吧?但在这里我们学习react,我们用到这个背点GS,不仅是要把ES6的一个语法转为啊ES5,最重要的是我们要把这个react它使用的GX差的一个语法转成GS啊,也就是我们react它用到的GSS这样的一个语法啊,只有经过这个背的一个呃转译才能被浏览器正确的给识别啊,这是这几个。
02:23
GS的一个作用。去完成我们的例子啊,首先在桌面新建一个react目录啊,用于存放我们的代码。然后我们使用编辑器啊,打开这个目录,这个目录作为我们的工程目录,呃,关于编辑器呢,大家习惯用什么啊都可以啊,推荐使用Vs code的啊和这个web啊,这里我使用这个web。Open打开。桌面的啊,这个目录。好,这个就是我们的工程目录在这里面呢,我先按照啊我视频的章节去进行一个拆分,接着按每一个视频的小节进行拆分,这样方便大家去啊,快速的找到这个对应的源码。
03:11
哎,首先我创建一个章节的一个名字啊,第一章。虚拟DOM和。GS叉接下来创建我们的第一个实例零一。Hello。在这里面新建一个HTML。Hello react。好,接下来把开头改一改啊。Hello。来做什么呢?我们来首先看一下我们例子的这个结构啊。哎,这个粒子呢,最外层有一个这个容器。哎,所以我们要新建一个容器,如果没有容器的话,那么react它又怎么会知道要把这个数据挂载到哪里呢?来,我们新建一个容器,Div啊,ID test。
04:12
啊,把注释写好。准备一个容器啊。啊,接下来哎,把我们需要的GS啊给一一引入,哎,但是现在我们还没有这个GS,所以我们在项目的这个目录下新建一个。啊,GS目录啊,也就是我们的这个工程目录下新建一个GS目录,我们为什么把它放到最外面呢?因为其他的这个章节也可能会用到啊这些JS,所以我们把它放到最外面,那接下来去啊桌面。把这个16.8的这个目录啊,整个这个GS给复制过来。粘贴到这个GS里面。
05:00
接下来啊,在这个HTML中,我们来引入准备好的这个GS啊。来,S。啊,那你要使用相对路径去引入这个GS法,注意它的这个目录层积啊,我们要使用两层点点杠才能去找到最外层的这个GS啊,点点杠GS。下面的啊,他这些GS引入的顺序也是有顺序的啊,首先你要引入这个RA的核心库,对吧,你只有有了这个核心库,你才能再去引入这个RA的一个扩展。对不对啊,最后我们引入这个背就可以啊,那我们把这个注释写好啊。引入。核心库。GS下面的,哎,16.8下面的react。
06:04
这个啊,核心库,接下来核心库引入之后,我们就可以引入这个RA的这个操作do的这个扩展do啊。引入react,用于支持react。操作这个盗墓。来直接复制啊。把这个。文件名改一改。杠到啊,最后我们来引入这个啊BA用于将GS叉转成GS。引入。Paper啊。用于啊,将这个GS叉转为GS。
07:05
好。来把这个引入的路径改一改。啊,那这个我们暂时用不着,就先不引入了,那引用完这几个GS之后,就可以去写我们的GS代码了来。首先写一个啊script的标签,注意啊,我们这里没有给他的这个type,所以它默认是使用的这个GS对吧?呃,但是我们这里使用的是react,我们要使用GS参与法,所以这个type呢,我们要给成什么呢?给成text啊paper哎,这样的话,当浏览器运行的时候,他才知道,哦,你这里是使用的这个,呃,ES6的一些语法,要使用这个背进行一个转换啊,就是要告诉浏览器我这里啊,里面写的是啊ES6这些语法,你要用这个背去进行一个转换啊,如果你不写这个,它默认就会去使用这个GS的语法,你GS里面你肯定用不了这个GS差,对不对。
08:05
啊,这里一定要注意啊,这里,呃,我把这个注释啊给大家写好,防止大家这里。使用出错啊,一定。要写。这个tax类型啊。哎,那我们来想一想怎么去使用这个react react我们之前在学习接块的时候,对吧,我们引入这个接块,它会有一个全局的一个接块对象,哎,当然也有一个这个do对象,可以让我们快速的去使用这个加同样的react也一样啊,我们引入了react核心库之后啊,它就会有一个react对象啊,React一个全局的对象,那我们引入了这个react盗之后,它就会有一个啊全局的react啊盗对象,所以我们这里要使用RA的话,可以直接去使用RA它的这个。啊,全局的对象就可以了,来。
09:00
那我们想一想,要完成这个案例需要经过几步,首先哎,我们使用react,我们使用的是什么虚拟do对不对,不是直接真实的操作这个真实的一个盗,那我们就首先要创建这个虚拟盗对不对,然后创建好虚拟盗墓之后,我们要找到。哎,对应的一个容器,将我们的这个虚拟倒去啊,挂载到指定的一个容器上,哎,所以我们这里啊,就分两步。来,首先第一步啊。创建虚拟动。这里我们改成大写吧,啊,因为它是document object model的一个缩写。啊,那第二步呢,就是。渲染。虚拟盗墓到页面,哎,我们主要完成这两步就可以了,首先看第一步啊,怎么创建虚拟盗墓,虚拟盗墓啊,我们直接使用这个定一个常量啊,V盗墓给一个常量名,然后是我们的这个虚拟盗墓的一个内容,来看我们的这个例子。
10:15
你的内容是什么?是不是一哈?来写一下H1。Hello啊,那大家有没有发现一个问题,哎,这里是不是看着有些别扭,那为什么没有加单引号?为什么直接这样写,注意啊,我们这里面写的就是贝,我们这里面写的是GS差的一个语法啊,GS叉的一个语法,所以一定不要加单引号。清楚吧,啊,这里注释给大家写好。GS叉语法不要写引号啊,如果你写的引号那就是什么,它就字符串了是不是。好,这一点要注意的地方,第二点,哎,将虚拟到旋转到页面,那我们怎么将虚拟到旋转到页面呢?
11:04
可以看到啊,这里我们引入了react do啊这个扩展库,它就是用于啊支持我们这个去操作do的,对不对,所以我们要使用到它提供的一个呃,全局的一个的一个对象。哎。React。哎到啊,直接有提醒啊,使用这个对象,那使用这个对象提供了什么方法,Run的方法啊,一个渲染的方法。诶,Render,好,这个方法呢,它接收啊几个参数可以看一下,第一个啊是我们要渲染的这个虚拟道对吧?好,第二个就是容器,你要旋转到哪个容器,然后我们暂时用这两个参数就够了。来先用中文写一下啊,第一个参数啊,是不是需要一个。虚拟倒母对不对?第二个参数需要一个容器,是这样吧,那我们虚拟倒母是不是直接就是它,哎,这里我们定义这个虚拟倒是不是容器,容器是谁?这里是我们准备的一个容器对吧?那你怎么写,我们是不是要通过哎我们定义的这个ID获取到它对吧?那怎么获取呢?这里要用到原生的这个GS啊,因为react并没有提供我们去操作的一些方法啊,这里其实也是我们唯一可以使用这个原生的呃,GS去操作这个获取这个盗墓的一个地方啊。
12:22
好,开始的,哎,这样的话我们就完成了。一第一个创建虚拟到,第二个把虚拟到给渲染到页面啊,渲染的时候使用的react do啊,提供的这个全机对象使用它的run方法啊,Run方法接收两个参数,第一个是虚拟到,第二个是我们要渲染到哪个容器里面。好来,我们在浏览器中运行一下,看一下。可以看到啊,这个哈,已经有了,那我们打开这个调试看一下坑,看一下我们的代码啊,这里面是不是。哎,和我们的例子是不是一样的,哎,有一个容器,然后我们的这个H1标签挂载到了这个容器上面,好,这就是react最简单的一个例子。
13:06
接下来看一下控制台都给我们说说什么,首先看第一个啊,他告诉我们你可以去下载一个啊开发者的工具。啊,这个工具呢,是谷歌浏览器的一个扩展,可以帮助我们更友好的去调试react的这个项目,啊,当然我之前因为装过啊,为了跟大家保持一致,我把它卸载了,在后面我们会给大家说怎么去安装这个开发者工具。啊,接着看第二个这个黄色的这个不是一个错误,它是一个啊警告啊,它告诉我们我们正在浏览器中去使用这个baible啊请确保你的这个不是生产环境下的一个应用,也就是说他不建议我们在生产环境下啊,是通过这个GS的方式去引入这个背ible去使用,哎,为什么呢?我们来看一下代码就知道了,诶当我们的代码执行到这里,发现这里是哎要使用这个背包,哎,然后它会啊,使用这个背包给我们进行一个翻译,将这些语法转成这个GS的一个语法,对吧?它是一个实时的啊,当我们代码比较少的情况下,大家可以感受不到啊,因为代码走到这里就给我们翻译完了就给我们显示结果了,当然你的这个代码比较多的时候,比如说有几万行你的这个浏览器中,你去看这个项目,你可能会出现一个短暂的一个白屏,因为背他去翻译这些代码时候也需要时间,是不是?
14:23
哎,所以说这里浏览器就给我们警告了啊,你正在浏览器中使用这个背包,请确保它不是在一个生产环境下去使用的,对不对啊,当然我们学习的话,我们在这里写是没有问题的。当然在实际的开发中,我们不会怎么去用的,哎,我们会使用一些构建工具,比如外派会提前把这些哎要翻译的代码提前给翻译好啊,当然我们这里学习的话,简单的这么去用没有问题啊。好。这就是这两个报错啊,如果你使用的是Vs code等其他的一些编辑器,还可能会出现啊,一个报错,就是找不到这个icon图标的一个报错啊,因为我用的这个编辑呢,它自动就提供了这个图标,所以没有出现这个错误啊,这个大家注意一下就可以了。
15:10
最后我们来总结一下啊,一些需要注意的点,首先是这些GS的一个引入的顺序,一定要先引入react的核心库,再引入这个react啊相关的一些扩展,比如说用于操作这个do的do啊,最后我们引入这个背啊,用于将这个GS叉转成GS,好第2.1定要注意啊。这里这个script,这个TYPE1定要写上这个背包,如果你不写,它就会把这些等等GS的语法去处理,大家想想GS如果你不加单引号,这里肯定会出错,对不对?好,那我们来可以试一下啊,现在我们把那个tap给删掉。啊,可以看到啊,这里面就是说编器已经爆红了啊,那你运行的话肯定会出现这个问题啊。是不是会报你一个错啊,缺少这个符号在GS语法的一个报错对不对啊,这是这一点啊,一定要加上这个背包这样的话啊,我们在解析这个代码的时候,他才会认为啊,这里你使用的是一些啊E的语法要经过这个背的一个转移啊。
16:09
这是要注意的一点,再一点要注意的是啊,因为我们这里使的背包,也就我们这里使用的是啊,写的是GS差的一个语法对吧,所以GS叉的语法这里你不要加单引号。清楚了吧,如果你非要加上单引号,大家可以来看一下效果。可以看到是不是直接给我们把这个就当成字符串给输出来了。是不是这样的啊,所以这1.1定要注意啊,啊,那还有一点要注意什么呢?就是一定要有一个容器。你如果没有容器,那你这个虚拟弹对吧,你怎么去旋转的页面,你旋转页面哪里,你挂载到哪里,是不是也会出现问题。再来看一个问题啊,这里我们写了一个hello是不是,那么我想再来一个哎,HELLO2啊,这里改成we do2,那这里我是不是再复制一个对不对,去渲染这个微到挖到这个容器里面,好,那我们来看一下效果。
17:03
可以看到啊,只有哈罗,是不是没有那个哈罗了。是不是,所以这是一个覆盖的一个操作啊,不是一个最佳的操作啊,它始终会以最后的这个为准,大家可能有疑问,那我如果要渲染多个怎么办呢?啊,不要慌,我们到后面学了这个组件之后就可以解决这个问题,好,这里就先删掉了啊。
我来说两句