00:00
好了,各位说完了public文件夹之后呢,我们再加把劲儿,把src里的文件呀也给他说一说,同学不用紧张,文件虽然多了一点啊,但是呢,不是说每一个东西我们都用,你就比如说同学一会我写代码的时候,肯定manifest.jason,我要删掉它,我也不做应用夹壳嘛,而且要真做夹壳的话,就你写这点配置脚手架帮咱写的也不够用嘛,是吧,但是咱了解一下啊,知道这东西是干嘛的,以后看到这文件咱不慌啊,Manifest Jason,诶,曾经有一个老师给我讲过是吧,那东西是做应用加壳的,那如果说里边具体的规则呢,那如果说你真的是需要应用夹壳这个技术,我们找到官方文档嘛,我们看一下它那些规则嘛,自己可以配置一下,对不对,还像包括这个什么爬虫,什么协议规则文件对吧?哎,知道这文件是干嘛的就行啊,折叠起来来吧,加把劲我们去看src里的东西,首先呢,同学们,我们看前两个人啊,app.gs和app.css。
01:00
那我说一下这个app.js呀,它是创建了一个组件,那个组件就叫做APP,所以说人家叫app.js那么这个app.css是什么呢?就是APP这个组件的样式都在这里呢,啊说老师那我看看吧,样式文件没什么可看的是吧,都是一些,哎,这个CSS选择器,咱们看看这个吧,app.js。其实如果你那打开是展开的,你不用看里边详细的东西,你看class得写成class name不用看这你把它收起来。收起来,然后你看这是不是用函数定义的一个组件APP,那函数定义的组件是不是有return的返回值,那你看是不是有一个return的返回值,哎,所以说同学它就是定义了一个APP这个组件,没干别的事儿,说老师那他没渲染呀,页面是怎么出来东西的呀,你别急呀,APP这个组件人家是定义了,但是人家好像在这儿没有看到渲染,但你注意这儿啊,人家是不是用ES6的模块化语法把这东西给暴露出去了呀,而且是个默认暴露,对不对,好啊,那关掉,那老师那明白了,这APP呢就是一个组件啊,这点CSS呢,就是这个组件的样式文件,是的,那我再多说一句,为什么它要给你写好一个组件叫APP,这个组件为什么不叫DEMO呢?为什么不叫T呢?为什么偏要叫APP呢?是吧,那我说一下啊,同学,打开public,打开index.html,这里边写的东西我承认真的是很多的,考虑的事也挺详细的,但是我们更关注的就是你那个节点。
02:34
点到底有没有你之前的东西写的可好了,没有节点,那我告诉你同学,你的组件根本放不到页面上去,OK啊,说老师,那你说说吧,听我说啊,同学这个呢,是页面里的一个节点,就相当于咱们之前在写代码的时候,里边的那个谁呢?Test啊,那这回不叫test了,叫做root,然后以后啊,写代码的时候,同学你注意看,是这么一个逻辑,我只把一个组件放到这个容器里面,我不会放第二个,因为同学们也知道,就这个语法,React,而小写的e react dom.render它是一个追加的动作吗?不是,你如果之前往root里边放了一个东西,你要再写一行往里边放东西,之前的会被顶掉,对吗?所以说同学以后我只往root这个容器里边放一个组件。
03:28
这个组件不是别人,就是刚才他为你写好的那个APP,你说老师那不行啊,我自己还写一些其他的功能呢,我写左侧导航组件,我写上方的搜索组件,那你就把你的左侧导航组件写在这儿。作为APP的子组件,那你就把你上方的搜索组件写在这儿,也作为APP的子组件,也就是说以后用react脚手架进行开发的时候,React到点render那个方法只执行一次,只是把APP放到这个节点里,那么APP放到节点里了,你说APP的子组件顺带着是不是也来了呀?哎,所以说为什么他非要给你写好一个APP,这回明白了吧,然后再说这个文件,app.test.js这个文件呢,是用于做测试的,而且不测试别人专门用于测试APP的,那这个文件呢,我就直接跟大家说,我们几乎不用,因为我们也不用进行什么单独的测试。
04:29
我们直接运行看效果对不对,是不是就可以了呢?哎,所以说呢,这个文件我们很少用啊,但你知道它是做测试的就可以了,来这啥意思呢?同学,又是一个样式文件对吗?app.css代表着它就是APP组件的样式,不是别人的样式啊,只是APP的,那你告诉我,同学你猜你说index.css它有可能是什么样式呢?同学你应该能想到,如果说是DEMO组件的样式,那得叫demo.css对吧,那你说现在它叫index,哎,那就是证明什么呢?你用我用大家都用的,或者说一些通用性的样式就放在这个里了,Index里面啊,其实啊,同学你还可以换一种方式,换一种方式不放在这儿。
05:18
那我放在哪呢?瞧着我可以在public里边新建个文件夹叫CSS,哎,然后呢,大家注意,我把这个index.css啊,我挪到这里边去,哎,点击移动挪过去了吧,然后我在页面里边通过link这种形式,哎,当前路径下的CSS下的in带CSS,我也可以去引入这个文件,OK,说老师,那我试试吧,别急,同学,你刚才是不是动了src里的index.css那这个index.js同学注意啊,它可不是index组件,根本不是,这个index.js叫入口文件,学过webpa的我们都知道,Webpack想干活是不得有入口文件,那你看入口文件里边它干嘛了啊同学,打开我们把这些注释呢给它删掉,你看啊,首先它是不是引入了react核心。
06:18
酷。然后是不是引入了react DOM,然后你看这同学注意它是不是引入了index.css,那你说这干嘛呢,引入样式呢,那你那个文件都删了,你觉不觉得第三行你也得删掉啊,你要是不删掉的话,一会儿就会报错啊,说老师那你不删,我想看看那个错误可以呀,来接下来呢,我运行项目young start开启。稍等他会打开浏览器的,一定会有错误的,嗯,看看他报什么错误了,咱也看看这脚手架怎么报错是吧?打开同学他说什么呢?模块没有找到,我不能够解析index.css因为没这文件,那所以说呢,你应该回到代码当中,把不应该引入的这个东西呢给它删掉,你再保存,同学回到页面啊,说老师啊,这也不对,说index.cs还是没有找见,那再检查一下啊,应该是文件删了,但是这块引入我确实也是删了,对吧?那如果你要是也遇到这个情况了,那来,那咱就这样,呃,首先检查一下这引入的对不对,CSS下的inexs CSS确实也没问题是吧?那怎么办呢?如果你是对文件进行了删除的动作呀,你可以把应用停一下,然后再重新开启这个应用啊,你再试一下刚才报的错误,你看这儿啊,给你看一下在这呢啊,他是不是说还是没有办法找到这个index.css啊,但是我。
07:46
我问大家,我是不是确实已经把这个文件都已经引入也删了,文件也删了吧,哎,好了,给这儿呢,给它关掉,来到这儿同学你看东西其实是正常的,哎,就有的时候呢,他可能一下子没有反应过来,你把应用停掉,你再重新开启就可以啊,正好在这出现这个问题了,那以后如果你遇到这个问题也别急啊,好了,同学,那所以说我也可以通过这种形式呢,去引入这个样式,但是啊,我不想破坏它这种结构,所以说接下来呢,我把index呢,再给它拿回来来移动,然后在这儿呢,我也给你删下去,然后在这个里边,这个引入是不是也得给它干掉啊,好嘞,那这个时候就得回到index.js里边,那在这儿呢,我得进行一个撤销的动作,是不是还得引入这个样式啊,哎,那这回呢,咱们再打开这个摁住CTRL键,然后一点就可以了啊走诶打开一下啊,看看效果也是正常的,对吧,所以说那种通用性的样式啊,你直接写在这儿啊,写一个index.css也行,或者说呢,你最好写在public里边建立一个。
08:46
DSS通过link这种形式引入,OK,嗯,这就看你编码习惯,同学我就叫做哈哈点CSS是不是也行?哎,好了啊,说老师那没看完呢,我看这入口文件里都做什么了,同学,入口文件对于咱们来说可是挺重要的啊,之前是你自己在HTML页面里边引入react核心库对吗?现在是在入口文件里边引入react核心库,之前是你自己在页面里边引入react DOM,那这回呢,是在入口文件里边引入,如果你有样式,那你就把样式也引入,然后你注意了,重点来了,同学,他引入了谁?
09:25
APP组件对吗?哎,组件是定义在这儿的,但是没有渲染在这呢,引入了一下,然后说老师那这行是干嘛的呢?看不懂是吧,那就给他注掉,省得他影响咱们主要说老师他这是干嘛的呢?也没用,给他注掉一会儿咱再说啊,然后呢,同学我把这一堆东西呢,再给你精简一点,他这么写是啥意思呢?同学我要这么写,看你能不能懂啊,我给你毁成一行。到这儿。这写好了,同学这能不能看懂了呢?你觉不觉得这就是曾经咱们在HTML页面里边做的事儿,引入react核心库,引入react的盗目,如果有样式,再来一个样式,引入那个APP组件引入之后干嘛呀?同学你说第七行在哪干嘛呢?是不是在渲染那个APP呀,往哪渲染呀,是不是跟咱之前的写法是一样的呀,只不过不叫T了,叫什么wrote,那你可能说老师那这个index.gs。
10:28
它怎么就能找得到index.html里边的那个肉容器呢?说老师这是怎么办到的呢?这都是react官方脚手架底层写好的,我们不需要任何的操作,直接在这找就可以了,保存你看啊,页面是依然能出现效果的,打开没什么问题,说老师那你刚才删下去那一堆是干嘛的呢?首先我一五一十的把它都撤回来,首先说说这为什么APP的外侧要包裹一个这个东西。
11:03
Strict叫严格的mode叫模式,说老师,那这个是不是跟我们之前学的严格模式,诶同学跟ES5里边的严格模式不发生啥关系,我说一下APP的外侧为什么要包裹react.strict no啊strict mode这个东西包裹之后呢,它能检查一下你APP以及APP里边所有子组件写的东西是否合理,你比如说同学,如果你包裹了react.strict mode,那么如果你还写了那种字符串类型的ref,等于比如说写出了这种代码,他马上就给你警告了,说哥们你写的不对了,你那ref怎么能写字符串类型的ref呢?那你这不太对呀,这东西人家都说了嘛,要弃用了,所以说你包裹了这个东西之后呢,能帮你检查一些代码里边不太合理的地方啊,告诉你这么写不对啊,那么写不对,因为大家也能感受到。
12:03
对egg的这些API啊,经常出现这种情况,就用着用着说以后不推荐了啊,再给你提出来一个新的,所以说有的时候呢,你自己很难把控,你就可以借助在APP的外侧包裹一个这个东西,哎,我们进行检查,他帮我检查,他会告诉你,你哪儿写的可能有点小瑕疵啊,或者怎样好来再往下说,老师,那这个是干嘛的呢?logo.svg,其实它也是一个图片,但是如果你在这儿看吧,它就是代码这种形式,我建议你呢,这样看,在资源管理器里打开右键打开方式选择chome浏览器或者任何一个浏览器都行啊,你打开之后呢,其实它就是一个logo图,就刚才你看到页面上刷刷在那转的那个图就是它。哎,就是它说老师,那它是在哪用上的呢?你找到APP组件发没发现这引入这个图片了,哎,引入这个logo了,说老师图片还能这么引入呢?是的,记不记得咱们在学习webpa的时候,同学咱说了一句话叫一切皆模块,对不?图片当然也可以作为诶一个拈去引入,好,那这就是logo这张图啊,那来咱再往下看,说老师这个东西你还没跟我说呢,这是干嘛的,而且这你看还调用了呢,那同学你看一下呗,它是不是在引入,引入什么当前路径下的report啊,Web vi.js,那咱就说说这个文件是干嘛的,同学说一下啊,这个文件呢,是用于记录页面上的性能的,就你这个页面,哎,渲染了出来了,那它性能怎么样啊,对吧,你可以做一些分析,但并不是说你写了这个点GS就能分析了这个点G。
13:52
S里边你得进行很多详细的配置,打开这个文件,它里边呢用了一个库叫做web VI啊,用这个库呢,实现页面上的一些性能的监测,说老师呢,这个同学这个东西要展开聊啊,它很庞大的,你得学很多它那里边的一些配置,所以说我们了解即可知道这个文件用于记录页面性能的,而且里边用上了这个库啊就可以了啊,那还有最后一个这个老师他是干嘛的呢?说一下这个东西用于做应用的整体测试的啊,或者说呢,某一个模块他们一个一个拼在一起,一个一个的单元测试也能用它去做,就简单记同学这个东西是用于做组件测试的,那这里边呢,它也得用一个第三方的库去支持,叫做just DOM啊,那这个just DOM呢,也有一些详细的配置规则,OK,那我们在这儿呢,也不做什么,哎,详细的解释,因为我们也不需要。
14:52
他去做测试,OK,好,所以说你打开课件啊,同学们,我们已经呢,把这个里边的文件以及文件夹给大家也做好了一个总结是吧,那你发现同学们在这么多的文件和文件夹里边,我把三个人呢标红了,那分别是应用主界面,然后是APP组件,然后是入口文件,那么接下来呢,给大家分析一波,就这些文件执行的顺序是怎样的,好吧,哎,咱分析一下页面上是怎么能出现那个logo在那转的是吧?哎,这会儿大家得知道一下来,那这样我关掉啊同学是这样的,就你整个项目在启动的时候呀,你听我说首先来到了src下的index.js,然后呢,就引入了react核心库,然后就引入了react DOM,就引入了样式,又引入了APP组件啊,那这块咱就不说了啊,引入一个什么做测试的。
15:52
然后就触发了react do.render其实真正渲染的是谁呀?APP咱说了外边包着那两个人呢,是为了帮你做检查的是吧,也其实也挺鸡肋的啊,也没什么太大用好了,然后呢就渲染了,然后呢,注意这写了root,它就自动的去public里边找index.html去找这个里边的root。
16:17
那这么一个节点,如果说你把这RO改成二,那同学啊,你看吧,来到页面,你看效果肯定出不来了,他说什么呢?它给container is not a DOM element,之前你就看过这个错误同学,什么意思呢?你给我指定的那个root,它不是一个容器啊,那所以说就得需要你在入口文件里边,这也得改成root,二不是说不能改,其实是可以的,是吧,来刷新一下走是不是东西是正常的啊,好了,关掉,那我们一般呢,就用这个root,哎,撤回来,那这呢也给它撤回来,说老师那这个index的GS也没有引入到这个index.html当中了,那它俩之间是怎么发生关系的呢?那就得靠。
17:03
React里边写的那个webpa配置了,人家就写死的,去这里边找index,所以说同学index.html你觉得这名能改吗?不能,你要改成INDEX2,那你自己去看一下效果,同学直接就报错了,你看应用就起不来了,所以说这儿呢,不要随便改名啊,走,但是至于说这个节点,其实你是可以改的,对吧,你换了名的,这也对应着换名不就得了吗?好,然后呢,同学这些行代码执行完了,我想问的是APP那个组件是不是就跑到页面上去了,OK,那APP组件就在这儿呢,就展示到页面上了,然后它的样式呢,你注意是在组件里边,它引入了自己的样式,然后样式呢也就生效了。至于说这些东西啊,什么LOGO192512 manifest Jason爬重协议文件,然后呢,性能记录,这些都是周边附属的东西,你完全可以在刚开始编写应用的时候把这些人全都删掉,等你最后说如果哎,我要应用夹壳,你再。
18:03
再重新写manifest.jason我要配置爬虫协议,你再单独写这个robots.tst,我要做整体的测试,你再重新写这个set啊,Test,对吧?哎,所以说这会呢,大家要知道,你不用没有必要说你自己在编写应用的时候,同学们你把这些东西都带着,你不烦吗?对吧?好,那这一小节呢,我们停一下。
我来说两句