00:00
好,各位同学,在对react有了一个基本的认识之后,我们开始来正式的学习它,打开资料零一课件,把这个文档打开,这是我们为大家准备的课件,我呢已经提前打开了,在这里点击第一张react入门,让我们开始react之旅。在开头的位置呢,给了大家两个官网,一个英文官网,一个中文官网。我们在讲课的时候啊,肯定也需要这两个网站,我们去查阅一些东西啊,那当然看的更多的呢,可能是中文官网,需要的同学呢,自己存一下,OK,那当然现在我们还不用看啊,来,往下关于react的介绍啊,还有特点啊,我就不再说一遍了,因为在开篇的时候,我们已经用图的形式去给大家呈现了,对吧?最后呢,我们重温一个小小的东西,就是react高效的原因,简言之,React使用了虚拟DOM技术。
01:03
他不总是直接操作页面的真实盗,而且呢,他在操作真实盗墓之前,会把两个不同的虚拟盗墓进行比较,比较出有差异的那一部分,再去更新页面,所以说人家高效吗?啊来往下,接下来呢,我们案例上见就在这个里面。在本课程当中,所有的知识点呢,都是以例子进行引出的,例子你敲完了知识点也就记住了。好了,接下来呢,我们做第一个小效果就是hello react,注意观察下方结构。最外侧是个divd为test,里边包裹着一个H1标签,标签内容为hello react。是的,就这么简单,那么接下来呢,我想用一个大家觉得最舒服的方式去讲解react的使用,那么大家跟我一起回想一下,当年你是怎么学习它的呢?JA query,其实学习它非常简单,同学就是在一个HTML页面里边。
02:11
直接引入谁呢?J query.js随后呢,就去查阅官方文档,去看看围绕着这个Dollar符我们都能进行哪些操作点啊小括号啊,对吧?哎,行了,这不说了。你当时怎么学的j query,那今天我就想用这种方式去带着你学习react,那所以说不可避免的第一步就是我们是不是得去下载react.js呀,好,大家别急,现在呢,还不需要你自己去下载,课件里我已经给你准备好了,打开。零三依赖包旧版本新版本。诶,同学说,老师这什么意思呢?说一下我们的react课程,不仅要讲解react的最新版提出来的一些写法和和新推出来的一些东西,旧版本讲不讲也讲,为啥呢?你工作的时候不能保证公司里的人写的都是新版本,你觉得呢?哎,所以说旧版本也得学,先学旧版本。
03:16
随后到了新版本和旧版本有差异的地方,我再带着你把新版本引入,我们再聊聊新版本好吗?循序渐进的啊,有层次感的去学,OK,那当然这个旧版本啊,同学,我讲的也不是说REACT15点几的版本啊,不是讲解的呢,是16,嗯,点八这个版本,因为太旧的呢,其实我们也没有什么太大的意义去学它了,对吗?那难不成再学个REACT4版本,那太旧了吧?啊,OK,那打开这个旧版本。这里边都是旧的依赖包,首先有四个点,GS文件。那同学你觉得我给大家放大一下平铺四个点JS文件,你觉得他们都是干嘛的呢?
04:04
首先有一个人,我先带着你把它刨除,就是它目前我们还用不上它,那是稍后要用的。诶,给它划掉。那么剩下这三个人,我们就一一给大家说一下,Bible a同学。这个人你应该熟悉。你在两个地方应该见过BIBLE1,在你学习ES6新语法的时候,你回想一下,同学你写那箭头函数啊,模板字符串啊,有些浏览器不认识,那后来你怎么办的呀?是不是用Bible做的转换,也就是当年你用Bible是ES6转ES5,对吗?还有一个地方你应该也遇见过,在哪呢?同学回想你去学习模块化的时候。模块化的时候,我问你,你写那个引入语句的时候,是不是得写这个词啊。Import引入什么什么什么,但是浏览器直接就能解析这个吗?不能,还得借助Bible去ES6转ES5对吗?那所以说在你的印象当中,一题Bible就ES6转ES5,那是一个再正常不过的反射,那一说Bible马上就想到这儿,那同学我跟你说呀,Bible不仅能做ES6转ES5这件事,他还能做第二件事儿。
05:24
什么事呢?那你听我引导你一下了,我们呢,学习react的时候,同学你注意写的不是原生的JS,而是另外一个东西叫JS叉。啊,或者标准点说叫GSX老师,我有点紧张了,难不成又要学习一门语言?不是的,只要您的GS还不错,能够在25分钟之内上手GS叉。GS叉只是在GS的基础上提出了一些要求啊,啊,或者一些新的这个语法啊,仅此而已,而且还不是很多,所以说你能够非常轻松的就掌握它。
06:05
我们写的是GS叉,浏览器却只认GS,那怎么办呀?这个问题怎么解决呀?那就得请出Bible了,所以说Bible还有另外一个功能就是GS叉啊转成GSOK,哎,那所以说需不需要Bible呀,需要我知道大家现在呢,还有点疑问,老师,GS叉那还有哪些语法规范呀,对吧,你说25分钟之内就上手,那他还有这怎么写嘛,别急,慢慢来啊,慢慢来。啊,来走,再看第二个文件,叫react.development.js这是干嘛的呀?直接说了,不废话,这就是react核心库,那你学习j query兄弟,你能不引入这query吗?那你学习react同理吗?对吧?这就是react的核心库啊,核心库朱老师的,他呢?他是干嘛的呀?哎,同学,你听听那名呗,React go do。
07:09
咱说学了react呀,你就不用操作DOM了,React帮你操作。那怎么着,这咱开玩笑的说,嘴一张一闭,这玩意儿就能操作到吗了,不是得借助这个库的支持啊,那所以说这个叫react的核心库,那这个叫什么呢?叫react的一个扩展库。扩展出来哪些功能呢?React帮你操作到,那所以说呀,同学123。这三个文件我们都得用。啊,又开始编码了是吧,又建新建一个文件夹,我们往这写代码,回头这个文件夹呢,也会以压缩包的形式整体打包发给大家起个名字吧,基础那基础呢,我用这个英文单词啊,Basic基础的。
08:00
好了,右键Vs code,打开这个文件夹。开始吧,我得引入三个GS,那就建立一个文件夹吧,叫GS,把这个这个这个摁住,全都引入好了,就位。那接下来呢,同学就回想你当时怎么学的这块,是不是建立一个HTML文档,就开始学习它的一些API了,咱们在这也是,但是我的案例很多,分好类,一个就是一个文件夹,Hello react。201第一个小案例嘛,新建一个hello react.html。来写上固定的那些东西,名字呢,也给它改一下,别叫hello react。啊,其实这句话呢,是做移动端适配的,想加呢大家就加着,如果你不想加呢,就给它删除也可以,好接下来怎么做。
09:06
注意观察粒子的结构,最外侧有个容器叫test。所以说你想让干活,首先第一步准备好那个容器,连容器都没有,人家怎么给你往里面放东西吗?但是我用一个引号去写,准备好一个容器,Div为test。接下来呢,引入这三个GS,那你觉得同学引入这三个GS需不需要有顺序呢?啊,那我直接告诉大家顺序是要有的。有一个人。就是他。必须要在另外一个人,就是他之前引入。蓝色的要在红色的之前引入,为什么?因为蓝色的是核心库,核心库必须就位了,周边库才能进一步的去引用。
10:08
那否则找不到东西吗?啊好了,那一步一步来写好注释,引入核心库GS下的它。再来注释引入react DOM用于支持react操作到GS下的。Reactor。再写注释,接下来是谁呢?就是那个Bible,用于将GS叉转为GS。
11:01
引入Bible。该引入的东西都引入好了,容器也准备好了,接下来进行编码,你肯定得写脚本吧,标签准备好,同学我问一下。这个标签。咱们之前的说法是可写可不写,对吗?你不写我默认就认为你里边写的是什么呢?哎,JS浏览器就认识,但是今天由于我们写的不是GS,你觉得这里边还能写这个了吗?不能,那同学说老师明白了,你都这么告诉我了,那这写的肯定是GS叉吗?就告诉人家嘛,我这里边写的是GS叉嘛,不对,不写GS叉,写Bible。这是你第一个需要注意的地方写Bible,为什么?表示我这里边写的不再是GS,而是GS叉,而且靠谁给我翻译一下呢,Bible。
12:02
好的,所以说这儿呢,给大家写好注释,此处一定要写Bible,说老师那我不写呢,不写默认就是JS不可以的。好,接下来编码,让页面上出现那个hello react。那大家跟着我一起回想同学们。React,如果想工作,是不是必须得有虚拟盗墓?那么我们可以去看一下最开始咱们引言的那个里边的图。打开。在这你看这图吧,同学,是不是先有数据,然后呢,你去学习react里的一些写法,把这数据变成虚拟盗墓,然后你再用react里的一些写法,把这个虚拟盗墓,让它变成真实盗墓,对吗?那我们现在呢,也不根据数据去生成虚拟盗墓,我们做的一个特别简单的事儿,就是直接写虚拟盗墓,说老师那里边的数据呢,写死就叫hello react,所以说第一步肯定是创建什么东西,虚拟do一点,创建虚拟盗,那第二件事呢。
13:17
总之,你得想办法。让react帮你把这个虚拟盗翻译成真实盗,然后放在页面上对吗?那我就简单点写,叫做渲染虚拟到到哪呢?到页面要完整的说吧同学,就是通过react的什么什么语法渲染虚拟do到页面不写那么复杂了,咱直接代码上见走第一步创建虚拟盗墓来,你创建一个。说老师虚拟道,这怎么创建呢?那同学,我让你创建一个变量,名为A,里边的值存的是一,你是不是这么写呀?Cost a等于一对吗?舒老师,那你写的不是GS吗?你不说这里边得写GS叉吗?哎哟喂,同学,GS叉和GS就是差了几条规矩而已,之前的GS能不能写呀?能,但是我要的不是A,那值也不是一,我要的是个虚拟DOM,那虚拟DOM你起个名字吧,把这个变量。
14:16
虚拟有个词ver是不是虚拟的意思,我们取它的首字母就叫做v do,还是用那个单词,那所以说它的名字就是大写的v do,哎,等于那它是啥呢?看一下例子嘛,里边有个h he标签了,写的hello react。那接下来大家注意观察一下我的写法,你觉得有哪些问题呢?啊,就第20行,不用看别的地方啊。大家觉不觉得有哪些地方不太对呀?哎,有同学说,老师我知道哪不对了,我一上来我就发现了啊,你忘了加单引号啊。不假。
15:01
原生GS,我得说这东西肯定得是一个HTML字符串,你得加单引号,但是在这个里边一定不要加老师,为啥?因为它是GS叉,不是GS,这标签能和那些GS混着写,写好注释。叫做,此处一定不要写引号,因为不是字符串。老师不是字符串,它是啥?它是虚拟倒,老师的虚拟倒又是啥呢?它的本质又是什么呢?别急,我们接下来都会仔细的去探讨,所以说第20行A先真写着。那那么第二步呢,那就渲染虚拟盗墓到页面呗,说老师那怎么渲染啊,那你说一下,想当年你学习这块位的时候。你只要引入了j query,那你说全局就多了两个东西,一个是j query这个关键字。
16:02
那这个对象还有另外一个人,谁呢?就是咱那个叨福。好,那react跟这块也挺像哈,哎,就说使用方式这一块挺像。也没引入react,核心库引入了,好了,全局多了一个对象,叫react。哎,好的,那你再往这看,有没有引入react do,引入了好了全局又多一个东西,React DOM。啊,Do,那当然我这呢这M啊有点稍稍没放下react do,哎,对,引入它全局有这个,引入它全局有这个,那接下来怎么用呢?直接写react。DOM。因为你毕竟是操作跟虚拟盗墓相关的嘛,那你肯定得借助这个人呢,React do点他身上有个方法叫render,接下来我写的这些东西呢,大家先记着对吧?你学习任何一个东西的时候,同学那API没人能帮得了,你就得自己慢慢记,同学你猜这render啥意思呢?就听这词是不是有渲染的意思啊,OK render接收两个参数,第一个参数是你要渲染哪个虚拟道呀。
17:18
那么第二个参数就是哪儿,哎,就是那个容器,那你看吧,你把哪个虚拟盗墓渲染到哪个容器里边去,我帮你做,那所以说第一个参数咱得写v do,那第二个那个容器。说老师我写这个吧,Test。啊。你这尽量不不要这么写对吧,标准点写,你得拿到这个节点,然后再去写嘛,是吧,那这最好怎么写呢同学。说老师react是不是给我提供了一些选择器的写法呢?你比如说我写一个这个井号,然后test,它是不是就能找到这个呀,不能,React并没有给你提供选择器的这种写法,那怎么办呀?自己动手,丰衣足食,document.get element by ID test,有些同学看我写到这儿就开始说了,老师啊,你这你这种做法,哎哟,我的天呐。
18:14
一直说别自己操作盗墓,你还在这document.get element by ID同学们,我想问一下react没给你提供选择器。那你不写原声的,你写谁?老师,我把这块引进来,我这写了个Dollar符小括号,同学听没那么做的。J query就是封装了很多高级操作盗墓的方法,然后react里边还不让你去操作盗墓,那你觉得引入j query合适吗?不合适,所以说同学们,咱整个这个应用里边也就这儿能自己来一下document.get element BYD,以后呢,基本上都要避免这些,所以说你看他官方写的案例,诶也是这样的,要不你玩不下去了吗?啊,OK,说老师呢,这就能出结果了,是的。
19:01
我们右键打开瞧一眼呗。诶,Hello react同学注意啊,右键检查看看那个结构是不是跟我们一样的放大放大。往下一点。对吗?ID test he hello react,对吗?OK,但这个时候啊,来到控制台有这么一些警告,有一些呢是错误,我们一个一个的说,首先看最下方的,这是什么意思呢?这是他找不到网站的偏爱图标了,他找这个资源他找不见了,老师,我没写代码,发这个请求啊,浏览器自动的一个动作,不管你写不写,浏览器都要做这件事儿,老师,什么是偏爱图标就在这儿。咱们的网站配置偏爱图标的呢,没配置呢。啊说老师那网站图图标你看一下百度的你就知道了。就这么一个小logo,对,它就是网站偏爱图标,我们的网站没有配置吗?说老师那写一个爱听同学,现在先不用做这些周边的事儿啊,说老师那怎么办呢?第一次啊,他会有这个提示,以后就没了,你再刷新一下,嗯,他就没了,你第一次打开它会请求的,他以后发现没有,他就不请求了,OK。
20:19
好,那还有两个没解释明白呢,对吗?看这个警告同学,这不是错误啊,这是警告,大概读一读,说你正在使用一个浏览器里的Bible翻译器,请确信你的脚本没有运行在生产环境下。这是为什么呢?哎,同学我说一下,就刚刚我带着你写的这些东西。确实能让你在呃初学的时候啊,有一个最简单的方式去学习react,但是我这么写呀。有点小问题。就是开发的时候肯定不这么写,为啥呢?简单说一下,浏览器在拿到你红色框里代码的时候。
21:05
他拿到这些代码的时候,他才发现,哎哟,人说了写的不是JS啊,得靠Bible进行翻译,那这个时候浏览器现去给你翻译这些代码,代码少那还行,感受不出来什么影响,但是如果代码一多,Double翻译的时候很耗时,那你做好准备,你的页面可能会白屏一些时间。啊,就什么都没有白屏啊啊,那所以说嘛,这种方式肯定不在真实开发里边用。老师,那怎么用说了别急,现在咱就先用这种方式,我问一下同学,咱的网站上线了吗?没有呢?那所以说你急什么吗?先用这种最舒服的方式把语法学到手,然后拿着这个语法我们再换另外的一个平台去写,那不就急了吗?啊,所以说别急,那也就意味着这个小小的警告会陪伴我们好几个课时。
22:02
因为确实咱们用的有点小问题嘛,对吧,哎,因为这东西你不不是很标准嘛,人家在提示你哥们儿,这好像不太对吧,你代码一多白屏啊,那咱们现在也就是学习这个基本语法嘛,就是这儿呢,暂时忽略它OK,哎,后期肯定会没的,我会详细跟你说的啊来看最上面这个,这啥意思呀,同学一句话吧。但凡一个框架,它官方都会出一个自己的开发者调试工具,就不可能让你完全的借助这个控制台呀,Network呀这些东西去看啊,他也给你提供一些工具,那他的意思就是说哥们,我发现你的浏览器咋的没有下载react开发者工具,那么为了达到一个更好的开发体验,我推荐呢,你去下载,说老师呢,合着你也没下载呢,对呀,我把我的删了,跟大家保持一致嘛,我的也没下载,老师那咋下载啊,那回头再说呗,啊回头再说这个案例呢,就是先把东西跑通,那所以说你再刷新这两个人也会出现的,OK啊,在以后一个合适的时候,它就没了,因为我给你讲脚手架它就没了,然后这个呢,等咱们安上了开发者工具,它也就没了,对吗?好了,我们回头再看一下这个案例,同学有这么几个需要注意的地方。
23:17
这要改成Bible,这儿千万不要写单引号。这两个库引入有顺序,核心库必须最先引入,OK,那么接下来说说大家容易犯的几个小错误。首先第一个。连容器都没写,就直接在这儿这么写,那你看一下后果就是。他说你给我的container什么意思容器,它不是一个倒节点,那我怎么往里放吗?对吧?没有这东西好了,还有可能出现这么一个错误。就是大家在写东西的时候呀,错误的把它加上了单引号。
24:03
那你所看到的效果呢,当然就是。这种你的标签是不奏效的。啊,还有一种错误,那就是。单引号还真没加,您挺给力的,但是在这儿呢,你输了,你是不是写的是GS呀,同学,GS里边能这么玩吗?啊,连个引号都不加,那所以说。你代码运行的时候,我们看一下控制台刷新,它报的什么错误啊,语法错误。说什么呢?我不认识这东西是吧?啊,那所以说这几个需要注意的地方你都得注意一下,嗯,这就是我们写的第一个小案例啊,那也知道有一些疑问呢,还没给大家解答,咱慢慢来嘛,你也是先写这么哎一些东西,先让他能出现一些效果再说。那还有第二个小事情跟大家再说一下吧,就是有些同学说老师这不是有了一个hello react吗?我想再来一个啊,叫hello,艾特硅谷。
25:06
这个叫做v do2,老师你不是刚才把这个v do放进去了吗?那我现在想把v do2也放进去,那老师我明白了,我再复制一下,我这写个v do2,刚才把这个放进去,现在把这个放进去,那这个时候呢,你就会发现一个问题。你之前写的hello,不见了。因为你所写的这句话,它不是一个追加的动作,它是一个替换的动作,我不管你之前放什么了,那你最后一下说了,你把v do2放进去,OK,那我就以这为主,说老师,那这是问题啊,那你这是问题,那回头要再想加点东西呢,没讲组建的,讲组建了大家就透了,所以说诶,那这呢,删下去,就掩饰这么一个问题,OK。好了,那我们这一小节呢,就到这儿。
我来说两句