00:00
好,同学们,在你明白了GS叉存在的意义之后呢,我们开始详细的说说这GS叉啊,它还有哪些语法规则?我们打开课件,先别看这效果图,先读一些定义相关的东西。GS叉呢,全称叫做javascript叉ML,是react定义的一种类似于叉ML的JS扩展语法。你注意是GS的扩展语法,所以说核心呢,还是GS,只不过扩展了一些新的语法而已。那么跟大家聊一下这个人吧,叉ML,这是好早之前的一种存储和传输数据的一种格式,现在呢,其实有的项目也依然在用,那我们简单说一下啊,叉ML,哎,然后早期是吧,用于存储和什么呢?传输数据,你比如说同学,我想存储一个学生的信息,学生有名字和年龄两个属性,那如果用叉ML呢,你得这么写,首先写student标签,代表你存的不是别的,是学生好,有开始标签就得有结束标签,学生有什么属性啊,名字那就得还得来一个名字,结束的标签叫什么名字呢?Tom。
01:32
人呢,还会有这个年龄,Age标签开始,Age标签结束,多大呀,19岁。啊,你也可以,哎,就这样一直写下去,人的信息就存储下来了,你也可以用这种形式去传输,那么后来啊,逐渐人们就不用这个叉ML了,用什么呢?一个更好的办法,用它去存。叫杰森。同学,你觉不觉得我真正存储的数据其实就是那个Tom和19啊?
02:02
那你觉没觉得结构好像比存储的内容都要多,哎,那所以说后来我们如果要是用杰森去写的话,那就是这样的走人有名字,什么名啊,Tom人还有什么年龄啊,那多大呀,19岁,你不觉得这样存能更方便一点吗?而且不仅仅是存储方便简单,大家要知道啊,GS里边有一个内置的Jason对象。它身上呢,有两个方法特别的好用,一个是用于快速的把J森字符串解析成JS里对应的数组和对象,那个东西叫做pass方法,对吗?那Jason身上还有另外一个就是string,干嘛的呀?用于快速的把一个GS里的数组合对象转成什么呢?哎,Jason字符串。哎,那说存储也简单,也方便你互相转化呢,哎,也比较快,所以说后来呢,这个Jason用的比较多,但也不是说叉ML就完全不用了啊,你比如说呢,微信公众号啊,他的那个服务器和开发者服务器之间打交道,用的就是叉ML,一直还在用着呢,啊,那这就是叉ML好了,那我们回到课件,接下来呢,就不一直去念这些东西了哈,我们用一个案例去把该引出的东西都给它引出来。
03:30
观察一下吧,效果在这其实和刚刚是一样的,同学们还是那个熟悉的hello react,还是那个熟悉的容器,Test里边有HRHR里边bos班,写一下吧,打开代码,我已经提前建立好了文件夹,还有这个文件啊,那往上看一下啊,GSR语法规则容器三个文件,那开始写吧,第一步干嘛来着?创建虚拟DOM cost,名字就叫做v do等于,那怎么写呀?
04:02
是一个多级的结构是吧?哎,咱之前说最好用一个小括号H2对吗?里边包一个什么呀?SPA标签,SPA里边写hello react,那HR呢,是有ID的对吗?走idd叫什么呀?艾特硅谷看一下啊,在这呢,ID at硅谷好了,咱先这么写着啊,虚拟do是不是创建完了呀?对滴,那随后怎么办呢?第二步渲染虚拟do到哪儿?到页面写吧,React DOM render渲染谁呀?We do往哪放呢?Test。好,右键打开页面瞧一眼,嗯,是这样的,右键检查。Test at,硅谷SPA,好,接下来我开始提要求了,逐渐的引出GS叉的语法规则。首先先写好注释,我在这里边肯定要给你总结GS叉语法规则,第一个其实之前就跟大家说了。
05:14
定义虚拟DOM时不要写引号对吧?不再解释了,因为它不是字符串嘛,你写什么引号呢?那接下来大家听我说这个ID呀,艾特硅谷。还有这个内容啊,Hello react,我想去通过读取变量的形式把它读出来,而不是我直接写死。哎,那我就得定义两个变量,专门去存储ID和内容,对吗?随便写一个吧,叫做MY小写的小驼峰,MYID等于艾特硅谷。啊,那我刻意的绕大家一下,这U啊,我大写,这T呀我大写,最后这G呀,我大写。
06:01
啊,那这个呢,就是存储ID的这么一个变量叫MYID,那还得有一个存储标签体内容的呀,这个数据的呀,我就换一个变量吧,叫MY。那这里面存的大家也能猜到了,肯定是hello react e大写,C大写,L大写啊,这个H大写。啊,就随便写,那接下来呢,那就得读出来,那怎么读呢,说老师那不简单呀,ID就写MYID,数据呢,那就写my data。同学,给你三秒钟考虑,你觉得行吗?啊,来我们看一下右键打开。又见检查元素,那你看吧,他肯定是不行的,同学,他没有读取变量对吗?ID就叫MYID内容就是MY,那怎么能让他读这个变量读出来呢?那说一下吧,这就是GS叉里的第二个小规则标签,里边如果你想混着GS的表达式,你得用花括号形式。
07:07
接下来敲MYID,你看连提示都有了啊,那当然了,我不能直接这么写,因为这里边大写字母小写字母它不统一,那我这得来一个点,To lower case是不是都是小写的,那同理,那这个地方呢,剪切走花括号怎么写呀?My data.to lower case才行,保存我们回头瞧一眼ACID也读出来了,内容也读出来了,而且转为小写了,诶,那么GS叉的第二个规则就出来了,同学你说这咱怎么总结呀?就是标签中混入GS表达式十要用花括号A。说老师为什么是花括号呢,同学,这儿呢,咱就别钻牛角尖了,这要让咱设计,没准说哎,咱还设计成这个尖号呢,对吧?哎,那这儿就是人家设计的规则了,好了,这是第二个,那么第三个呢,听我再给你引导啊,同学,我想让那个H2呢有一个样式,而且是我提前写好的一个样式的类名,然后把它应用上去。
08:25
那就写一下呗,同学,当然如果你不嫌麻烦,可以建立一个点CSS文件,然后在这引入对吗?那我这就先简单来了,我就直接写一个style标签,你比如说嗯,有这么一个第2TITLE标题。然后呢,我想让它有一个背景色,背景色让它是橙色,让它有一定的宽度,宽度是200PX,那同学我问你,我想把这个抬头这个样式应用给H2,按照你之前所学的HTML里的写法怎么写呀?是不是写class,诶等于这怎么写呢。
09:06
哎,可能有同学说了,老师得写花花号,不兄弟读GS里的东西,你在写花火号,现在我就是想和那个样式的类名就这东西title头匹配上,所以说呢,嘿,你就直接可以写抬头。啊,我们先看一下效果啊,打开。来同学有效果没,背景色和宽度是不是都应用上了,但是你别觉得你成了控制台,肯定会有一个错误,我们刷新一下啊,来看这儿他说什么呀,一个不被允许的属性class。而且你看啊,他还给你了一个暗示,Did you mean。兄弟,你是不是想写这个呀,然后你写错了,叫class吧,现在还好,要是再老版本一点的react在这就直接报错了,这还行呢,样式我给您正常出来,但是我给你个诶小小的警告,你是不是写错了呀,那同学你也能猜得到了,那就是在GS叉里边,如果你想应用样式的类名,别写class,那写什么呀?
10:10
Class name,注意N是大写的,保存回头瞧一下效果OK了吧,样式正常没报错吧?哎,这两个你先别急啊同学,这是你用的方式不对,这是你没有安装开发者工具,好诶,那就来吧,这是第三个规则,怎么写呀?样式的类名指定不要用class,样式的类名指定不要用class。要用class name OK,那这呢多说一句啊,同学,因为这个class吧,是ES6里边类啊定义的关键字啊,那所以说他在这呢,为了避开那个东西,他写了一个嗯,Class name啊就多聊一句啊,如果呢说哎,老师我这也理解不好,你就简单记吧,人家不让你写class,人让你写class name,好,那再往下看,还有第四个规则,那你仔细听我说啊,同学,我想给死SPA来点样式,哎,我想给死瓣来点样式。
11:17
然后让他的文字呢,是白色的。说老师那简单呀,你再来一个class name,然后在这儿再写一下,不,我想用内联样式去写。内联的样式,也就是说在这里面写什么呢?写style标签,哎,去写,说老师那就写呗,Style等于,然后像我们之前写的一个字符串啊,什么什么什么什么是什么。不行,这样写会有问题,那不信你试一下style color是吧,颜色白色对吗?我正常是不是得这么写呀?Color white白色吗?那行,你现在看一下啊,效果。
12:00
来到这儿直接报错了。啊,他说什么呢,你往这儿看啊,他说这个style,哎,这个属性。不能写字符串,Not a string。你往后看,他说给你个例子,说你可以这样写,你注意观察啊,花括号,花括号margin right,哎,多少,哎后边加个单位,什么em re什么的,或者加都行,然后花括号,花括号结尾。哎,那也就意味着哈,同学你是不能写这种形式,Color white,我知道你正常写HTML的时候啊,你比如说在这写,你当然可以写style啊,你比如说color啊,然后是orange,你当然可以这么写,那这是HTML,但是我们现在写的毕竟不是最原始的HTML,你写的是GS叉里的标签,不允许你这么写,那怎么写呢?同学们,你看一下原始的是不是多组k value6的组合,你比如说我可以指定字体的颜色是橙色,我是不还可以指定它的宽度啊,你比如说宽度是100PX,同学你说正常写标签style,这个标签属性的内容是不是一组KY6,一组KY6,是不是多组的?哎,那既然是多组的,那就得是用什么写呢?你想一下GS里边想表达KY6,哎这种形式,那除了对象你说还有谁呢?所以说这里的style不应该写字符串,你得写双括括号的形式。
13:37
那咱仔细聊一下同学。这两个红色框框起来的画括号,代表你接下来要在这个里边写GS的表达式了,然后最里边的那两个画括号呢,代表你写的不是GS里的函数数组,而是一个对象。好了,那接下来写颜色想改对吗?那color颜色来吧,想写什么颜色呢?是不是白色?你这必须得加上引号,你不加引号,它不是寻找这个变量了吗?对吧?哎,所以说这得加上引号,White白色,那你回头来看字体的颜色是否变了呢?
14:17
哎,OK,那这呢,咱再多说一下同学,由于我这写的是简单属性,我直接写color就可以了,如果你想改的是字体大小,你比如说fontta size这种由多个单词组成的,那么在这个里面呢,你要写小驼峰的形式,你比如说fo size,你得这么写,然后写上字符串,比如说是呃,20PX,那你看一下呃。这是20,那稍微再大一点呢,写一下29,嗯,它就大了一点,OK,这里面要写小驼峰好了,GS叉的第四个规则出来了,怎么说?内联样式,哎,要写或者说要用什么形式写,要用style等于AA,然后key冒号value的形式去写,OK。
15:17
好了,那再往下啊,逐渐的慢慢往上加东西哈,嗯,同学,我想让整个页面里边啊,再来一个输入框,就是在这个位置再来个输入框,那说老师那还不简单呀,来写着input老师,我写完了你瞧啊同学。你就写了个in input框,你看整个页面全都飘红了,为什么呢?啊,同学,咱得这样说啊,GS叉的要求就是。不能有多个跟标签,跟标签只能有一个。哎,那你看你现在有几个跟标签啊,这算是跟标签,这是不是也算是啊,不能有多个,必须有一个,那怎么办。
16:05
那你没办法的办法,你只能是怎么着再把它包一层,外边包一个容器,或者咱不拿音部的举例子,同学,咱拿这个,我还想再来一堆HR,你写两个,你看这不还是报错吗?是吧,那所以说你应该做的就是把这些都剪切走,在这外侧包一个div,然后呢,把它放进来,但是你这一放啊缩进不对了,你调一下,你瞧这是一个HR,那这呢是一个HR。那当然你这样做还有一点点小问题,同学,你觉不觉得这个ID和这个ID一样的呀?哪能出现两个ID一样的元素呢?我们先看看效果怎么样吧,是不是能出来呀,但是有点不标准,它俩ID不一样了吗?那怎么办呀?你这就别to lower kiss了,你这写一个to upper case转成大写的是吧?哎,或者呢,在后边再加一个东西,比如说再加一个哎。
17:03
二做个分隔什么的,那那在这呢,我就先这么写着,OK,呃,也就是说这是第几个规则呀,第五个同学,那叫做标签怎么的,必须只有一个跟标签啊,虚拟DOM必须只有一个跟标签,或者简单说吧,只有一个跟标签走着还有。一些需求,那来把刚才呀,咱没实现那个再给它加上,就是说在这儿呢,想来一个input框,那我想写个input框,那怎么办?老师,那简单在这儿input框走不行,又飘红了,为什么?你看这飘红了吗。原因很简单,这是div开始标签,这是div结束标签,这是HR开始HR结束,HR开始HR结束由于你的input标签没有闭合,所以说导致的问题两种方式让它闭合,一,你再写一个结束的input标签,或者是这个标签明显没有标签体内容,那您就让他字结束好了呀。
18:12
保存回头OK,东西是正常的,来补上,这是第六个要求,标签必须闭合好,那还有同学就是关于啊,它这个标签里边能写什么东西。哎,说老师那写的不都是HTML标签吗?同学你要注意啊,你的措辞要严谨,我现在编写的这些东西,你可不能说它是HTML标签哟,谁家HTML标签里边能写这呀?对吧?所以说写的不是HTML标签,你所写的是GS叉里边的标签,但是这些标签会被转为HTML标签,对吗?你写的是GS叉里的div,那是不是会转成HTML里的div元素呀?好,那你接着往下看,同学,我写这么一个标签啊,叫做good啊,God good god,同学,我想问一下,你说HTML里边有good标签吗?好像没听过,没有吧?
19:29
那我们先看一下效果吧,右键打开同学123能不能出来呀,能,那我们右键审查一下元素看看它,诶老师这不挺正常的吗?我可以写一个good这个标签啊。同学是这样的。你写了good标签,写了内容,它也呈现了,这也能发现有good标签不代表你这么写就是标准的是吧?同学,其实你打开HTML文档,你在这儿就算直接写个456,你说东西是不是其实都能出来,但是这么写对吗?它不对。
20:07
啊,所以说你这别瞎写,说老师那我瞎写不也能出来吗?哎哟喂,你看一下控制台吧,不对了。你看他报的是什么错误啊,同学,他说你这个标签good是一个不被允许的,在浏览器里边。就是人家react把你所写的JS叉标签啊,往HTML标签去转化的时候呀,他发现你的标签如果要是小写字母开头的,他就会把这个东西转为HTML里的同名标签,你比如说啊同学举个例子,你写的是小写的SPA,诶,那它就对应成HTML里的span标签,如果你写的是H1,诶,那到HTML里呢,就对应成HTML里的H1,是不是都是小写的呀,一会儿咱再研究大写的,咱先说小写的啊,是你可以写小写的,但是您别瞎写呀,你写一顾的人家不认识东西,虽说能出来这么大的警告在这儿呢。
21:07
你再往后读,他说什么呢?如果呀,你想渲染的是一个react,来注意这词读一遍吧,叫做component,这个词翻译过来呢,是组建的意思,Component。他的提示是兄弟,我发现不对呀,你写了一个good标签,浏览器里边根本没这东西,我拿着你这个good标签去跟HTML里边同名元素去对的话,我对不上啊。啊,没这东西,然后他往后又说了,说你是不是想定义一个组件呀。如果你想定义的是组件的话,那么你的开头首字母应该大写。同学,现在是因为你错误的写了一个不存在的标签,而且还是小写字母开头了,人家只要发现小写字母就直接二话不说去HTML里面寻找同名标签,寻找不到那咋办?那就报错,但是他诶预判了一下,他可能觉得兄弟你好像是,哎写错了这个首字母了,你是不是想大写呀?
22:14
那你大写,我就给你渲染这个组件,是我们还没有去讲到组件这个概念,但是咱先读一下人家给咱们的这个预判,OK啊说老师那我明白了,就是写GS叉标签的时候,可以写小写字母的这些,那但是尽量别瞎写,HTML里面有啥咱就写啥,对。好,那所以说呢,咱先总结一下这个小规律啊,第七个啊,叫做关于标签首字母,诶啊不是瘦子啊,首字母走,那么第一个走咋总结呢。若小写字母开头,那怎么办呀?逗号继续说,则将该标签转为HTML中。
23:07
同名元素。你写的是死瓣标签,我就给你转成HTML里的死瓣元素,好,再补一句。那怎么的?若ATM中无同名元素,那就报错呗,若atml中无同名元素,或者这么说无该标签?该标签对应的。同名元素则报错。好,那小写字母咱就聊到这儿,咱再说说大写字母来吧,尝试着把这个good的G给它改成大写a good good。好了,我们再看看效果,来到这儿好了,页面连东西都不出了,控制台上有一个非常明显的错误,他说good。
24:07
Is not DeFined,他说你的good没有定义。为什么呢?哼,因为你真的没有定义啊,同学,我问一下啊,你这个固标签,你看那个语法的高亮啊,它跟这些都不一样了,变成了绿色的,那咱就说说这首字母大写它能怎么着?在这儿整理第二条,第二若大写字母开头,那怎么办呀?React就去渲染对应的组件。若组件没有定义,则报错,你现在就是这种场景。你看你写的是不是大写字母,开头OK,他会拿着good去寻找HTML中与之同名的元素吗?绝对不可能,因为HTML标签那都是小写的,所以说人家不会去给你对应的react,直接就找来good组件,你在哪呢?找了半天发现没有,那就报了一个good is not DeFined这么一个错误。
25:19
说老师,那你定义一个呗,同学,咱还没有讲到那一步呢,去定义react中的组件,哎,那所以说讲到这儿呢,GS叉里边的核心几个小规则我就给大家说完了,那希望大家下去呢,哎,多练一下这个案例,熟悉一下GS叉里的这些规范,我知道大家刚开始写这儿的时候,可能会稍微哎呀有点小难度,但是写习惯了也一样,就等到后期你写这些东西,那就是呼吸般自然了,OK,那我再多聊一句,同学,你说这个div咱包的是不是有点很不情愿呢?其实我明明不想写这个结构,但是我要不写,他说我诶跟标签有多个,他给我报错,那你说我是不是不得不包这么一个东西,那可能有同学说了,老师,那你这个以后写的话,那好像我觉得写react好像无缘无故我就会包裹很多的div啊,这些无用的层级啊。
26:20
那表面上现在来看是的,后期我们有解决办法,但是谁也不能一口吃个胖子,咱先这么练习着,随后我再告诉你,其实也非常简单,OK,好了,那这一小节呢,我们听一下。
我来说两句