19_尚硅谷_基于脚手架项目编写应用.avi原创

好，下面我们做一件事情。干嘛呢？哎，把把这个留着吧。把这个留着，这张图片啊，把这个留一下啊，好来。下面呢，我们来去自己来写一写。那我们在写它的时候，首先第一步写什么？写路口，JS。懂不懂先把入口GS，入口GS现在是固定的，因为配置已经写好了，叫什么index.gs对吧，那我们最终是不是还有一个一个组件呢。一个组件来，其实所有的组件我们都可以写在一个文件夹下面去。你觉得用一个什么文件夹比较好？所有的组件我们都可以放到一个文件夹里面，写什么？Components，这个能懂吧，多个吗？

来。以后我们写组件的时候啊，写组件的时候我会啊，文件名都用小写。文件名都用小写，但是大家知道组件名的首字母是大写的吧，啊，这是大家后面写东西的一个规律啊，一个，而且还有一个事情，我们平常啊，写GS的时候是不是点GS啊，这是我是点。GSAX。这样有做有什么好处？这样别人一看就知道你是个主见。懂不懂，其实你写成点GS也没问题。能不能，也就是说我组建的后缀名有两种，一种叫点GS，一种点什么GSX，用哪个好一点呢？用GSX。为什么？因为这样很明显的区别开来，你是一般的模块还是个组件模块。懂吗？这是不用看你在不在哪个文件夹下面，一看就知道哦，你这是个主件。

但是如果当前是个一般的模块，我会用GSX吗？不会。啊，OK。能不能看懂，嗯，好。来第一个组件，还记得怎么做吗？啊，是不是定义类啊，用类的方式那啊，其实我有比较简单的方式看。就是结果就出来了，因为都是都是一个，说白了就是套路嘛。啊，再来一遍是吧，再来一遍啊。在医院啊啊麦要大写。你看叫第自定义什么组件内再写个名字APP好了。能看到吧，因为这这固定的嘛，外面也固定嘛，里面这个韧带也是固定的嘛，啊，不过我们还是写一写啊。

所有的组件内啊，都需要引入一个几个东西啊，第一个是react。其实我们没有直接使用到react这个东西，但是啊。即使没有用也必须什么呢引入，因为它背后要用。啊，它背后要用好，还要引入一个东西叫什么，Component from react，对吧？接着我们需要定一个类暴露出去。听到不啊，你可以先定义类啊，先定一类，看PA大写来啊，From。什么？Component吗？你是不是写成个继承，继承不能不写，诶怎么怎么import啥意思，Class写错了啊，应该这么写是吧？来是不在的，来一个什么固定的来一个，来一个括号，写个第位再说，不管它。

先写好对吧，接着来。暴露啊，你肯定要暴露啊，对不对，就暴露export defport默认暴露嘛，用默认暴露比一般暴露要好一点，引入的时候是不是方便一些。能懂吧，还记得吧，默认暴露的话，我引入的时候不用加大货好吧。啊，当然啊，我不想，我不想写成两条鱼。这一条。可以吧，可以，这凭什么可以了，对不对，好了，后面呢，你就可以把这个，这不一个是固定的结构吗？把它做成一个。什么代码模板？

做过吗？没做过。估计你们是想吧。就没那能力是不是？啊，OK，这里面呢，有一个live template。实时的模板啊，整一个先你可以创建一个大的分类。说白了是哪一类的模板，我们这里面，我这个是我建的。就大家可以也可以建一个名字，你可以取一个，诶刚才刚才好像不是建的，这这个这个先建，你看有一个什么group什么意思，分组先一个分组。能懂吧，分这些都是做外围的，都是分组。不同类型的模板。啊，先建一个分组啊，叉叉叉好，接着呢，会在这个叉叉的模板就分组下面再去创建什么。某一个模板。啊，这个是模板内容。

