00:00
好了各位,那刚刚呢,我们用hello react这个案例呢,带大家体验了一下,在脚手架里面我们如何去编写代码,捋顺一下啊同学,折叠起来,首先你编写的是inex.JS。当年你是不是在那种点HTML文件里边引入re核心库,是不是在那种点HTML文件里边引入react DOM,这回都换了直接在入口文件里边引入核心库,引入react DOM,然后再引入所有组件的外壳组件APP,然后呢,你自己亲自执行一次渲染,渲染的是谁呀?APP,那么APP这个组件里边囊括着其他的组件,那其他的组件不就来到页面上了吗?对吧?哎,给这个呢,关掉,然后所有你自己定义的那些组件都放在components这个文件夹里边。Hello组件就叫做hello文件夹,然后welcome就叫做welcome这个文件夹,而且文件夹的首字母呢,是大写的啊,然后打开hello里边你就写你的结构和样式吧,以及图片呢,音视频的等等一系列的资源,对吧?然后这里边的命名呢,有两种方式对吧?刚才咱说了这可叫welcome.css welcome.js叉啊,或者说你可以换一种方式,这直接就写index,引入的时候方便是吧?公司呢,怎么用的都有,好了,折叠起来啊,这会儿一定要会,那接下来呢,同学给大家讲一个插件的使用,能让你更加快速的编码,你比如说同学现在啊,我要新建一个组件,它叫test,你说是不是得这个套路啊,首先建立一个text文件夹,右键新建,你可以选择叫做index.js叉,是不是可以,那这里边怎么写来着?Import,然后引入react,然后呢from react这个库啊,然后在这呢打个com走同学方便。
01:49
先用上脚手架之后,有很多提示就都出来了是吧?哎,走,然后port defport class,你的组件叫什么名字,Test,你得react点,那如果我上边做了这个事儿,是不是就不用react点了,就直接写component,是不是得写render render里边是不是有返回值,那一般返回的是不是一个多级的结构,那所以说包括div里边写什么不知道用问号同学我是不是得自己手敲这些东西啊,你觉得如果在开发的时候需要你自己纯手敲吗?其实不用,这都是固定的套路是吧?这些结构是永远不会变的,那你比如说对于我来说,真正要是说干开发的话,我肯定不自己敲,那怎么玩呢?敲一下,同学,我敲三个字母rcc一点唰。
02:37
瞬间都来了,怎么样,爽吧,舒服吧,因为这些东西没有必要一遍一遍写呀,那你工作效率太低了呀,注意类名给你起好了,叫index,为啥叫index呀,因为你这名叫index对吧?哎,而且它能读你这个文件的名字,然后给你作为类的名字,当然这么写肯定不行了,我得自己改一下,它叫做test对吧?但是如果说呀,你这个文件呀,在最开始的时候,你的命的名就是test,哎,这你就省心了,你看一下rcc,走看,这都直接写好了。
03:08
我不仅有这个呢,我还有很多别的快捷键,同学我问一下这是用什么定义组件,是不是用类定义组件?哎,周老师,那我想用函数呢,那你就不能这么写了,那咋写呢?我还有快捷键啊,其实叫代码片段,不应该叫快捷键啊,RFC走嗯,函数定义的T,嗯,直接写return对吧?同学想要这种感觉吗?哎,其实非常简单啊同学声明一下啊,这个呢,标准来说不叫快捷键,啥叫快捷键呢?你比如说我CONSULTO1艾特服。我想再来三行,那就摁住我电脑上叫CTRL加Q啊,我自己改了,你自己也可以改一下,你比如说123是吧,这叫快捷键,啥叫代码片段呢?这叫代码片段,你只需要敲个字母走它就出来了,哎,这就是代码片段,也叫代码模板啊,说老师是不是得一点一点配置啊,不用关掉这个test,我把这test也删掉对吧?我写它是为了演示问题对吧?来到Vs code的插件市场搜索react。
04:15
啊来,我重新给大家搜一下,比如说react搜索,然后你安装哪个呢?注意啊同学,React相关的插件太多了,你不用都安装,我给你推荐一个就是这个。你把这个插件一安装,你写的ES6甚至是ES7的语法有非常好的提示,你写react有提示,你写后期我们学的dux也有提示,以及剩下一些react的周边的技术,只要你写都有提示啊,就是这个一定要把它看好了啊,开头叫ES7,我这儿呢,因为已经安装了,所以说我这的按钮呢,就是禁用,明白不就是禁用,如果你那应该出现的就是安装好吧,这个插件一旦你安装上了,你也能像我刚才一样那么爽的去写代码,比如说随便来一个DEMO,点点S叉在里边开始写rcc,你点或者说你不点也行,RC直接敲回车也可以啊,说老师那我也就知道个rcc和一个RFCRCC什么意思啊,第一个R代表react。
05:17
第二个C代表class,第三个C代表component,这三个字母组合到一起就是react中的类似类式组件。啊,那如果是RFC呢?那就是react中的function函数是组件,OK,哎,说老师,那我就知道个rcc,我就知道个RFC,那这个插件安装完了,还有哪些方便的写法呢?点击这个库往下滚动,再滚动,再滚动,都告诉你了,都告诉你了,你比如说你敲一个imp,那就直接能进行引入的这个动作,Import module name模块名字from哪儿,那比如说我们试一下来打上imp走是吧,特别快啊,所以说一定要安装它啊,千万别自己那么傻手敲啊,你比如说说老师,嗯,那我想知道你比如说你的rcc,那我怎么知道它对应什么东西呢?CTRLF搜索搜rcc不是这个再往下找。
06:16
这儿呢哈RC就代表这一堆东西,嗯非趁所以说希望大家呢,把这个插件呢装上,后边呢,我带着大家写案例的时候啊,我肯定也得会用这个插件的啊,然后希望大家也装上,你不装这个编码太慢了,好吧,啊那这一小节呢,就是跟大家说一下啊,这个一个插件的安装啊,我们停一下。
我来说两句