02_尚硅谷_react的基本使用.avi原创

MAT。下面我们要去看一下它怎么用啊，我们先来做一个非常非常简单的一个效果。啊，就是什么意思呢，用像这个div里面。啊，我本来页面里面有个div，但div开是空的，什么都没有，我用框架在这里面往里面渲染一个H1标签。先，咱不搞得太复杂了啊。大概做的事情你能懂吧？嗯，下面我们该怎么做呢？首先那肯定是要干嘛去。想办法去把他的那个库的JS文件是不是引入进来啊。啊，我本地有，但是我得告诉大家，我这个本地的文件从哪找的啊，从哪找的。这是已经打包好的文件啊，在我是在这里找的。Boot c dn。啊，这个网站用过吗？没有啊，就是上网上它这上面呢，有一些啊免费的一些可以用的一些资源啊，或者说boot啊，这里面不就吗写大家可以引用网上地址，引用它上面地址，譬如说我来去你也可以搜，也可以直接点啊。

啊都你都不用按啊，只要他有。这个。打开。这不就是一些地址吗？大家可以用script标签，是不是引用这些地址，好，这里面说一下它这一个，这一个有这个文件名，上面有一些特别的名称。什么意思啊，一个是开发版，一个什么生产版，区别在哪呢？就就是有没有压缩的问题。懂不懂啊，这一个是压缩以后的啊，这个是我们开发测试的时候使用，如果上线的话，肯定要用这一个。类似的对不对。那。

我们平常用哪个，第一个就用开发版。啊，我这个上面的这些文件从哪来的，其实就是把这个看下C啊。Hundreds。保存。懂吗？啊，能懂啊行。啊，这里面呢，一共需要啊，需要暂时来说啊，我们一共需要三个文件啊，这三个文件的作用呢，我等会再跟大家说，哪三个呢？一个是RA，一个是RA，再还有一个是Bible Bible大家见过吗？见过Bible用来干嘛的？嗯，把ES6转什么ES5，但是它除了这个作用，还有另外一个作用啊，等会再跟大家说啊。来我们这啊，创建一个JS文件夹是吧，把这个先干了吧，这就行了，来塞到里面来，一共几个。三个。

是吧，好，没问题。那我们要用它的话，是不是应该引入进来呀？啊引入进来用什么标件S是吧，点点斜杠。GS。大家写作路径的时候一定要提示，你别自己完成，尽量是提示，提示肯定没错，你要没有提示，那肯定写错了。懂吗？啊，你这样我再来写啊，我尽量不自己写啊，提示啊键，这样的话肯定保证没错啊。再来一个。还有一个。Bible是吧，啊，Bible是什么，起什么作用，等会再跟大家说啊，先引入这样再说。好，那我们要做的事情是什么呢？我在页面里面先写一个div，写一个ID啊，写一个test，但是我这个div里面的开始是什么都没有的。

懂是吧，好，下面我们要写它GS。啊，写上自己的JS，但是啊，这个地方得说一下，这一个不能写成JS。写成什么呢？大家看啊，先写，因为我们第一次写，所以我就直接把结果写出来啊，下面要做两件事情。第一件事情叫创建虚拟动，我们刚刚说在里面是不是有个非常重要的叫虚拟动啊，完整的说应该叫虚拟动物元素对象。啊OK，第二步是将啊这样它啊虚拟动物元素对象啊，就虚拟动物吧，渲染到。页面真实啊的容器中。好，来。

下面写代码第一个啊，挖一个，既然叫虚拟动，那我就取这样一个名字。这个V是V的意思，就虚拟的意思啊，虚拟好等于好，这个写法比较比较特别，我们最终是不是生成一个H1标签插到div里面去，来看到我。写一个一啊，写一个hello。好，这个H1标签是不是跟我们以前写的页面的H1标签很相像，基本一样的，但是你要记住我这个里面没有加单引号，不是字符串，记住啊。是这么算吗？不是。这是它的一个特有的语法啊，下一步我们要用到一个对象叫。大家觉得是谁提供的？不是他提供的，肯定是他。对不对，这一个是的核心库懂不懂，而这一个是GRA专门用来操作多M的一个扩展库啊，通过名字你能看出来吗？

