00:00
好了,各位介绍完了public文件夹,还有src文件夹之后啊,我们就得自己动手写写代码了,那自己写代码的时候呢,同学我们不用去写这么多的东西,明白不?回到课件当中,其实我们需要写的就三个文件,主界面文件,放在public里,Src里的APP,所有应用的外壳组件,index.js,整个应用的入口文件,就这三个我们需要写,说老师其他的呢,那你像这种图标类的,你需要,那你就画一个图标放进去呗,需要夹壳,你再把manifest Jason再配好呗,对吧?所以说回到代码当中,脚手架考虑的比较多,但是我们用不上那么多,OK,还有就是像index.html这种文件,同学其实你觉不觉得红色框里的东西我也没有必要写,我也不做壳,对吧,我也不考虑说这个网页添加到手机屏幕之后用那个图标,而且这东西咱还说了兼容性也不怎么着对吧,所以说不用写的这么复杂,脚手架呢,它。
01:00
为了体现出官方搭建的完整性,当然他考虑的事情得多了呀啊好了,关掉,那么接下来我做一个事情啊,这俩文件夹收起来,同学,这选项卡干嘛的呀?Vs code里边用于进行get操作的选项卡,对吗?这里边能让你方便的进行版本控制,那由于这个课讲完了之后呢,我不是放在线上的仓库里,代码是以压缩包的形式呢给大家,所以说在这儿呢,呃,为了避免这个麻烦哈,我就把这个GI呢就给它删掉了啊那来最小化。回到我们的这个脚手架文件夹当中,我把这个文件和这个文件删掉,它是不是就不是一个giate仓库了?哎,如果有了这两个文件,它是一个合法的giate仓库,那如果我把它删掉呢,它就不是giate仓库了,就是一个普通的工程文件,OK,正常在公司干开发呀,同学,你需要进行版本控制用giate,哎,但是我们这儿呢,诶为了方便,所以说我就不进行版本控制了,如果说想了解版本控制,哎,说老师想详细学习这个giate的小伙伴呢,可以看一下我们鼓励学院的giate相关的讲解视频,OK,好,那给这个关掉,回到这儿,诶只是想让你更轻松一点,诶,它不是getate仓库了,就有这个提示了,不用管,回到目录里边来吧,同学啊,我想这样随着我讲呢,代码肯定得写出很多的版本,我想把每一个版本都给大家留下,所以说呢,我新建一个文件夹,这个文件夹的编号呢,叫做零一下划线,我写这么一个啊,叫做脚手架。
02:32
自带文件,哎,就是脚手架自动给我带的public和src,那也就是说这个这个这两个我都要放在这个里边走移动好了啊同学给你放在这里了,如果想了解一下说脚手架自带的那些文件都是干嘛的呀?你可以打开这些文件看我给大家写的注释好吗?哎,折叠折叠,那我问大家一个问题没。同学,你说现在这个应用还能不能启动了呢?是吧,老师有文件还没给我说呢,package.jason啊,还有这个read me,同学,这些知识呢,你应该会的,那我简单说一下package.jason包的说明文件,对吧?Read me干嘛的呀?哎,就整个这个仓库的一个说明文档啊,那这里的东西呢,我们全选删掉,我们不要啊,那在这里边写什么呢?比如说我在讲路由啊,在讲一些其他知识的时候呀,我把一些笔记给大家写在这儿,好吧?啊,这样点lo呢,也不多说了,其实就是一样的一个缓存文件,能让你下一次再下载这些包的时候呢,速度更快啊,这是在包和包管理器我们去讲解的知识之前讲的啊,那其实你把它删掉也无所谓的,也可以,但是我不想删了,因为这个文件如果我删掉,在座的各位拿到我的代码之后,你进行安装依赖的时候,可能会速度比较慢,所以说我就把这个呢给它留下好吧,关掉好了,这也关掉,同学我问一下你说现在这个案例能启动吗?
03:57
试一下,MM,走,咱看看这脚手架还能不能启动了啊,稍等。
04:07
同学报错了吧,啊,他报什么错误呢?往上看,他说他找不到这个东西是吧,一些固定的文件你没写,哎,那咱自己写一写啊,接下来咱写个什么案例呢?同学,我想在页面上输出一句话叫做hello react。咱们之前啊,在学习这个最最基础的语法的时候,在这儿第一个是不是就写了一个hello react呀,哎,那现在咱们再写一个hello react,之前啊写的太简单了,同学你看啊,你打开一下。你之前啊,是这么写的,同学是不是全是在HTML文件里边创建虚拟盗啥的写的呀,现在可不是用这种方式了,咱用脚手架,咱标准一点哈,回到代码当中,同学,首先第一步两个文件夹你必须给人家创建好了public啊,一个叫什么呢?Src同学问一下,你觉得这俩文件能改名吗?坚决不能改名啊,不能改,改了脚手架就找不见了是吧?嗯,好,那public里面有什么呀?叫做index.html,好,那这里面写什么呢?肯定是一些固定的结构啊,这呢,咱给它删掉,叫做react脚手架改个名,不管你写什么东西,有一个东西必须得给它写上,一定不能丢,就是这个root是吧?主页面里边得有个节点,得放组件呀,啊好了,关掉,那public呢就写完了,说老师人家还有图标呢,那也行,咱把那图标呢,给它拿过来对吧,那把这句话给它复制过来。
05:39
走,这不就是配图标的吗?复制放在这儿啊,那你得把图标也拿过来呀,咱还用咱上硅谷这logo啊,那所以说是复制一份,然后来到public里边把它粘过来是不是可以了呢?折叠一就折叠起来了,诶图标到位了,那这呢,我自己写好的主页面啊,OK,东西全都关掉,那再来src里写什么呀?同学,index.js干嘛的,应用的入口那还得有一个app.js,为什么这个A大写,因为APP是一个组件对吧?哎,首字母大写的都是组件,好了,那来吧,同学,那说说入口文件里都干嘛呀,说老师我现在启动这个应用,它能不能行呢?我们试试啊来,回到终端里边。
06:28
来到这儿停一下,走n PM star,看看能不能启动啊,咱试试,反正这三个最为核心的东西我都写好了,index.atml APP是吧?还有刚才那个入口文件看一下其实能启动的,对吧?同学们来到控制台,你发现放大一点什么输出也没有,页面什么东西也没有,那就对了,因为啊,你的入口文件里边什么也没写,你的APP里边也没有去定义一个,哎,所有这个组件的那个外壳组件,那个APP,对吧?没组件也没引入,也没渲染,那页面当然不出东西了,说老师那要这样呢,我在入口文件里,我来个colo艾符,那你自己瞧呗。
07:11
刷新一下,诶就有这艾特服务说老师为什么有的时候你还得自己手动刷新一下呢,它不是得自动刷新吗?啊有的时候呢,它可能卡,你自己就刷一下就得了,哎,那我们把浏览器啊给它关掉好,那在这儿呢,同学,如果你执行了npm start或者压start呀,你的那个3000那个服务器就一直开启呢,就是用于支撑你整个应用运行的那个内置的一个服务器啊,它一直在开启的状态,然后是借助谁开的呢?跟大家说一下,叫做web pack-DV server来借助这个人开的啊好了,那我们把它停一下啊,给这个终端的关掉,来接下来写我们自己的东西,同学,接下来我写的东西就比较主要了,就都是干货了,不像脚手架自带的东西那么多一堆是吧,然后还不怎么用,而且有的文件啊,同学你觉不觉得其实他写的都不到位,你打开src同学应用加壳啊,咱就比如说manyifest.jason就写这么点就能加壳了呀,远远不够是吧,哎,只是。
08:11
只给你搭建好了这个壳子啊,关掉,哎,反正我们不用折叠起来,来吧,同学说说这里边都写啥?Index里边呢,不用再动什么了,就是一个固定的一个哎结构,HTML最基本的结构,再加一个容器进来啊,然后关掉,咱主要写的是谁呢?同学,一个是APP,一个是index啊那刚才我说了,我想在页面上是不是创建一个hello react这个组件呀?啊来,先从index开始写起,写啊走首先呢,同学你一定要把接下来的环节记住啊同学你在用什么呀,React,所以说在入口文件里边第一件事叫做引入react核心库import,引入react,然后呢,From说老师呢,我没安装react呀,安了脚手架帮你安好了,直接写啊REC就可以了,React,哎,好,那引入完核心库之后呢,那再写叫做引入react do。
09:12
啊,这是干嘛的呀,我就不说了是吧?哎,用于做渲染的import,引入那名字呢,起一个react,然后呢是DOM from,我就直接敲一个do,它就出来了,React DOM。啊,同学,我问一下这俩名字能不能换呢?其实完全可以换,你管这个叫做DEMO,你管这个叫做test,完全可以换,大家还记得吧,ES6模块化语法这个模块叫什么名字,如果你用默认暴露的形式,你暴露的在这是不是可以直接进行改啊,但是我们一般不改,这呢就叫做react,这叫做react do,那我问一下同学这两个人啊,为什么是灰色的呢?你发现了不亮,那是因为引入了之后呢,你没有去用啊好了,那再执行一步,叫做渲染APP组件到哪呢?页面啊,咱不是说了吗?我只把一个组件进行react do.render这个操作就是那个最外侧的APP,其他的组件你想写什么都得作为APP的子组件,对不对?那所以说写好了react,然后呢,Do啊,然后点re render,那渲染谁呢,渲染谁呀,对吧,然后往哪渲染呢?Did。
10:26
定得跟这里的容器进行匹配,叫做root啊,回到这儿走,OK了吧,周老师,不对,APP还没引入呢,是呗,所以说在这儿还得再写,叫做引入APP组件,那就引入吧,Import名字最好还叫APP from当前路径下的APP啊,当然你可以写上二点,GS。啊,你不写也行,这个后缀是可以省略的啊,点GS是可以省略的,那就这样说,老师点cssi这可就不能省略了啊哎,只有点GS才能省略好,写完了同学以后咱写入口文件啊,基本上就是这么多套路啊,固定的这几个小步骤好了,写完了之后呢,我们再写APP,同学APP就简单了呀啊写好一个注释叫做创建,我这么写外壳组件,啥叫外壳组件?它里边囊括着所有其他的组件APP啊走吧同学,怎么创建组件呀,两种方式,一个叫函数式,一个叫做类式组件,我们用类式组件,所以说写class名字写好叫APP,然后得是不是继承呀,同学,问题来了,继承谁呀?得继承react.component,对吗?
11:47
哎,那但是现在我问一下你有这个react.component,吗?没有,那你就得引入react,诶,From react引入了吧,好,引入了之后,哎,就可以写了点component就不会报错了,那再走,里边必须得写什么呢?Render同学想学习脚手架必须得建立在啊,你把之前的知识都学懂了,就之前咱在HTML里面写的那些语法啊,那些规则是吧?啊,Re啊,Return啊,Return,那么返回什么呢?返回一个多级的结构吧,走div里边开始放东西,老师你不是想写hello react吗?那就这么写呗,REC act对吧?老师这不挺好的吗?
12:35
行,你先这么写着啊,先这么写着,同学,我问一下啊,APP为什么是灰色的,因为你没用对吧,那你得把它用一下,那就得aport def for默认暴露,说老师那我这就不想默认暴露,我就想分别暴露行不行呢?行,但是因为你这个app.gs就是创建一个APP组件,然后把它暴露出去,那为什么还用分别暴露呢?所以说一般我们就用默认暴露了,OK,如果说你这喜欢用分别暴露或者统一暴露都可以的同学,好吧,诶,交出去了啊,写好一个注释叫做暴露APP组件,那你看你定义好了,你这一暴露,那同学,所以说人家这儿是不是就能引入了呀,如果你这忘了暴露,那就不行了,是吧?哎,行啊,定义完这组件了,诶,OK,也用上了,行,这些东西都写好了,那能不能运行呢?我们试试哈,来输入n PM start走。
13:36
好,启动了,看看他报不报错啊,诶同学注意观察页面上是不是输出了hello react,那我们打开控制台看看有没有什么错误呢?也没有,同学你记不记得之前这儿一直有一个警告。哎,可能有同学忘了吧,来我给你打开看一下啊,同学,咱在这种形式的学习的时候啊,打开这儿走,你切到控制台发没发现有这警告,哎,说你正在用一个浏览器里边的这个翻译的Bible,这不太对,可能效率有点低,那你看现在切到脚手架这个问题是不是没了,哎,好,哎,所以说同学你得把刚才我所写的这几个文件呢,给它记住啊,Index里的套路,还有APP里的,但是这些代码呢,还能再优化啊,这么写稍微有点不太合理,同学,一般我们不在APP里边直接写hello react,你得建立一个组件,那个组件叫hello啊,你得建立一个hello组件,然后把hello组件放在这儿,OK啊,还有就是这儿呢,你写的也有点不合理,这么写呢,其实有点麻烦啊,那我们大家说一下啊,来给这个呢,最小化这个脚手架我先不停了啊同学停了一会儿还得重启,挺浪费时间的啊,那给这个呢,关掉同学,其实它有这种写法,你注意观察啊,同学你说我这是不是引入了react。
14:50
它的这个对象,然后react.component呀,你说我这么写什么意思呢?看着cost结构赋值,从react身上获取component,那你说我这是不是就可以点了呀,是不就可以这么写了呀。
15:05
对吧,那也就是说在这儿提前取好了,省着这再点了,那能不能用呢?看一下按住CTRL打开。看是不是也可以用,控制台也开好是不是也没问题啊,好,说老师,那就这么写呗,不,我说的不是这意思,来把这删掉,它还可以这么写,在这儿来一逗号花括号,请问这是什么意思?首先看看能不能用啊,来刷新是不是没问题,说老师那这是怎么个写法呢?好像我能猜到了,这就是引入的时候呢,你写了解构赋值,兄弟,这可不对,你这么说呀,就把问题给说的不对了呀。啊,那你看着啊,你看着我给大家做一个测试啊,什么测试呢?看着啊,我把APP里的APP我不动,这样啊,我把index里边所有的东西都注掉,同学,这是入口文件呀,入口文件里的东西如果都被注掉了,那页面肯定刷新,是不是什么东西都没有了呀,好,回来同学,我接下来呢,我这么写,我新建一个文件啊,叫做module.js啊,是一个模块,然后呢,我就模拟刚才这个里边的这种形式啊,你注意看,你注意看啊走我呢定义一个react对象,React这是我自己定义的啊,它是一个对象,里边有A是一,有B呢是二,好然后呢,我再定义一个类啊,你比如说呢,这个类就叫做component,走类里边我什也什么也不写啊呃,就定义一个类,然后你注意看了react。
16:42
点component等于component,或者说啊,我写的更直接一点,直接把这个东西呢,给它拿到这儿,对吧,OK。好,同学,你说我要这么写的话,最终我再补一句aport default是不是默认暴露aut啊,Port谁呢?React同学,我想问一下这个文件干嘛了,定义了一个react对象,给react对象身上追加了一个属性叫做component,它的值呢,是一个类,对吧?同学,那你说react身上现在是不是有三个属性,分别是AB,还有这个component,对吗?好了,你在index里边呢,你开始进行引入来,走上import,引入react,走,这回就别引入人家写那个了,引入咱自己写那个module.js啊同学们,我想问一下你现在是不是把react引入了呀?那接下来呢,你colo输出这个react。
17:39
我问你,你能看到什么呢?我们回到页面里瞄一眼啊,来刷新,走,同学看这啊。是不是有A,是不是有B,是不是有component,那如果说你想用那个component,那你现在得怎么用呢?你是不是得new一个react.component呀,是不是得这么写呀。
18:00
对吧,说老师,那我想提前取好,那就像之前写的,你是不是可以这样写结构赋值,从react的身上拿到谁呢?Component,然后在这就不用这么写了,就new一个component,对吗?我们看一下这个效果啊,Log输出一下new的这个component,回到页面当中刷新走,同学,是不是一个component的实例对象对吧?好,那同学我问一下,你说我这么写能行吗?啊,你说老师好像行啊,啊NT老师好像行啊,我这不拿了对吧?我在这你看react身上有component,我引入react的同时,然后咋的?哎,我再进行一个结构赋值,就拿到component,这就能用了。同学,是这意思吗?啊,是这意思吗?你看他咋读的,他说component这个东西根本就没有在这个文件里暴露。同学可千万要记住啊,这不属于引入的时候结构赋值,这是属于ES6的另外一种引入方式,用这种形式是不是可以引入分别暴露和统一暴露的东西呀?
19:05
哎,所以说同学你可千万别觉得,哎,好像是我直接从react身上把component拿出来了,那我就问你,我的react暴没暴露,暴露了身上有没有component,有,那我问一下你咋取不出来呢?因为它就不是这么取的,说老师,那我就想写成这种形式,那得怎么办呢?瞧着你可以这么办,别往react身上加那个component,当然你可以加是吧,那行,你就加着,我这句也不删,你还可以做另外一件事儿,你瞧着同学,就是这个class component呢,这个类我放在这儿,我确实往react身上加了一个component,但是我在这呢,我又补了一句,Export component同学,那这是什么意思呢?Aport component是不是属于暴露component这个类啊?好,那说老师,这为什么诶,它飘红了报错呢,那你看一下,如果你想做分别暴露,你不能说提前定义好东西,然后再把它丢在这儿,应该把a part直接加在这对吧。
20:05
那这行呢,删掉,同学,那你说我这么写这个文件是啥意思呢?这个文件做了两件事,用默认暴露的方式暴露了react这个对象,React这个对象身上有没有component,有,那与此同时呢,我又用分别暴露的形式暴露了component,对不对?那所以说这个时候你来到这儿,同学,你这么引入,之所以能引入component,原因是什么呀?因为你这确实用分别暴露的形式暴露了component,那你这引没引入啊,引入了,那你不喜欢这种形式,同学,你把这个解开走,你看它也不报错,是不是也能用component,但是你这一次用component,那你可注意点,这可是从react身上取出来的,那个component明白不?哎,我说了这么多,只想跟大家表达一个事情,就是在这儿根本不是结构赋值,有些同学呢,就陷入误区了,虽然这会你不知道同学对你也没啥影响,你就知道这么写就行,但是你一直陷入一个误区,所以说这儿呢,咱就拎出来单独跟大家说了一下,OK,如果看。
21:05
看到有这种引入方式,那就是证明这个文件里边它应该用了多种暴露的形式,OK,好了,就想把这问题说明白,那这一堆呢,给它删掉啊,这个Mo呢也给它删掉,同学,你模块化的语法必须过关啊,Index给它解开,诶从这到这是吧,哎,给它解开,Index解开了,那APP呢,哎,也解开也解开了啊,我这么引入的component,我这么用的是不是好了,回头看一下有没有效果呢?刷新一下啊走诶是不是可以啊,没问题,好,那回到代码当中说老师,那还有哪块可以再改一改呢?啊还有这儿同学你不觉得你定义完了,然后在export defa,这就有点麻烦吗?这定义好了,在aport default,你莫不如直接aport default直接就放在这儿对吗?连起来写aport default class APP这儿呢,就省心了啊,那这呢,写好注释,这得怎么说呢?叫做创建并暴露APP组件是不是行了?诶,OK,一步到位了。老师,还有哪不对呢?还有这不对,你不能直接写hello react,咱说这APP是什么呀?是壳子啊,倒不是说不能这么写,如果说你的应用足够简单,同学你就想展示一句话,其实行,你可以这么写是吧?啊,没什么问题的,但是我们说了,最好把这句话呢变成一个组件,然后再给它引进来,APP是外壳对吧?啊说老师那得怎么办呢?你是不是想创建一个组件呀,你可以这么写啊同学看着右键新建一个叫做hello.js同学,那你看首字母大写它是个啥?是不是一个组件啊,啊,那同学来写一遍,怎么写port react。
22:47
哎,然后from react引入component,走,然后呢,Port defport class,诶,Class,然后叫做hello组件啊,然后呢,你得instance react点不用react点了,上边已经有了component OK,走render是不是得写呀,Return啊,那return什么?就一句话,HR标题hello逗号react好,定义好了hello组件,并且暴露了hello组件对吗?OK,那回到APP里边,你就别自己写这个了,在APP里边来吧,你告诉我引入谁呀?Import hello from当前路径下的hello.js,咱说了可以省略对吗?那所以说你应该把hello呢,给它写在这儿,这来一个杠,摁一下tap键,诶,就直接给你加上标签了,那回到页面里面。
23:47
看效果,同学咋样,东西是不是出来了,哎,这是一种这个,哎标准的这个形式,说老师这警告你刷新一下它就没了啊,有的时候他可能刷新不及时啊,好,那最小化,那但是这么写呢,还有点小问题,同学那你说如果我的组件特别多,是不是都跟这两个人混在一起了,APP和index,那可是最上层的两个东西,对吧?Index入口文件,APP呢,那是所有组件的外壳组件,那他们两个地位肯定是很高的,所以说呀,同学你应该这样做,新建一个文件夹,叫做components。
24:21
啊,所有的组件呢,都往这里边儿放啊,所以说你得把hello放在这儿移动进去。啊,没移动成是吧,再来一下走移动,那你这引入hello的时候就得注意了,是当前目录下的components下的哈,是吧,稍等,这是叫做变异当中等着它变异,你稍等会儿。啊,正常来说呀,它的速度呢,相对来说能快一点啊。可能啊,现在我目前这个电脑这状况可能不太好是吧,嗯,行了,给它停掉,来重新启动走n PM start。你这网页呢,也给它关掉,一会儿让它自动打开对吧,稍等。
25:02
哎,网页开了控制台呢,也给它开好,你看是不是也可以的呀,哎,你这样的话是不是就规整一些呀,好同学,那我们再继续,我想让hello啊这个文字啊,是一个橙色的背景,那你是不是得写点样式啊,好嘞,右键新建hello点儿CSS对吧,写吧,你比如说给它来一个class name啊走,比如说来一个叫做title标题上来标题,那在这呢,写呗,点抬头背景色橙色的。那你定义完了这个CSS,你是不是得在这引入才能使用啊,哎,所以说我们引入啊,引入当前路径下的hello.css哎,注意了,同学,脚手架里边这么引入样式啊,可不是用那个link了,哎,去引入样式,OK,回到页面看效果走橙色的是不加进去了,那同学你在想,如果现在我还有一个组件。啊,这个组件呢,叫做welcome,新建一个welcome.js组件,那你说这样写有什么问题,你如果直接把东西丢在components里面,就会导致你的组件越来越多的时候,文件也越来越多,一堆人全混在一起,所以说这么写呢,也不太合适,我说这welcome呢,就是为了跟大家表达一下这个意思,对吧,我不再写一个,你看不出来效果,你就觉得hello放在这也挺好的,所以说真正不这么写,那怎么写呢?在这个components里边新建一个文件夹,叫hello,哎,然后你把你hello组件所有的东西,包括它的样式啊,结构啊,都给它放在hello里边好了,移动,那这样的话,你看哎是不是就干净一点呢,结构清晰一点吧,关掉,那你在APP里边引入的时候,同学,那你就得注意了,Components下的啊,然后hello,这个文件夹下的hello.js对吧?哎,那这回呢,回到页面,你看一下效果,它又是在编译当中啊,稍等一会儿。
26:58
嗯,不知道怎么了,今天我这个电脑呢,编译呢,这速度呢,它慢了一点,正常来说呢,应该就你改这么点东西,它会瞬间就编译完的,那我们也不等它了,好吧,哎,我们再启动一下,把这个浏览器呢关掉,录完这个视频呢,我把电脑也重启一下啊。
27:13
可能是开机时间太长了啊,它就有点这种小问题啊,稍等哎,是不是也可以啊,好,OK啊,那关掉同学,这样写的优势就在于,如果你还有一个组件叫做welcome,那你可以继续写下去,给大家写上啊,Welcome同学,你注意文件夹的首字母是不是都是大写的,大写的代表啥意思呀,代表它是一个组件,OK啊,好了,来,走着,那就得叫welcome.js它也得有自己的样式吧,那我就复制一份吧,然后给它改个名啊,不是复制文件夹,是复制文件啊走,给他改个名啊,不叫GS了,welcome.css那你说这里边呢,是不是还得定义组件啊,那我写啊,以后这一些代码呢,我就都用快捷键去生成了啊,回头我教大家呢,安一个VS扣里的插件,能让你用那些非常快速的代码模板去生成这些东西啊,别急,现在我们先慢慢写着,你别觉得说老师最开始我就想用快捷键,你别的啊。
28:14
那代码模板呀,快捷键什么的,你刚开始先别用,你先正常敲对吧,保证这些东西你自己徒手敲能敲出来,你再用那个代码模板啊,Instance,诶,Class起一个名字是吧,那就叫welcome吧,啊,不是啊,是instance react,点2COMPONENT,但是我们说也不用这么写了,是不是直接写component render,还是H2里边就说一句话,Welcome定义完了也暴露了,对吧?好了,那再写点样式吧,在这再来一个啊,再来一个走,比如说class name,呃,这叫什么呢?刚才那叫title了,那这再换一个吧,你比如说叫做呃,DEMO,哎,叫这个好,那你是不是有样式啊,有样式你就得引入import是当前路径下的welcome.css嗯,然后这有DEMO,在这写点DEMO走,然后这怎么写也是背景色改一改,比如说让它是。
29:14
天蓝色走好了,组件定义好了,组件的样式也定义好了,那接下来我想渲染这个welcome,那你就得再来一行这个welcome,然后这就不能是hello了,Components下列welcome,下里welcome,然后呢,你把这个复制一份,渲染welcome,这个时候呢,回到页面当中,我们瞧一下效果,Hello react来了,Welcome是不是也来了呀?OK,就是这么一个效果,说老师好像明白了,组件都往这里放,一个组件就是一个文件夹,对喽,就这意思啊,关掉。那再说最后一个细节上的小问题,同学们啊,你说啊,hello.js.JS,还有index.js,我问一下它们的结尾是不是都是点GS。
30:06
那为什么我把它们用不同的颜色框起来了呢?同学,你觉不觉得红色框的都是组件,我们自己心里明白都是组件是不是?同学这个蓝色框的是什么呀?它不是组件,你比如说这个蓝色框里的东西,同学它仅仅就是一些JS文件,它不是组件。或者说呢,举个例子啊,同学,就是你看我这是不是有一个welcome.js呀,你心里明白它是组件,但是如果说举个例子,welcome.js里边用到了一个外部的JS,你比如说叫做test.js那你说同学这个点JS它就是代表组件,那这个点JS它就不是组件对吧。是吧,哎说老师,那也就是意味着都是点GS文件,有的时候我就没有办法区分谁到底是组件,谁到底这个JS,就是一个普通的文件,你比如说里边就是我定义了一些函数,你比如说啊,这个function啊,我定义了一个sum啊,一个求和的这么一个函数,然后呢,会收到A,会收到B,然后呢,Ren return呢,A加B,我问一下同学,那你说这个是组件吗?这可不是,这就是正常一个有业务功能的GS,那所以说同学如果都以点GS结尾,你觉不觉得有的时候我就没有办法区分谁到底是组件,谁到底是带有业务逻辑的JS了呀,那所以说我们有两种办法区分,第一种啊,同学就是这样的,你把组件的那个点GS的首字母大写,别人一看见明白了,Welcome w大写的welcome是个组件,哎,对,这样的话也可以,其实还有另外一种方式,哪种方式呢?就是同学你注意我可。
31:47
D把这个点GS改成点GS叉。哎,同学,我问一下react里面我们是不是写GS叉啊,以后你只要看见点GS叉结尾的它都是组件,没发现我一写点JS叉前边的图标都变了吗?那同理,Hello,这也得改成GS叉,说老师那文件改名了,那我可知道在APP里边呢,我得换,你刚才不跟我说的吗?老师,如果是点JS就能省略,但是你写的是点JS叉,那就不能省略呗,我得补上点JS叉,不是的,同学,在react的脚手架里边,你引入东西的时候,有两个人都是可以不写后缀的,一个是点GS,一个是点GS叉。
32:31
如果你引入的是hello.js叉兄弟,你可以不写后缀,直接这么写啊,然后呢,他就开始重新编译了啊说了这有点慢,那我停掉不等它了,重新开启啊,正常速度应该挺快啊,稍等。等着开启浏览器了是吧?哎,看看页面是否正常,同学,东西是不是也能出来,控制台有没有警告呢?也没有哦,说老师那要是按照您这么说的话,我觉得呀,也应该改成点JS叉啊,APP呢,你改与不改其实都可以啊,有的时候APP我们不改,为啥呢?因为它的地位比较高,你想嘛,APP里边要囊括这个和这个,有的时候就不改了,但是改也无可厚非,那改能不能运行呢?当然也是可以的,你打开这个页面走看一下啊走。
33:22
他应该正在编译呢吧。我看一下啊,回到这儿他好像还是有点卡啊,没事,不等了,停掉啊,重新走可能啊,我这电脑存的文件可能有点多了,嗯,资源管理器有点忙不过来了,嗯,这回看一下啊。稍等是不是也正常啊啊空还有没有警告啊,也没有啊,对吧?哎,所以说咱还可以这么玩啊,那然后呢,同学你发现呀,有些时候我先把这个test词删掉啊,你发现有些时候呢,公司里边的结构啊,有一部分跟我现在写的这一样,但是有一部分公司呢,跟我写的也不一样,他怎么写呢?同学你看着啊,他这么写,你先观察一下你的引入,你觉没觉得红色框里的引入有点麻烦。
34:08
你看啊,你咋写的hello文件夹下的hello.js叉这个文件,你觉没觉得,你写了两遍杠哈杠哈,就觉得有点烦,哎,那所以说有些公司呢,它这么做,同学怎么做呢?你瞧着这里不叫hello了,我先把脚水架停掉啊,要不一会它太慢了,这不叫hello.css它叫啥呢?嘿,Index。他这也不叫hello.gs叉叫index。它这也不叫做welcome.css它叫做index,这也不叫做welcome.gs叉啊,诶我不能给它删掉哈,不小心给它删了,那最小化来到回收站里边啊,找到它找到哪去了呢?welcome.js插件呢是吧?哎,还原好了,回到代码当中走右键。重命名叫index.js叉,说老师你你你这样写好像不行,你这样的话大家不都叫index.js叉index.css你这样同学没事儿,因为他们放在了不同的文件夹里。
35:07
说我说那这么写有什么优势呢,看着。咱就说引入hello我得怎么写呀,当前目录下的components下的hello下的index.js叉,但是咱说了点JS叉可以不写是吧,说老师那这不也挺麻烦吗?这不还得写一层吗?同学注意了,由于你引入的是这个文件夹里的index.gs叉。正是因为他的名字太棒了,叫index,所以说连名都省了,所以说在这儿呢,直接就叫做components下的vehicle。说老师那没说welcome这个文件夹下的谁呀?不说就是index,哎,你这样的话也可以啊,那你这样改,你别忘了这个里边你引入的还hello,这不对了,是不是得index,那你这个里边引入的,那是不是得写index OK,哎,还有这么写的,但是这么写啊同学有优势也有弊端,优势在哪儿呢?你引入的时候你觉不觉得东西少了,那你知道弊端在哪呢?同学,弊端在这儿,你双击正在研究hello这个组件,然后你在双击welcome,同学,那你觉不觉得问题出现了,因为他们都叫做index,所以说你看这个选项卡的最上方啊,你就没有办法区分了。
36:20
说老师那怎么区分呢?你可以看这儿他在welcome里,看这他在hello里啊说老师那我不想用这种写法,同学,有些时候你到了公司不是说你想用,你不想用人家项目之前一直延续的是这种模式,你也得用这种模式,对不对?哎,就是各种方式都跟大家说一下啊,说老师这能运行吗?来试试呗,啊走n PM start看一下效果。哎,所以说怎么写吧,如果要是一个新项目,那就大家大家商量着来,对吧?哎,咱到底怎么写,那如果是一个已经成型的呢,最至少啊是人家怎么写,你得怎么写,你尽量不去破坏那个结构啊,打开控制台是吧,也没有什么警告,OK,好,哎,那希望这种形式啥的大家都能把它记住,OK啊,APP呢,改不改JS叉都行是吧?同学你觉没觉得这个就有点趋近于正正式的组件化开发了,你看components,每一个文件夹里边都是这个组件的东西,你比如说这是hello的结构,这是hello的样式,那我再想问一下同学,Hello里边如果用字体,如果用视频,如果用图片,是不是都往这里面放?同学是不是扣到那句话上了,什么叫组件呀,实现界面局部功能,你就比如说这个打开。
37:36
对于目前我的应用来说,这就是一个局部功能,这也是一个局部功能,对吗?哎,实现页面局部功能代码和资源的集合叫组件,那瞧是不是在这,哎,好,那么大家呢,自己下去也练习一下,同学强烈建议你把hello react的这个案例用脚手架敲完了再听下一节内容好吗?那这一节呢,我们先听一下。
我来说两句