看到吧，接着这一个是什么呢？是你它这个模板所对应的关键字，你输入那个关键字，模板就自动的提示出来好吗？那我写个什么模板呢？写个什么名称叫这是个创建一个组件是吧？啊。有的时候啊，你这个模板。嗯，你要写个CM，到时候你写别的要出现CM，它也会提示的。啊，所以尽量尽量尽量的，譬如我刚才写的这样一个名称啊，举个例子，我写的这个，但是啊，我虽然写这么长。我虽然说写了这么长，但是呢，只要写一部分它就会出来。懂吗？它是不断匹配的嘛，他可能匹配多个啊OK，你别比如说老师，那既然这样的话，我就写写一个写一个C不得了嘛，那那样好吗？不好，你很多时候会写这样。你写个C就出来，那样不太好吧，所以这个名称要有技巧啊，写的稍微要过得去一点，我刚才就写的这个啊，把它有意的把麦写成大写。

能看到吧，啊，这个有一个非常重要的事情要做。啊，就在这里。要指定你这个模板是在什么情景下应用，这个必须指定，要不指定它没效果啊，我不是GS吗。我还有别的。我还有有有页面的模板，那你就写HT嘛。懂不懂，譬如说我们不用过script吗？十分一分二大家用过吗？用过不是也是这里面出来的吗？OK，十年以后就可以去就可以去使用了。OK，大家看到我的这个react里面就有。你看。能看到吧，而且我还有一个说明，这个说明刚才看到了吧，啊，而且这个地方还一个事情，有的部分是不是不确定的，不确定要用占位符，那占位符的语法是左边一个多少符，右边一个多少符，中间随便写个名字。

到时候这个地方就没有，就有一个，就有一个红色的那个什么光标停在那里让你写。你写完按键就跳到别的问去啊，就非常好啊。这个能理解吧，啊，OK，好行啊，你要把这个干掉可以，嗯。那你们怎么办呀？哎，你们把那个我不给他倒出来那些配置吧。啊，你导入就有用了。我不给大家发过吗？发过吧发过那配置大家一倒进，大家知道导吗。不知道你们是啥也不知道，诶，我在什么时候发的。在JS高级的时候给大家发过的。就这一个。这个。

代码模板是吧，啊这个导。啊，大家觉得在哪找这个。真看不出来呀。嗯，就是导入设置嘛，导入你的配置，导入配置呢，这个时候下一步你觉得干嘛，你去找到那个路径，找到这个文件呢，它这个文件得一个一个导啊。一个就说白了，我一共有三个，按我的想法是不是是不是导入这个文件夹，选择三个文件一下导音乐不行，它一次只能导一个。啊，你说老师，那你应该搞成一个文件，我主要是想你有选择，你有选择的权利，有的人想不想用这个，那你就就想用这个，那你就倒他。嗯。二。大家下去后可以试一试啊。行，那在这个里面呢，我们就可以去写些东西是吧？啊写些什么呢？譬如说啊，我们来一个来一个图片。

怎么说来一个什么image image里面我是不是要引入一张图片，那我直接可以引入它可能。看到import我引入这个图片，这个图片也是一个模块啊，在外派眼里对不对。No from。怎么找？看不懂吗？能看到吧，这不引入了这张图片吗？你通过它是不是就能找到这张图片？那下面我怎么写？Logo。你说大话啊？那么呢？好，记着我这里面这是也写个logo吧，这是个字符串啊。

这文本。能不能看懂啊，OK，当然你也可以给这个图片，到时候可以直接样式对不对啊，等会再说啊，我们来看一下啊，我先就写这么一点，别的都不写。行吧，好，我的这个写完以后好了吗？没有，还有什么东西没写，是不是这个里面主文件没写，入口文件没写，入口文件的写法也是非常固定的。啊，引入react react是必须引入的，还有引入这次，因为我要渲染。所以需要吧。React，感动最终我要干嘛？是不是渲染渲了哪个标签？是不是APP组件标签，所以我要引入谁？APP怎么写点斜杠？Components下面的APP。大家看其实JS点后缀是不是可以省略啊，这工具他能知道啊，不用担心，好接着re react，多点render，接着呢，接着did指定。