好，他就提供了这样一个对象，这个对象呢有一个方法，大家知道渲染怎么说吗？Render啊，OK，就为什么说渲染，就是因为它这个单词叫re。好，大家看它我的目的，我的目的是要将这个虚拟动是不是渲染到这个div里面去，那写法站起来你这样理解就行啊，现在你你肯定不知道，来我写一下大家懂了。也就是说跟这一个虚拟动对象是不是插入到这个T里面去。这个能懂吧，啊，大概能懂就行啊，开始的时候你不要太研究的太深，因为你现在啊，不可能完完全全懂啊，只要大概知道他在做什么事情就行。好。来，我们来看一下。先看一下结果页面显示没问题，接着还要看一个东西。

啊，只看这个标签结构。是不是我们想要的，确实就是是吧，嗯。好，我们再来看一下他们这几个东西啊。RA than GS，这是我们的核心库。啊，这个单多M呢，是操作提供多M操作的一个RA的什么扩展库，这是必须，这两个库是必须要的。啊，还有一个是Bible，前面我们说Bible是用来干嘛的。将ES6转ES5对吧，但是这里不是这个作用，在这里不是这个，用这个说一下，现在已经是Facebook的一个谱了。啊，其实最先是一个个人的产品，那个人最后就入职了那个Facebook，啊，其实说白了就把它收购了，收购以后呢，就向这个Bible里面添加了一个新的功能，因为这个RA库框架需要一个功能，就是它有一个语法叫JSX。

就是JS的一个扩展的一个语法，JS的扩展语法是什么语法呢？就刚才这个，就这。这就是GSX。啊，OK，是JS的一个扩展语法，但它现在不是不是字符出来，平常写肯定不行的，你看到我把它改一下。你看看到了吧，他就报错了，就不能识别这个你写的这个语法。啊，OK，好。那这一个Bible干嘛呢？他把Bible收购以后干嘛呢？就给Bible添加了一个功能，这功能其实非常简单，就是将JSX的语法的代码转换成什么呢？纯JS的代码。现在我们写的是GSX，但真正运行的时候是运行的GS，中间就需要谁需要这个Bible去转换，它怎么转的也不要你懂。

啊，值得封装好的。大概能知道这三个的作用了吧，啊，先知道啊，所以而我这个是干个什么事啊。就是声明一下是啊，告诉去干嘛，是不是解析。解析我里面代码解析我解析里面的啊，是不是GX的代码。要没有它，那我的代码就运行不了了。相当于这是个声明对不对啊，这样他待会才知道哦，这里面有GSX代码，我要去解析啊。好，这是这一个大家需要去知道的。好，最终还有一个东西。就我们最终去写RA的，呃，应用需要装一个RA的一个开发者工具来进行调试。

因为写项目进行调试，那是必不可少的。啊，这个工具呢，我已经。弄在这个文件上面，大家只需要右键。另存为保存文件，保存文件到本地啊，先到本地中药吧先。嗯，那我的桌面就多了一个，诶，多了一个文件在这里啊，这一个CRX文件是一个什么文件呢？是谷歌浏览器的扩展文件啊，就说白了是他的一个插件。谷歌浏览器的插件大家知道怎么装吗？装过吗？装过很好，先进入啊扩展程序的这个界面，记得干嘛把它拖过来就可以。懂不懂啊，OK，就这样简单的，非常简单啊，其实它的插件装非常简单，拖过来。

就可以装了，但我刚才已经装过了啊，前面我已经装过了，因为我已经有了。嗯，看一下我的。哎，我没有吗？我应该有啊，就这个不可能没有啊。就这个，看到名字你就知道叫什么开发者工具。那有什么用呢？那一旦装上它了以后啊，装上它以后，大家如果说你当前这个界面的运行用上了库，那你就会多一个选项。叫什么？那他就能看到你整个界面里面啊，React管理的部分的一个结构，现在很简单啊，所以感觉没什么用，等到我们的应用一旦复杂一点就非常有用。啊，他能知道我们整个组件整个标签里面的一个状态是什么。

啊，非常非常有用的一个东西，暂时了还看不出来啊，先装上再说。好，那到此为止呢，我们就给大家去说了一下RA，一个最最基本的Hollywood的使用。好，大家下面就自己啊，也走一遍啊行。