00:00
在说完public这个目录,哎,以及它里面的这些文件之后,哎,我们这节课来看一看src目录啊。这里面,哎,首先看第一个文件。好看前两个吧,对吧,他们明显一看就是一对对不对,那这个f.GS我们点进去看会发现它是什么。是不是一个函数定义的一个组件看。这么一个内容对吧,好,这里面因为编辑器的问题啊,它把它给识别成GS了,所以会出现这种。这种哎报错啊,这里已经提醒你了,你看是否切换语言到这个GS叉,你点这个切换就完了呗。我们把它给切成这个,呃,GS叉以后啊,它就不会再出现这些问题了啊,这个已经切换完成了啊。看一下代码是不是用这个函数定义的一个组件。看到了吧,啊,这个div是它的这个根节点。那这个CSS呢,就是这个组件所用的这个样式,诶。在这里啊,它俩是一对,来接着往下看,也是这个app.text ands,它多了一个test,那这个呢,是这个组件的一个测试文件啊,一般我们哎用不着。
01:08
你不做这个组件测试的话,一般用不着啊。接下来再往下看。有个index.set X啊,这里有个index.gs那么他们一看,哎,也像是一对对吧?哎,那是的啊,那这个index g它是什么呢?它是我们的这个入口文件啊。我们如果学过这个uppa,大家知道我们会配一个入口文件啊,就是说一进来就先走这里是不是好,这里面它干了什么,引入引入了这个index.set式是吧?那这个index.cs一般就是作为全局的一些样式,我们就放到这里面是吧,因为你所有的地方都会从index.gs里面去开始走,那index.gs里面呢,又引入了这个index点3S。看到吧,所以它是作为一个全局的一个样式,我们可以写到这里面,哎,比如一些初始化的一些样式,或者一些全局都用到的啊,那这个index呢,就是我们的这个入口文件。
02:00
呃,接着我们先把文件先整个给介绍完,再一个个来说啊,首先这个SVG这明显就是一个图片嘛,你看是不是已经出来了,哎,这个图片,因为SVG的话呢,它就是说可以做一些动图嘛,就是我们这里去看到的转圈的这个图。哎,这就是SVG的这个。图片啊,那这个就不说了啊好。接着这个GS,还有这个GS啊,这个GS呢,呃,是做这个性能分析用的啊好,那这个呢,就是我们做整个项目的整个应用的一个测试用的,等会儿我们再一一细说,先大概了解一下。来,接着把这些都关了。我们依次来看,首先啊,那这个就不说了啊,这个是定义了一个用函数定义了一个组件对吧,我们把它给折叠上啊,用函数定义了一个组件,然后呢,它这里注意啊,它这里,呃,为什么我们这里定义了组件,呃,最终能在页面上能用呢?你看这里是使用了这个ES6的一个暴露对吧?默认暴露的这个APP组件,就是我们这里定义了组件之后,是用ES6语法把它给暴露出去了。
03:06
清楚了吧?啊,那暴露了出去之后呢?呃,如果用到这个组件的地方,只要把这个组件引入是不是就可以使用了?好,那这个是CSS,哎,这个组件的CSS,那我们就呃这两个文件就不说了,但是要说一下什么呢?那为什么react给我们这个脚手架给我们提供了这么一个f.GS这么一个组件,来我们来分析一下。你这个组件你最终是不是你要挂载到页面上才能显示来看一下我们页面,我们页面是不是有一个ID,等于root的一个挂载点,是不是只有这一个,对不对,那我们之前在学RA的时候也说过,哎,我们挂载组件到这个容器的时候,是不是使用嗯,RA的do啊,点render对吧,去挂载,那render呢,我也给大家演示过,之前它是什么,它不是一个最佳操作,它是一个覆盖操作。对吧,那我们这里只有一个容器,也就是说你如果你组件,你你定义了很多组件,你不断的去run的话,你是不断的在覆盖。
04:00
哎,会覆盖的是不是,所以这里它只给我们准备了一个组件app.gs而且APP有应用的意思,对不对?好,所以我们的思路就是说它会把这个f.GS这个组件给我们挂到这个容器上面啊,那我们还有其他很多组件怎么办?那我们还有其他的组件。那我们就在这个。APP里面去写呗,哎,去在这里面去写其他的组件呗。是不是这样的?清楚了吧,啊,比如说我们如果还有头部组件的话,我们可以在这个里面去写啊头部的,然后有底部的话,在这里面去写这个啊底部的组件,你看这是头部的是不是我还可以再写底部的组件,还可以写其他组件都在这个呃,APP里面去写就可以了,是吧?那我们把我们的组件呃组织好之后,最后只把这个APP组件给挂载到这个容器上就可以了。清楚了吧,这也是为什么只给我们准备了一个f.GS啊,这个稍微提一下啊。好,接着来看啊,这这个test测试组件的这个文件我们就不看了啊,那接着看什么呢?看这个,呃,这个全局的样式也不说了啊,主要是看这个index下1TEXT,我们看看他做了什么,它是不是,呃,在这里面你看引入了RA,然引入了RA对吧,然后又引入了全球的样式,引入了APP组件。
05:08
对不对,哎,有点类似于我们之前,呃,写这个页面的时候了,你看你看啊,这里是不是,哎引入了这个react,引入了do是吧,引入了背对不对啊。好,这也是我们的引带点显示,它作为这个入口文件,接下来我们往下看啊,它又引入了它对吧,好。我们先把它给注释掉啊,把它给注掉,先先不管它啊,先不说它,然后这个这些没用的注释也删掉,那呃,这个呢。我们先不说它是干什么的,我先把它给删掉啊,这个也给删掉。好。啊,删到删到这,我把它给折叠一下。来。这个结构大家是不是看着就比较熟悉了,是不是和我们之前我们写的。这很像把这个组件去呃,挂载到这个容器上,对吧?那这里是不是也一样,把这个APP组件去挂载到这个容器上,对不对,那只不过我们之前写的时候,我们这个组件是在这直接定义的,那这里呢,是通过这个呃,Input直接是从这个哎文件里面去导入的,因为这个它暴露了这个APP是不是,那这里我们引入了这个APP,是不是可以直接使用这个组件。
06:14
是不是就在这里去把这个组件去挂到了我们这个A面的这个容器上面呢。看到了吧,你看找到我们的台面挂到这上面对吧,好。哎,注意啊,这个ID你是可以改的,那我们之前一直写的test是不是,你看这里一直写的test,你如果想要改test,你要把什么呢?把这个index填没有,你这里改成test知了吧,那你这里也要改成test,你要一一对应才行,要不然会找不到挂载点。来,我们来看一下啊。哎,这里已经重新构建了,正在构建中,哎,构建完成了,我们直接去浏览器看一下。刷新一下是不是可以用了正常的对不对啊。来,那我们还改成root默认的就可以啊,Root来这里也改成这个。Root,这是关于挂载点清楚吧,那你可能还有疑问,哎,这里我没有引入这个,引大点他们L那它。
07:04
他怎么怎么怎么。怎么用的?对吧,怎么能能找到它呢,这是在这个webpa里面的配置里面去配置的啊,我们这里也没有去抛出这个wepa的配置,所以它默认react,它脚手架自动配置了,我们就不用管就行了,清楚了吧?啊,那我接着来撤回啊。把它给撤回,我们再来看看这个APP,它外面包裹着两个这个东西,对吧,它这个是包裹着什么。来我们读一下react点啊,Strict严格的对吧?严格model模式,严格模式吗?是我们之前写ES5看起的严格模式,不是的啊,这是react提供的一个呃东西,它主要做什么作用,主要作用就是帮我们检查我们写在这个组件里面,以及这个组件里面它用的一些子组件的一些语法啊,一些内容是不是合格,那比如我们有一个组件用到了字符串形式的if,哎,比如说等于这个什么input用到字符串形式的if,它就会给我们警告,哎,他告诉你这个字符串的这种IEF说啊。
08:02
啊,不适合,不太推荐你去使用,你可以使用怎么怎么样,对吧,这个就是对我们做一些呃,React一些语法的一些检查,因为你看react它的版本迭代也比较快,有些我们正用着正用的之前还还能用的一些API,诶突然就不能用了,但是我们就不知道我们怎么把控呢,哎,所以它就是可以帮我们提提醒清楚吧,听楚哎哪些即将废弃啊,哪些就是说不推荐你使用啊,就是它的主要的一个作用,哎提醒我们,让我们更加正确的哎去写这个react的一些语法。兄弟们,这是它主要的一个作用。好。哎,接着呃,这些看完了之后,看看我们注释掉的这个东西啊。我们注释掉这个东西,首先看一下,它是从这个文件,也就我们当前目录这个文件去引入了它,对吧,然后去执行它,那它是做什么呢?它是做这个哎,性能的一个分析,也是我们这个组件,它的这个运行的一个性能怎么怎么样,诶然后它里面有很多很多的配置,它依赖于这个库啊,然后这个关于这个呢,也涉及很多东西,这里就不说了啊。诶,大家知道他做什么的就可以了,诶如果对他有详详细的了解,可以去他的官网去看他的文档好吧,好,那这个文件就说完了对吧?好。
09:08
啊接着啊,看这个logo SV信,那这刚才说的就是图片,那这个图片在哪用的呢?哎,我们找到这个f.GS你可以看到这里是不是引入了这个logo是不是,哎,你可以发现,哎,你这个input还能引入图片啊,对呀,他什么都能引入啊,GSCSS一切资源都可以引入啊。清楚了吧,啊,所以是在这里去引入这个图片啊,那这个我们刚才说过了,好,那接着这个再给大家稍微提一下,它刚才也说过了,它是用于对我们整个应用做测试用的,它依赖于这个库啊。哎,如果然后关于他的这个详细的一些使用呢,也很多,你看你如果想了解更多,你可以去这个网站,你看一下它的这个文档啊,这里我们也不做更多的一个说明好。这里我就先全部关掉啊,那文件比较多,也比较乱,我们来从头捋一捋,它是怎么样的一个执行顺序啊。来,首先。我们知道,哎,我们之前比如学wi派的时候,我们知道我们有个入口文件,对不对,那这个index.ts就作为它的入口文件,那既然是入口文件,首先是肯定得先从它进来,对不对?好,它里面干了什么?哎,刚才也说过了,先引入react呀,引入这个,引入这个全局CS,然后引入组件,对吧,然后把那个组件去挂载这个页面对不对?哎,这是它先执行这个inend.gs作为这个入口文件。
10:23
清楚了吧,啊之后他去,嗯会就说web pack配置里面,它会找到我们public,哎,这里面这个indi.time然后他会,哎去再找到这个节点,把我们的这个组件去挂载到这个页面定义的这个容器上面,哎,就能显示出来我们的这个页面效果了,清楚了吧,那你再来看这里,这里当它去引入这个APP组件的时候。哎,这个。组件,我们定义的这个组件就会被引入进来。清楚吧,因为这里用了这个默认的一个暴露好。这是它的执行的一个顺序啊,那如果呃,我们在这个组件里面啊,比如说app.gs我们去改了一个东西,比如说我们在这里去加加上三个叹号是吧,那你保存注意啊,我们如果在这里你去开启了这个,呃,这个开发的一个模式就是说哎亚start,或者这个n PM start。
11:16
哎,当我们改的东西的话,它会自动自动去刷新的,你看现在这个页面是不是多了几个叹号。啊,如果没有的话,你手动刷新一下啊,因为刚才。我这边出现了一些问题啊,那我重新启动啊,看一下啊。来。啊,现在重新启动之后,你看这里是是不是有叹号,然后把这个叹号删掉,删掉之后我保存你看。保存之后,你看这里正在构建,是自动帮我们去构建,那这里面自动构建完成之后会自动刷新,它要是没了,嗯,之前是没有刷新,是因为嗯之前为了给大家演示这个GS,是不是它中间出现了一次报错,完了就导致了它那个。后来我就手动刷新是吗?就导致它自动刷新没有了啊啊,这是这个问题啊啊,当你发现不能自动刷新的时候,你重启一下就可以了,就是CTRLC结束了,重新再启动一下这个就行了啊好。
12:08
关于这个app.gs哎,这里再强调一点啊,我们把它给作为什么呢?作为根组件清楚了吧,是这个组件再往这个页面的这个容器上去挂挂载啊,而且是在这里面去挂载的,清楚了吗?啊,我们所有我们自己写的其他的组件呢,我们应该都在这个跟组件里面去进行组织。哎,我们不要再去写其他的一个组件了,我们跟组件只能有一个,那我们自己定义的组件就在这个组件里面,哎,跟组件里面在这里面去写嘛,比如说你其他的组件是吧。啊,比如说你的这个foot组件,哎,你的这个其他的组件都在这个app.js这个组件里面,我们去组织就可以了。啊,那这个f.GS作为根组件呢,是它在GS里面,哎,在这个点GS里面,再往这个节点上去挂载。这点要注意啊,好,这是关于src下面的这些东西,当然内容比较多啊,但是我们真正用的呢,也没有多少,是不是好。
13:06
那。嗯,这些文件就不说了,这是我们所有的这个项目的一些呃依赖以及一些配置啊,我们的脚本的一些配置,以及这个瑞德me项目的一个说明啊,瑞德me呢,如果你使用了getate仓库呢,它就会作为这个文档去展示了你的getate仓库的那个呃描述页啊。做一个你项目的一个描述啊,当然这个呢,我们有时候可能会写一些笔记,就会放到这里面去写。同学们啊,这使用的是马克当语法,大家如果不会的话,可以去学习一下马克当语法啊。这是我们写的时候的一个,哎,这个原码吧,相当于这个原笔记,这个是渲染后的一些样式。有兴趣的话可以去学习一下马可的啊,这里就不做不做多说了啊,那这个呃,压点look呢,它这个是。嗯,Yan嗯,然后我这里是使用的是Yan去安装的这个所有的依赖嘛,那这个压点lo就是在我安装依赖之后,它这里面会生成什么,会生成我所有用到的这些依赖的一个版本,对吧。
14:01
那它有什么好处,那我再次去安装的时候,它会从这个压lo直接去找到指定的版本,诶直接去安装。速度会非常的快,当然如果没有这个文件也没有问题啊,它会根据哎,你这里面哎,这里面配置的这些依赖,哎,这里面你用到的这些依赖去找,诶当然去安装的时候,它会给你再重新生成一个样件lock。清楚了吧,啊这个文件。嗯,我们不用管它就可以啊。接着来看一看这两个目录。我们说完了是吧,文件都比较多,但是你会发现大部分都是图片,你甚至在写项目的时候都可以把他们都删掉,像这些什么夹壳的一些配置啊,这些这个呃,爬虫爬取的一些规则的设置啊,这些我们用到的时候再去配置就可以,你哪怕你不知道怎么配对吧,你至少你先知道它是干啥的,当你要配的时候,你去他们的这个官网去,或者找一些文档去看看怎么配就可以了,是不是包括这些对吧?这个呃,性能的一些分析,以及这个应用的一个测试等等等等那。呃,整个其实所有的文件,我们真正主要用到的就三个,哪三个呢?一个是引带了两个产没?哎,你说你要不要在这里面去写一些东西,那比如说你像在这里面去引入一些其他的一些功能,一些样式就可以在这引是吧?那你看这里index是不是从这里去引入了index.cs是不是,那其实这个CSS我们也可以不放,这我们可以放到public,直接在这个indel里面引,是不是一样的啊,这个大家可以自己尝试一下,我就不试了啊。
15:22
好,当然你可以在这里面,哎,有时候去。改一下你的网站描述啊,或者加一些你的网站的关键字等等等等是吧,这个文件是比较有用的对吧?哎,我们整个的页面只有这么一个主页面啊,我们用react啊或者VI,我们写作是那种单页的一个应用,清楚吧啊。你不要再去创建其他的一个页面了,那我们其他的比如说像登录啊什么的,其他的这些怎么办呢?我们都是把它给做成了一个一个的组件,哎,我们就是在这个组件里面去组织我们的页面,最后去挂载到啊这个呃,容器上面就可以了啊好。这是我们第一个,哎,主要常用的一个文件,哎,我把这个其他的就先关掉啊,那第二个,呃,比较重要的一个文件就是什么呢?就是这个啊app.gs那为什么说它重要呢?哎,刚才我们一直也在强调它,那我们自己写的些组件是不是要在这里面去组织。
16:10
对吧,所以这个文件非常重要,我们也会经常去改写这个文件嘛,对不对啊,接下来还有一个常用的文件,就是这个index.js这个入口文件,那有时候我们呃,想要去引入一些,呃其他的一些第三方的一些扩展啊,或者呃做一些调整啊,或者对入口文件,然后去加一些东西的话,那是不是也会去编辑它。那你想一想,那你除了这三个文件,其他的也没啥了呀,那就图标图片对不对,好这三个文件大家一定要记住啊。主要是做什么呢?啊,那关于目录呢,呃,再给大家强调这个public呢,一般我们是放一些静态资源,比如说我们的图片,哎,我们的这个页面等等,还包括CSS啊等等一些静态资源我们放到这里面,那src是放什么呢?一般放我们的源码,哎,就是我们开发写的时候一些源码,我们的自定义的一些组件啊,还有我们自己写的一些,呃,呃,组件的一些,呃,样式啊等等等等,我们自己写的一些啊开发的源码一般放在src里面。
17:04
清楚了吧,啊,当然我们现在。呃,是直接启动的这种开发的这种模式用的压start对吧,那如果我们开发完成之后,我们来执行这个压build,它会还会再给我们生成一个编译后的一个一个目录啊。这些就是我们创建完脚手架之后,诶,它的一个目录结构,以及每个文件的一个作用,诶通过这两节课给大家做了一个介绍,那在接下来的呃小件里呢,就会带大家去写一些例子,哎,我们只有通过一些呃实际的例子,大家才能知道怎么更好的去使用啊这个脚手架。
我来说两句