ID是多少？看什么看页面。对吧，看他。对吗？对了啊，好，指定一个这个。OKOK。这没问题吧，没问题，好，下面我们就可以来去看一看，我的这个到底行不行呢，怎么办？干嘛NPM？这个n PM start会对我们整个应用中的所有模块。进行编译打包，最终运行，他问我啥呀？

他问我那个3000的端口呢，已经被占用了，你要不要换另外一个端口？说老师不要，那不要你就启动起来。因为那个3000在正在启动。能不能看到怎么办啊Y，因为它这个Y现在是不是大写的，就默认现在就是Y，你按一下N的键就可以，Y就是yes。是不是有点太大呀，那也就是说下一步我们是不是可以给他指定一些样式，让它变小一点，当然我们也可以指定一些别的标签来显示点内容，对不对？好，来写样式啊。写样式呢，我们这一次就单独的去创建一个样式文件啊，我们就叫它index，点什么呢？CSS。来啊，样式，首先我们来看一下，我们先把样式名用上啊，给image加一个样式，写个什么class name的一个名称啊，譬如说logo可以吧。

那我这边我得怎么办，点logo。指定要宽高拉倒啊。呃，搞个200可以吧，差不多啊，高度200吧，都搞个固定的。OK吧，好，下面呢，我还还搞一个啊，再搞一个再一个这个意思来麦，下面再搞一个P标签。有一个啊，这是一个react APP组件吧，来，我希望这个字体呢是红色的啊，我希望它的字体呢稍微大一点。啊，首先要给他一个什么啊，Class name啊，比如说指定一个title啊，随便来一个啊。

来，那我这边需要写一个点title。来，先来一个color red红色，接着来一个呃，放size。可以吧，指定一个25P行吗？好，那现在我的样式起作用了吗？为什么没有什么没有引入，你要像一个模块的样子把它引入进来是吧，引入样式怎么引入port什么就行。录音点斜杠。这里面要注意啊，你引入第三方的模块，写模块名就可以。懂不懂，如果你引入是定自定义模块。那必须写相对路径。而这个地方。必须以点开头或者点点开头。如果是当前的就点斜杠对吧，如果要退出那就点点斜杠懂不懂。

也就是说，你不能这么写，懂吗？好，写好以后。什么意思啊？你看我刷新了吗？什么意思啊？自动编译打包并刷新，这里面有一个统一的概念叫live reload。什么意思，实时的刷新，但是实时刷新的前提，他重新编译打包了吧。对不对。啊，好看。嗯。我们就能显示啊，做一些其他的呢，就加一些样式啊，做一些东西就行啊OK。现在我们就写了一个组件，我问一下是不是可以写更多的组件了啊。比如说现在我们要关心的是不是就只要写他就行，写src里面的一些东西，说白了就是定义组件，用组件搞出来就OK了，其他的事情通通都帮你准备好了。

你发现我改完以后，我都不用怎么管就能看到效果，很爽。这个爽是谁造成的？你不要，这是你造成的吗？谁造成的脚手架？能不懂脚手架帮你做的？也就是说脚手架把你当了这个环境特别好用。嗯。好，那下面呢，就是大家需要自己做，大家做了可能你们下载有点慢怎么办。啊，你们下载是比较慢，因为你们一看下载不，很多人下载特别慢啊，在这个里面我有一个code code里面有一个。Black什么意思？什么意思啊，空的。

看懂吧，就是一个空的，说白了就用脚手架下载下来的啊，还有什么都没改，大概还是他以前的样子。那下节课呢，大家开始的时候就是在这个里面把它一删啊，写出我这个样子来就行，虽然说不太漂亮，但是你你得写出来就行。看到吧，啊，就是我们现在我们最终写的结果跟他的结果不是完全一样的啊。好。