react ts路由配置

这个视频我们介绍 react uil 配置，首先我们需要安装 react， 要安装最新版本 v 六的版本，这个版本比较强大，然后到我们的 a p p 入口页面 index， 我们需要引入 browser brother， 把我们的 app 包裹住，这样我们就可以在我们的 app 里配置我们的 url 路由。可以看到这个 app 比较简单，只有上面有个 number， 就是这些，我们预先做好了几个页面，都是比较简单的，我们要把这几个页面通过 react 把它串联起来。 那我们在哪里配置呢？我们就可以在这里配置。最外程，我们需要引入一个 rot 模块，这种模块是整个路由的一个 rot， 每一个 url 路径我们需要配置一个 rot， 然后 rot 模块呢，我们需要有两个参数，一个是 pass， 也就是我们的 ur。 第二模块呢叫艾力文字，这里我们要引入对应的主线，比如我们这里要引入 home 主线， 这时候他就会可以实现这个根部路的漏油了，那么我们还需要引用这个图书列表关于的路径，我们可以把这个复制一行，然后写上 look， 这个会写上 alt， 然而组件这里要换一下，我们这个是 look 组件， please 的组件， 这个是 about 组件，但是我们要把它再引入进来，那我们就可以实现我们的 然而漏油了。在这里有一个问题，可以看轮流棒，轮流棒还是用一个 a 标签， a 标签还会去后台拉页面，在浏览器还会重复渲染，这样非常影响性能。所以我们要把这里所有的 a 标签都替换成 vicro 的提供的 link 组件。 link 组件呢，它这里就不能写 hif 了，它就要写一个度数性，度数性就是我们的 url， 这时候我们在保存，我们可以看到我们再去点击的话，这个就不会再去后台拉新了。这是我们 url logo 配置的第一部分，更精彩的在第二部分，如果你感兴趣请点关注吧！

那实现之后呢，我们接下来就可以将 header 这个部分呢展开，展开之后我们需要给它加上一个容器，对吧？那容器的话我们就需要放到这里， 现在的话从我们理论上来讲，我们觉得应该是没有问题，因为他呢已经将我们的路由都展示出来了，但是呢现在出现了问题， 大家可以看到我们保存之后的话，你的页面当中就会给我们报对应的一个错误啊，那这个错误的话，我们就可以借助于咱们刚才所截的这个图了，大家要知道我们之前设置的这个 header 里边包含的这些导航是包裹在 brother router 这里的，但是如今我们现在的这个 header 的话， 并没有被任何的这个 brother router 他去包裹起来。如果你想让这块内容能够正常的去实现的话，你必须要在你的 create brother router 这个里边拥有具体的一个效果， 所以呢你不能够直接写到这个外边啊，如果你在这个这个提供器的外面的话，就将无法去使用这个路由了。 好，那现在的话我们已经知道了，必须要在 brother router 这个里边去实现，那你该怎么实现呢？我们这个里边就在咱们当前的这个 router 这块啊，我们可以去处理对应的一个内容，我们在使用 router 的时候呢，我们可以给他去加上一个新的东西，在这的话我们就可以直接给他一个叫做 pass， 然后呢我们给他一个跟路径，如果他访问的是跟路径的话，我们希望他能够正常的跳转到咱们对应的一个啊，就是组件里边，比如说现在这块的组件呢，我们可以给他定一个叫做 route 啊， root layout 这么一个组件，然后当他访问了之后呢，我们希望能够有一个默认引引引的这个路径啊， 比如说你如果访问的是这样的一个路径的话，那么他就会先找他里边的这个啊，这个默认路径 home， 如果说你有杠又带 cos 的话，那就找到啊，然后呢再找到 cos 的内容，把 cos 的内容给他正常的渲染出来，这个就是他的一个意义。 那 root layout 这块的内容我们并没有去实现出来，所以呢接下来的话，我们要去实现 root layout 这一块的一个内容，那我们可以把它呢就直接来创建一个，我们在 s r c 下新建一个维尼牙，我们可以给他一个叫做 layout， 在这个里面的话，我们同样的再来新建一个文件，就叫做 root layout。 ok， 然后呢我给一个 t h r， 这样的话我们就拥有了一个组件了，有了这个组件之后呢，我们接下来就说这个组件该怎样进行一个实现。我们首先呢在这个组件当中呢，先给他一个最基本的结构啊，那这块的 我们先把结构拿过来，就叫做 root layout， 然后有了这个结构之后呢，我们继继续呢，就是将你的 update test 圈当中的 header 呢这块的东西我们就不要了，把它干掉， 干掉之后的话，我们就需要来到 root layout 这个部分呢，我们把我们的内容呢能够先引过来，第一个呢是我们引入了 nave 啊 link， 接下来的话我们就把我们对应的这个 nive link 的内容拿过来了，当然呢我又加入了 u l 和 la， 主要是为了我们有一个相对来讲比较好看的一点样式哈，那这块的话我们就可以保存了， 保存之后我们这个部分的话，实际上就已经是处理出来了，处理出来之后呢，我们回到这个页面，这个页面当中呢，我们可以把它呢就直接引一下，在咱们的这个叫做 root layout 这个部分引一下，引过来之后，我们现在可以看，此时你会发现我们 当前的导航呢就已经是出来了，出来之后呢我们可以把它呢稍微往下一点，然后呢当你点击这个主页的时候，哎，他没有显示东西，大家可以看到，但是我们的路径呢已经发生了变化。 course， 然后这个地方就是跟路径， 我们要想让你的组件啊，就是当你点击了主页的时候呢，他找到的是你当前这一块的一个 pass， 这个地方呢，我们稍微调整一下，我们改成 index 就好了， 那我们希望他找到跟路径的时候，可以正常的跳转到 home 这个组件里面。那该怎么去做呢？ 你需要在你的 root layout 这个地方啊，就是 header 同级这个部分呢，我们可以再来去这个就是加上一个东西，我们给这个 mean mean 的话，然后呢后边我们可以给这个叫做 out light， outer light 的话，实际上呢其实就是我们的一个 啊组件容器啊，就是当你跳转到一个叫做 home 组件的时候呢，那么这个 out light 就是你去渲染的一个 home 组件，当你跳转到这么一个路径下的话，那就把 cors 这个组件呢给我们渲染过来，所以呢在这我们就可以直接引一下，把它引过来， 引过来之后呢大家可以看到此时呢就已经是拥有啊，主页还有课程。然后呢我们再把当前的这个样式呢稍微的去处理一下，所以呢我们来到 index 的 css 这个部分， 我们把这个样式呢就直接粘贴到这里来，这是我们对应的一个样式，就有一个基本的效果啊，当我们点击主页的时候呢，就是首页点击课程的时候就是课程，这样的话我们当前这一块的一个路由呢就已经是实现好了，我们把这个部分呢可以直接销毁掉了。

上一次我们介绍了 react router 的基础功能，这一次我们来点稍微高级的内容，其中路由欠套和奥特里特最有意思。好，我们开始。这次我们要在项目中加入图书详情页面， 图书详情页用图书 id 来区分，那我们就需要在 ur 中加入图书 id， 热爱和 rotor 加入 ul 参数的方式非常简单，就是只要在 ul 上加入一个冒号，一个参数名称，就可以把一个参数加入到 ul 中。 我们可以在列表页加上两个视力的链接， 这样我们看页面上点击图书列表的链接，就可以跳转到详情页。那我们在详情页当中如何获取 url 的参数呢？要使用 reactor router 提供的钩子函数， 你可是使用这个 use param 就可以拿到具体的 u l 上的参数，比如这里我们就就是 id， 拿到 id 之后可以把它展示到页面上，这时页面上就可以看到显示具体 id， 比如说 book 二，它就会显示二，点击 book 一，它就会显示一。 那有的时候我们需要在代码里进行呃，页面调整，怎么做呢？比如说我们这里有一个 button， 我们就要让他返回首页，那这个时候呢，就要使用 react 绕特提供了另外一个构思函数，就是 use navigate， 使用这个函数呢，我们就可以通过代码来动态编辑他的跳转，跳转路径， 比如这里这个八字，我们先响应一下他的点击实践，这个昂克里克是 react 的点击实践，然后我们传入一个箭头函数 室内，我们直接让他第一个参数就是我们要跳转 ur， 直接让他回到首页，这是我们看到页面上 有返回首页的这个按钮，你看点击返回首页，它就回到首页了。好，下面我们来介绍 reactort 的路由欠套。 reactor v 六版本的路由欠套非常简单，它可以在 rot 之下做子 rot 节点， 这样行， 这样就形成了一个二级路由的嵌套。当然他还功能不止如此，他可以在这里写一个 outlet， 一个组件， outlet 是所有匹配当前 url 最优的词，组件就会剪展示在这里。那如果我们这样，你看我们这时候再点 不可一不可二这两个例子，这两个链接就会在图书详情页上面直接展示出来。那么假如说我们稍微给他改动一下， 加上一个样式，这个样式是提前写好的，那也都很简单，就是用了一个 flag 布局， 这时你看这个图书列表的链接就变成了一个 setba 的二级菜单。 怎么样，联合绕特 v 六版本的功能是不是很强大？如果你感兴趣的话，请点赞关注，持续关注我们的分享，谢谢！

我们现在呢已经把基本的路由处理完之后呢，接下来我们再来去做一个事情，就是我们来去实现一个多级的路由啊。 比如说我们在 after ts 圈这个里边啊，我们再写一个，写一个陆游，并且呢他会拥有子籍。 我这块写的呢，实际上就是一个叫做 realt， 然后呢是求助的这么一个组件，而这个组件呢也会拥有一个连 out 里边呢他又包含了两个组件。其实现在的话我们就可以看得出来这是我们一级组件对吧，然后里边会包含他的子级。 在接下来的话我们可以找到的是这个二级组件，也就是杠 help 这个下面对应的组件。这个组件的话就可以找到咱们里边的这个 f a q 或者是这个 contact。 好，当你写 pass 为 s a f a q 的时候呢，表示的其实就是杠 help gun f a q， 当你写 contact 的时候，表示就是 gun help gun contact。 好。现在的话其实我们就多出来了一集这种路由了。那如果说你拥有多集的这种路由，该怎么样进行一个处理呢？实际上原理是一样的。 那我们这个地方呢有了一个叫做 help layout， 那接下来的话我们需要在咱们当前的组件当中呢来创建一下。在这呢我们就可以创建一个叫做 help layout 点儿 t s 叉儿好，这是我们最基本的一个结构了啊。 然后呢我们这个文件等会再去写，我们先在 root layout 这个部分呢，我们再加上一个 l a， 所以呢我们把它呢就直接拷贝一份 这个部分的话，我们就可以给他改一个叫做 help， 就是当他点击这个 help 的时候呢，我们会啊可以跳转到另外一个组件里边对吧？跳的组件呢，实际上跳的就是咱们当前的 help layout 这个里面。那我们来到这里之后呢，我们首先呢先将咱们对应所需要的内容呢给大家引过来，那这时我们引过来了，引过来之后呢，我们就需要去把这个组件呢进行一个书写。 这个部分的话，我们就跟咱们的 root layout 呢很相似，那这块的话就是有一个容器，然后呢有一个标题，再接下来是有对应的导航，有了导航之后呢，会有一个承载咱们导航跳转组件的这么一个容器。好，现在的话就已经是选好了。 写好之后呢，我们需要在这个组件当中呢把 help layout 呢给它引过来，那我们就从这个文件当中引过来。 过来之后呢，我们先做一个刷新，然后我们点击这个求助，当我们点击求助的时候呢，看到是这样的东西啊，那接下来的话就是没有显示对应啊我们的 faq 和 contact 这个组件的内容。那你要想显示的话， 首先呢你要去给他对应的这个组件啊，所以呢我们希望当他点击 f a q 这个 button 的时候呢，我们可以直接给他跳转一个叫做 f a q 这样的一个组件。那如果你点击的是 contact 这个内容的话，那我们就可以给他一个叫做 contact contact 这样的一个组件。那这两个组件的话我们就要去生成一下。那我们希望能够在 pages 这个里边呢新建一个文件夹这块呢，我们就可以给这个叫做 help， 在这个 help 里边的话，我们来创建两个组件，分别是 faq， 点 t s 圈。 ok， 这是我们对应的一个文件了。那有了这个文件之后呢，我们可以把它最基本的结构呢，就直接拿过来，很简单啊，因为我们主要说的是路由。 那接下来的话，我们在这个里边呢，再来创建一个文件，那这个文件呢就叫做 contact， 点 t s r。 好，这是我们这个联系我 我们的这么一个页面了。那这块的话，我们也是一个很简单的结构。那我们此时这个时候呢，就已经是把组件都已经创建好了。创建好之后呢，我们可以把它呢就该该关掉的关掉，这个部分呢，我们可以关掉，然后呢这块也可以关掉，这个也关掉留下一个 app， 点 ts 圈， 这个呢我们就可以直接引过来，所以呢引一下这块也引一下。引完之后，我们来看一下咱们当前多级的这个路由是否好使哈，这个部分呢，我们不需要它了，所以呢可以直接把它干掉。干掉之后我们来去验证。比如说我们点击主页课程求助，这都没有问题。 点击常见问题会显示常见的问题包括点击老联系老吴，那就会显示联系老吴对应这一块的一个组件。这样的话，其实我们就已经实现了多级组件该怎么样进行一个实现？

大家好，那么从本节视频开始呢，我们会给大家去讲解一下 react router， 也就是陆游。那我们现在呢已经是创建了一个稳定夹，叫做 react router new。 接下来的话我在这个稳定夹下呢，就直接创建我们的项目，所以使用 n p m create vita and least latest 点儿 在当前目录下创建的时候呢，我们选择 react 和 t s。 在接下来的话，我们就可以直接使用 n p m install 来安装我们所需要的模块。 然后呢，我们可以使用 n p m rendef 去启动一下这个项目。当你启动好这个项目之后呢，我们看到的效果是这个样子。接下来呢，我们对这个内容呢进行一个基本的处理。 after c s s 我们不要了， after t s 圈当中的内容呢，我们也全都不要了。接下来的话我们可以给他一个叫做 r f c 就有一个最基本 的结构。那这个呢我们就可以给他一个叫做 react router 好，我们现在的话就有这么一个结构了。在接下来的话将 indexer c s s 的内容呢就全部干掉。 mean your chase char 呢就放到这里就可以了。 现在的话我们已经把最基本的结构拿到了。有了这个基本结构之后呢，因为我们会用到 router， 所以呢我们需要安装它。那在咱们的新的终端当中呢，我们就可以直接安装一下 react to router doll。 我们装好了这个 rotor dum 之后呢，我们可以把它先关掉。接下来的话，我们需要在 app 点 t s 圈当中呢，将一个东西给我们引过来， 叫做 brother outer。 把它引过来之后呢，我们将我们的内容通过它包裹起来，所以呢我们把这个内容呢包一下，现在的话，我们其实就已经拥有了一个最基本的咱们的路由的结构了。接下来的话我们需要给大 家去说的就是怎么样能够去实现路由。那实现路由的话，第一步呢，我们先在咱们的 router dom 这个里边先引一个内容，我们把这个东西先干掉，然后呢引过来 route 和 routes。 有了这个东西之后呢，我们可以在 brother router 这个里面呢，先来创建一个 main 标签，它呢来包裹我们所有的内容。 并且在这个里面的话，我们会直接使用一个叫做绕词来去定义一个结构。在这个里边呢，其实就包含了我们所有可以跳转的路由。那在接下来的话，在这个下方我们就可以直接用一个叫做绕词。 绕字的话里边会有一个参数叫做 pass， pass 的话表示的就是你要跳转到哪一个结构里面去对吧？跳转到哪一个组件，哪一个路由地址里。然后呢你如果找到了是这么一个跟路径地址的话，他要跳转到哪一个组件呢？你后面要给他对应的一个 参数叫做 element， 所以呢我们给他一个叫做 element， 并且呢给他加上了一个叫做 div 为首页的这么一个内容。好，有了这个内容之后呢，我们就如法炮制，我们希望能够给他第二个， 第二个路由呢叫做 course， 也就是说当你这个地址后面加上了一个叫做 course 的话，那么我们就跳转到这个路由，那这个路由呢也要指定他要跳转的一个组件，所以呢我们就先给他一个叫做 element， 去 element 里边的话，我们就给他对应的是一个叫做课程。此时的话我们实际上呢已经实现了咱们路由的一个配置了。接下来的话我们可以来测试一下。 比如说当前这块你一保存你会发现页面呢就已经显示了首页，如果你在这个地方加上一个叫做 cors 的话，那么你会发现他就会显示的是课程。也就是说我们现在基本的一个路由结构呢是实现了的。再接下来的话，我们希望做的事情 就是在你的 s r c 下边来创建一个文件夹，这个文件夹呢叫做 pages。 在在这个 pages 里边呢，我们来新建两个组件，第一个呢我们可以给这个叫做 home， 点 t s 圈，第二个的话我们可以给他一个叫做 course。 第二 ts 圈。好，有了这两个组件之后呢，我们接下来可以在 home 这个地方呢给他最基本的一个结构，那这块的话我们就可以直接给他一个 home， 或者是就叫做手印。当然这个里面的话大家呢可以自己去写啊，因为你可以写很多很多的内容，包括他在引入其他的组件都是没有任何的问题。 我们的重点呢是要给大家去说明路由。所以呢这个部分的话我们就用一个简单的东西了，那我们可以给这个 r f c 这个部分的话就可以给他一个叫做课程。课程好，现在的话两个路由组件都已经有了。有了这两个组件之后呢，我们接下 来就需要把这两个组件能够拿过来进行一个使用，拿过来进行使用的话，我们可以回到 up 点 ts 圈，这个部分就不再使用它了，而是我们可以直接给他对应的一个组件。组件的话名字呢，我们就可以给他一个叫做 home， 这块给这个叫做 home。 在接下来的话 home 呢你需要把它引过来，那我们就直接从啊咱们配置词里边引一下。这个部分我们可以改一个叫做课程，所以呢，这块改成叫做 course。 有了 course 之后呢，我们同样呢也把它呢进行一个调整。那这个部分呢，就是 course。 有了两个组件之后呢，就有更多的可能了。比如说我们现在的话， 把这个内容全部删掉的话，他就会跳转到咱们的首页，然后呢，如果你给他的是一个叫做 course 的话，他就会给我们跳转到课程，这样的话我们就实现了路由的一个跳转了。

那接下来的话我们来对咱们当前的路由呢再进行一个优化啊，我们不再这样去写了。但是呢，我们先把我们路由这个部分的内容呢进行一个截图，大家要知道我们现在所有的内容呢，实际上是在 brother road router 这个里边，所以呢把它呢就截一下， 剪完之后呢，我们把它稍微放小一点，这样的话就不会影响我们整个的页面。后面的时候呢，我们会参照这个东西。 接下来的话我们需要做的事情是将咱们的 brother outer 呢就直接删掉了，我们不再使用这个东西。然后上面这块的 header 呢，我们暂且呢先给他注视掉。 当我们注视完之后呢，接下来我们再来做的事情就是我们要在外部啊来去定一个新的创建路由的东西。所以呢，我们可以 const 定一个叫做 router， 然后使用一个叫做 create brought brought router 这么一个内容。在这里的话，我们需要去借助另外一个东西，也叫做 create， 然后拥有一个叫做 brother， 或者是叫做 routes 啊 from elements 这么一个内容。 那也就是说你的一个方法当中又拥有了一个新的高级函数对吧？然后在接下来的话，我们在这里边的话就需要有对应的内容了。那这里的内容呢，实际上就是我们现在这个部分的绕词，所以我们把这个绕词呢就直接放到这里，这样的话我们其实就已经创建了一个内容。 当你创建了这个内容之后呢，接下来我们不再使用 mean 了，把它呢就直接干掉，然后我们会使用新的东西， 这块的东西呢，就是 rotor provider 这么一个东西，它呢其实是一个这个提供器组件啊，我们把它呢也直接引过来，他从这个 react rotor dom 这个地方引过来了。现在呢，我们不再需要 link， nave link 和 browser， 对吧？我们先把它呢干掉。 link 和 nave link 呢，我们暂解，先留着一会我们还会用到。那我们接下来说这个 router provider 这么一个内容。 这个东西呢，其实它的作用啊是将一个已经创建好的路由对象，也就是说我们已经创建好的路由对象的话，就是这个绕腿这么一个东西传递给他的子组件。也就是说如果你在这个里边去写的话，那么跟咱们的爱不点 ts 圈有关的这些组件的话，都可以应用到对应的路由， 这样的话这个子组件就可以访问到路由相关的一些信息了。所以这个是 rot provide 它的一个作用。那一旦一有了这个内容之后呢，我们现在保存可以来刷新一下，你会发现此时的话其实没有任何的东西显示了。然后呢，我们来看一下咱们当前的 ctrl， 并且我们把这块的内容进行一个调整， 接下来我们刷新一下。刷新的时候呢，他会告诉我们一个问题啊，这个问题呢是说什么呢？就是你当前的这个 rots 里边不能够去包裹这块的内容啊，你在 creates rots from elements 这个里边的时候，你想要去解决这个 bug， 你直接把 rots 改成 rot 就可以了， 直接把它改成它就完全完全没有问题。我们在这呢可以刷新一下，刷新之后呢，我们来再去试测试，大家会发现此时呢就已经是出现了这个课程啊。然后有了这个课程之后呢，我们可以把它呢干掉，我们看看手印能不能正常的跳转。大家可以看到手印也可以正常的跳转了，也就是说你路由这个部分的话已经是实现了。

接下来的话我们来给大家去说一下怎么样去创建一个导航啊？我们把这块的内容呢先收起来，创建导航的话，我们可以在这个地方呢就加入导航，但是加入导航的时候我们会用到两个东西，一个呢叫做 link， 一个叫做 nave link， 我们来看一下他俩之间到底有什么不同。接下来呢我们来定义咱们导航的一个结构，我们先给他一个 header， 在这个 header 里边的话，我们同样呢给他加上一个叫做 nav nave， 然后在这个里面的话，我们用 h 一呢去标明一下，咱们现在是一个导航。 接下来的话我们给他一个 link， 这个呢其实就是我们要跳转的一个路径了啊，不需要我们在咱们当前的这个 u i l 里边来回的去写，有了 link 之后呢，我们在这个后边呢给他加上一个分割符，然后我们再使用一个 nave link， nave link 也好， link 也好，它里面呢都会有一个 two， two 表示的就是你要去跳转的一个这个路径了啊，那我们这是首页的路径，这个呢是课程的路径，现在这两个路径都已经拥有了，接下来呢我们可以保存，保存之后大家可以看到我们此时这个地方就已经拥有了主页和课程这个路由了。 有了这个路由之后呢，我们现在可以来去跳转一下，点击主页，大家会发现这个地方就会显示主页，当我们点击课程的时候呢，他就会出现课程， 那两者之间有什么不同呢？或者是我们应该去使用哪一个呢？这取决于大家的一个情况哈，我们来说一下他俩之间的不同，我们就理解在什么样的情况下你去使用他了。 首先呢我们把它呢稍微往上一点，然后呢大家可以看到拥有一个叫做这样的是主页，也是一个 a 标签，然后这个呢是课程，也是一个 a 标签。但是他俩之间有不同的一点是，如果你使用的是 nave link 的话，它会帮我们自动加上一个 class， 叫做 active 这么一个东西，如果你做的是导航的话，那最好呢还是使用 nive link， 对吧？因为你点击哪一个的时候呢，让它出现一个活跃的状态，这是比较不错的一个情况，那我们现在呢可以保存一下， 保存之后呢，大家可以看到我们当前的主页呢，因为它不在活跃状态下，那么它的 class 呢，就是一个空的，然而课程呢是在活跃状态下，所以呢它的 class 就是 active， 那这样的话我们就有的选了，对吧？如果说你是自制作导航，那么你就使用 nave link 就好了，如果你是正常的一个跳转的话，那么你使用 link 也可以，所以这个地方呢，我们就选择使用 nave link。

各位同学大家好，那么我们本节视频呢会给大家去说一下怎么样来创建一个函数组件。创建函数组件的话，你首先呢来创建一个函数，比如说我们这个地方拥有一个叫做 hello react， 返回的呢是一个 ts 圈， hello react， 我们希望将这个内容可以渲染到咱们的页面上的话，那么你就必须要找到入口文件的一个标签。我们的入口文件呢，实际上是 index star html， 这个里边呢会有一个跟标签叫做 id 为 root， 那么我们所有动态的这些 dom 都会放到这个容器下，一旦放到这个容器下的话，那么你的页面呢就可以正常的显示出来。 那我们就要想办法，那么命点 ts 圈的话，实际上就是关联咱们当前这个内容。那我们要想拿到他的这个里边的 root 文件呢。首先第一步你要先来 去引入咱们的 react dom， 把这个 react dom 引过来之后呢，你可以通过 react dom 呢去将咱们的这个标签获取到，并且呢放到咱们的 create root 这个里边。 这个时候呢你其实通过他已经是可以拿到一个实力对象了，那我们这块呢可以就把他注视掉。然后呢，我们用一个实力对象呢，来来去存储一下咱们这块所定义的一个内容。 那么这个 route 实力对象呢，它可以包含对应的方法叫做 render， 就可以去进行一个渲染。那这个时候呢我们就可以通过 render 把我们的这个函数组件放进来，那此时呢你就可以正常的将 hello react 渲染到咱们的页面上了。 大家可以看到浏览器当中已经显示了 hello react， 这样的话，我们其实就已经生成了第一个函数组件。

呃，如果我们要使用这个陆游，第一步呢，先要去安装，哎，先把它给装好，记得啊，先把陆游呢，我们先装好。 那么路有主见呀，这一步呢，大家也要记得先要提前的把它呢导入进来。好，我先跟大家在这一块呢，来这个呀，咱们导入进来，有同学说导在哪个地方，对不对？好，我跟他把这块也写一下，那直接的你放在这就行。好，比如我们放在上面吧，哎，我们是不是引入进来， 那么刚才给大家在引入的过程中，哎，很多特性分别代表的是什么啊？你看我们在里面写到了，比如说，哎，不饶着 rotar 对不对？ roots， 哎， rootton， link 等等，这些代表的是什么？ 好把它导入进来以后呢，我来跟他一个一个也简单的说一下，这些，你们可以借助于跟 vivo 能进行类比。第一个呢，不知道这 流产呢，它代表的是什么？它呢，我们可以理解为相当于是一个容器，它是我们浏览器自带的一个 api， 是一个容器，这个容器里面呢，可以放我们的，哎，别说肉扯，放我们的宁可等等等等属性， 他必须啊，一定要记得在我们的最顶层呢，哎，放，也就说他会包裹我们所有的，哎，你里面只要设计到有陆油的，我们都会包裹，一般我们放在最顶层。 好，那在它里面像刚才给大家提到的需要包含这个褥子， route， 哎，还有宁可等等这些又分别代表是什么意思呢？简单也跟大家说一下， 首先我们的这个 route 大家可以理解为 vivo 里面的，如特 vivo， 哎，这样说的话是不好理解了，它的作用就是我们陆游的出口，也就是说我们会根据里面匹配 你当前的路径，匹配了我们的组建加载的就是谁，其实这一块呢，也比较容易去理解，你看当前写到的这个呢，就是我们的组建匹配 匹配到什么？那么你要加载或者映射的这个主见是谁？哦？我在里面写到的是 index， 对不对？哎，把它能渲染出来。好，这个呢，就是我们刚提到的陆游的出口。 路由的路口又在哪里呢？我们要通过令可，哎，这个组建来进行跳转吗？就跟我们的如此令可。 vivo 里面呢，是一模一样的， 那么如特林肯，你要跳到哪个地方？他是通过谁来进行跳转的？我们听通过这个处，哎，在里面有一个处属性，通过他能进行匹配好，其实这个地方的话和我们的 vivo 呢，是没有蛮大区别，那既然把话已经说到这一块了，我们来写一写啊。好，行，那在里面具体应该怎么做呀？人家刚才给 给大家说到的这些，这个啊，你看我们刚说到的内容，可以这样去理解，内容的话就是我们具体陆游的这个出口吗？对不对？那既然说到陆游出口啊，好，我们再一次瞄一眼刚才给大家写到的， 我在里面是不是要把这一段给大家先哎，直接的添加进来，我们先放在这啊，这一方先不着急的去保存， 因为里面的很多很多都还没有，你比如说你的具体的组件呀？不是，这些我们都还没有添加 好，我在里面想拥有的这个主见呢，有哪几个热呢？是我们的后首页，比如说第二个呢，是我们的哎，搜索页对不对？好，在里面呢，我还要添加什么购物车，还要添加什么？我的，哎，其他的呢？同样的方式啊，你呢？直接添加进来。好，那么 添加进来了以后，我们这个时候还要对他进行一些什么样的处理？组建，我们要把组建给添加好。行，说到这块我们来看一下，你看在我们的组建里面啊，首页购物车包括搜索页， 你还需要在前面提前呢，把这个主页呢，我们要导入进来，比如刚给大家提到的走页，那么它的来源一模一样，你看它应该在我们的这个 project 的同级，这块和 vivo 呢是完全完全相同的， 不用考虑太多。好，行，这个呢是我们刚提到的首页，我还要在里面呢去加载，比如说搜索页呀，哎，包括购物车呀，对不对？ 请把这些页面呢，我们一个一个的导入进来。为什么要先把这些导入进来？因为你要是不导入进来的话，我们的那是没有办法去加载的。好，你看我这个时候在里面就写了， 他要加载的是我们的首页啊，他要加载的是我们的周首页，这个呢是我们的爱护车，对不对？是我刚才给大家提到了，他仅仅只是相当于我们的出口，也就是说我们这个地方相当于是通过如图 vivo 来进行展示的。 那么我们的入口呢？包括我们刚才提到的，不知道这入程呢？把它放在最外面，记住不能放在单纯的放在这。不行，因为宁可呢也要受到他的影响。好，我给大家踢到最外面来，我们要不然踢到这啊， 在这不是这样的话，相对就比较清晰了啊，好，在它里面我这个时候又要写什么？我们的具体跳转，大家想一想，通过的是艾令，可，对不对？所以说你在这个地方要跳转把 a 标签，我们就要换为艾令可标签，你要去到哪， 你直接的通过这个处呢？就可以了。好，比如说我们这个时候跳转，跳转到我们的首页，哎，写完了，后面这个呢，我一个一个跟他改，来，把这一块我们都给他改一改啊，像刚才看到的 a 标签，还有我们的，哎，结束标签，行，这个地方，那我就来， 反正一二三四个啊，咱们四个这个写的也方便。好，行，这个给大家写完，后面的这个呢，我们也一个一个来写啊，哎，立刻，对，好，那写完以后我这个是跳转的，我们具体的这个内容是比较改啊，搜索页呀，好，这个呢？是什么购物车呀？好，这个呢？比如说我的呀，可以把它都写完， 所以说我们在 reach 里面要进行陆游的出口，陆游的入口，他的定义方式一定要记得。那刚才在给大家写到这块，也同样的需要把我们的比如说入， 哎，包括如此令，可这些呢，都提前的导入进来，你不导入呢，他也是没有办法去完成的。好，行，写到这一块了以后，我们来页面给大家刷新一次啊，看一下 展示的效果呢，是什么样的。好，我点击首页，哎，有突然发现里面出现了一个导航，当我点击搜索搜索页，购物车，哎，我的好，我的里面我没有去匹配，那这个时候我们在不断点击的过程中，内容发生变化，没有变了， 看一下我们的 uil 地址啊，这每一个地址在点击的时候是不是都会变化，这个才是最最最主要的，所以我们的这个陆游的版本为六， 他在我们的 react 里面具体的使用方式，刚才给大家提到的这块清晰了没？非常简单对不对？一定要 记得清晰的知道好，行，这一块的话，有没有小伙伴有疑惑的呀？啊？刚才提到这块这个地方有没有疑惑，有疑惑的同学可以提出问题，嗯？卡带那个路，匿名，还有我们的啊，这个路恋 啊，陶立明，陆恋，还有我们的新手老司机，哎，这些小伙伴都有没有问题，有问题大家记得提啊。好，还有我们这边风同学，林同学，哎，风信子小伙伴是否都能那个跟得上，有问题不？没有问题我就继续了啊。好， 刚才在给大家聊到这块，我们的点击跳转呀，是可以了，但是点击跳转以后有以下问题啊，第一个， 你说当前的这个样式他不得跟着来吗？你点完了以后，你会发现我们的样式没了呀，这就永远在首页，这个是我们要优先解决的 一个问题。第二个问题，我们在点完了以后，它里面的具体内容不也应该随着这个变化而变化？而且在给大家写底部导航的时候，我们现在是复制粘贴写多个， 那万一这个内容要是动态的或这个内容我们要公共服用在我们的 react 里面，他的处理思路又将是什么样的呢？好，所以接下来呢，我来就着刚才提到的几个问题啊，我们继续呢，再来给大家往后面去说。

不管你是 vivo 的项目还是 real 的项目，在拍给这两件事里面都会看到这几个依赖，他还不是个 rap， 刚 eating a plug， 还有一个这个配套文件，还有一个这个依赖文件，还有一个这个，还有一个这个， 还有这两个，一个是 read 的，一个是 vivo 的，这些依赖都会对应到一个配置文件，就是这一个 eilink rc 的 gs， 那么他们到底是什么样的关系，应该怎么样配，彻底的讲清楚，让大家每天学一个知识点，当然这也是一个面试当中的一个问题。 咱们首先先看这一个 e s link configer parent， 这个其实是一个 e i link 的配置，它是用于将 e s link 的规则与 parent 格式化规则进行协调，确保 e s link 和 paren 不冲突，允许两者共同工作。这个中间这个是 plate 的，那么这个其实是一个 es link 的一个插件，用于将 pront 应用为 es link 的规则， 他允许你在运行 eilint 检查的同时，应用 pront 这种格式化规则，确保你的代码风格的一致。这个 eilink voe 是干嘛呢？这个其实是针对 voe 项目的一个 eilint 的规则 啊，提供了特定于 v o e g s 项目的这个验领规则，用于检查和修复 v o e 单文件组件中的代码的风格的问题， 确保代码和质量一致。那么这个后面这个 rex， 它其实就是检测针对 rei 的项目的一个 eilink 的一个插件。那么这个呢？它其实是针对 ts 项目的 eilink 的插件，因为咱们是用了 ts， 它提供了 特定于 ts 的 es 的一个规则，允许在 ts 代码中进行静态分析和检查，提高代码的质量，那么这个 就是一个解析器，用于将 ts 代码解析为抽象的语法术，一般的话这两个会合起来使用，确保也立刻能够理解和处理 ts 代码。那么这些依赖都是增强 esd 的功能和对你的项目做特殊的代码风格的定制化的需求。那么这些依赖都会对应到 这一个文件啊，这个配置文件可以一点结实结尾，也可以一点结实结尾。咱们看这个 plus 里面他有这个 print 的这个配置，那么这个配置就对应到咱们的这个依赖，就 eilink pluginprint， 在这里面还能看到这个这个 v o e 的这个配置，那么这个对应的依赖就是咱们的这个文件，包括咱们这个地方的 plus v o e 也是同样的，那么这两个依赖呢？运用到咱们这里面的配置的就是这个地方的 这两个依赖。其实这些配置文件我们可以根据具体的项目需求进行调整，添加对应的插件和配置，可以开启对应的规则和功能，这样的话你满足你特定的代码的一些检测。如果大家有什么问题可以评论区留言。

从零到一搭建一个 red 项目，怎么样才算一个保姆机的教程？我们团队里面目前正在使用的 red 项目的一个模板，该怎么样设计他的木结构，包括里面的每一个配置项目，他是干嘛的？ 配置下里面的使用说明，每一项的配置就拍点接生员，我安装了这么多依赖，有些依赖是干嘛的？我们团队里面的这个模板，每一项都有详细的说明，包括你做打包优化构建的时候，这个外派的配置，每一个插件是干嘛的？我们应该怎么样配置？ 开发环境我要做不同的处理。还有咱们看所有的项目都会有背包的配置文件，背包怎么样才是一个最佳的配置，它里面的每一项应该怎么配，包括他为什么这么配，最重要的是他还有代码的视力，比如我要做一个功能， 该怎么去做，我们拿过来比着更改就可以了。一个盖了图，我们这个项目所涉及到的一些模块和生产环境上的模块，每一个配置都有一个老图，目前这个项目呢是我们团队在使用的。

哈喽，大家好，今天我们来讲一下 next 的街市路由跳转呢。我们知道在传统的 react 项目中的话，我们有两种方式，一种是使用组件式导航，一种是使用编程式导航。我们需要引入这个 react rutodorm 这个库， 然后引入这个宁可标签，宁可标签里面传一个吐的属性的话就可以。呃，编程式导航的话，我们要用，要使用它里面这个优质那个 gay 这个 hook， 然后使用这个 new gate 传入这个路遥的地址就可以了。 当然如果我们想要对某一个路由呃判断他是不是当前的一个页面的话，对他设置不同的样式的话， 我们需要引入这个 netwink 这个标签，同样也是传一个吐的属性 啊。不同的是他这个 class name 的话，可以传一个函数，在这个函数里面我们可以获取到 is active 这个状态，然后根据这个状态设置不同的这个类名，这样就可以了 啊。在内饰街上是什么样的？我们直接看代码吧。内饰街是为我们提供了一个 next link， 在这个包里面他提供了一个 link 标签，呃，名字名称是一样的，不同的地方在于他这个里面这个属性是 herf， 呃，不是 to， 他可能是为了和那个 hm 那个 a 标签保持一致啊。嗯，那如果我们要 使用那个编程式导航的话，我们要引入叫 user rotor 这个 hog， 它是在这个 next navigation 这个包里面的， 当我们使用这个后口的话，那我们这个页面或者组件的话，我们就要变成客户端主页。如果我们只只使用令口的话，不需要啊，这里我就不写这个编程师导航了， 这里我主要讲的是他的 netwink， 在那次接送的话，他并没有我们提供一个 netwink 这个 呃，标签呢？我们要如果没有实现那种效果的话，我们要引入一个 huge person name。 呃，这个后果，这个后 同样是来自于这个念诗的 gay 型的。这个包，我们在下面直接 boom 的一个 pass name 等于一个 use pass name。 在这个地方我们判断一下啊， class name 等于 在里面判断它的 pass name 是否等等于当前的这个 half 里面这个值啊，如果等于的话，我们就给他设一个，比如说文字变成红色， 如果不等于话，我们就不用管好，回到页面中看一下啊， 我们可以看到现在我们点到这个后路由下面画他这个文字就变成红色，我抱他。没有啊，我们可以把这个封装起来啊，我们可以写一个办公室的 等一个， 这里面我们肯定要使用到那个 link 标签呢，我们这里面肯定要首先要获取，还要 helpful class name 或者说其他的啊，这里我们要给他写属性的，属性的话， 呃，派出所是个都不算， children 的话是个 rec rec node class name， class name 是个 steam class name 这里比较难写啊，它是可以是个 steam， 也可以是一个函数。 oppo 里面有一个一只 active 写一个 boss， 哎，返回一个视镜或者 m t five， 我们把这个 novelinger 放到下面看一下啊，同样传一个 hero 服过去。 这个地方呢，它这个 class name 它有可能是四四五串，也有可能是函数啊，所以我们要 type off 一下，如果它这个等等于一个 function， 那我们就让他使用这个 class name， 一个 is active， 这个没有的话，我们就要 它使用 class name 这个，因为它有可能是支付状，也有可能是函数，那现在这个 exactive 它找不到这个值，这里面的话，我们同样也要判断一下，就是控制的一个 exactive 等于 harf， 等等于 pass name， 那它这个 pass name 的话，我们同样也要控制的一个 pass name 等等 use pass name。 好，咱们看一下 啊，这里是括号啊，大括号。 好了，现在看这个页面爆不爆了哦？爆的话我们使用这个 navelink， 然后在上面写个 class name， 这里面我们可以拿到一只 active， 我们给他文字视为绿色吧，如果他高亮的话，否则的话就不设置啊，好，保证看一下。 ok， 没有问题啊，那这样我们就封装了一个 novlink 效果，这个 novlink 就和那个 rap 里面这个 novlink 的用法啊，是保持一致的。 naval link， 这个，你这个 naval link 我已经写到我的这个文章里面去了，你们可以访问我的那个个人网站，可以看到这里就是 next。 这是 naval link 的一个写法呀，可以直接拿去用啊。 好的，今天的分享就到这里，关注我，教你更多 nice ts 知识。

那从这双鞋叠照曝光之后呢，主要是有两个信息点大家讨论是比较多的， 第一个就是他的外观怎么样，颜值怎么样，这个东西比较见仁见智。第二个的话呢，就是他的这是中底配置，也是一扫就曝光了全掌的 react 材料。我看了一下网络上大家伙的讨论啊， 那对于这一次换成 rex 材料呢，大家其实分成了两个门派，那第一个门派的意思呢？就是耐克，你怎么这么抠啊，从之前一二三代的这个 doom 换成了 so， 期间不说，哎，这一次连气垫都不给你了， 这是第一个，那第二个声音更多的是挺这种 pg 六啊，意思说，哎，之前你们吹这个还不当一区的，跟今天喷 pg 六的可能是同一波人。那关于这个终极配置，我来聊聊我的看法。首先 我是肯定不认同第一种说法，就是觉得气垫都不给了，不用说从 so 气垫换成 reactor 了， 哪怕是从前掌的作母换成全掌的 react， 我觉得这也不能叫做这种科技上的减配，全掌的材料缓震是由他一定优势所在的。当然了，我也不完全认同第二种说法，就 认为这个皮球的配置会因为这个全掌的 react 啊就变得有多好，甚至说能跟这双鞋去媲美。 非常重要的一个观点啊，就是我认为 hiper dunk 一七这双鞋，他强绝对不是强在他这个中底材料上面，所以相同中底材料的 pg 六代究竟在实战方面有什么样的表现，这个问题我觉得完全不能够过早的下定论，那我自己也 没有实战过，所以我也希望大家能够关注一下我们，后续在分享实战测评的时候会来跟大家聊到，关注我给你带来更多实战鞋测评，也是运动装备分享。

好，那么，呃，所以呢，我们今天的话就开始学习我们的 rat 了啊，那么 rat 呢？是啊，另外一款框架 啊，那么他是一三年的时候呢就出来了啊，一三年当然是一个啊， facebook 他自己的内部项目啊，他自己的内部项目，然后呢，做完之后呢？哎，把这东西呢，开圆了啊，开圆了， 开元的话呢，就是相当于说，哎，想给大家呢去，这个可以使用啊，可以投入使用。呃，一般的话在一开始出来，因为这东西是外国人写的嘛，所以前面的话比较流行的还是在啊国外先火起来，当然现在国外的话比较火的也是这个， 也是这个啊 rector， 因为的话，因为 view 是咱们国内的嘛，然后 view 的话其实也参考了他的一些写法，明白吧？呃，也参考了他的一些做法哈，这框架好，所以 所以说呢，呃，这个 rat 啊，那么在国内的话，因为又有 view 的出现，所以导致了他呢，其实也没有说 大啊，这个广泛的去试去去使用哈。但是呢，呃，如果说，如果说你是遇到一些大的公司，其实瑞克还是要求的，明白吗？哎稍微大一点的公司，瑞克其实还是要求的啊， 那么行，所以说啊，所以说 rec 啊，这个也是很重要啊。那么这里面呢说这个，呃， rec 是什么？是 mvc 当中的 v 哈，什么意思？就是仕途层，它处理的是仕途层的一个东西啊。呃，性能，性能，它对性能方面要求是比较高的 啊，那么一开始他出来也是也是啊，打着这个性能的一个名号哈，那么这个 会比会比以前啊，这个原始的开发啊，原始的不是跟没有比哈不是跟没有比啊，是比以前原始的啊，这种用这块的这种写法啊，那么性能要高好，那么 代码的逻辑啊。呃，非常简单，这个的话呢，我们待会写到才知道啊，那么很多人这个哈这个开始关注他的使用啊，这个呢，其实在国内也会慢慢的啊，火起来啊，也会慢慢的火起来，只不过这回呢有 you 在在啊存在啊，所以可能也是 他没有说真正在国内火起来的一个大火的一个原因吧。啊但是其实大公司还是有啊，这里面呢有一些他的特点，他的特点啊，什么声明是对吧？这个这个哈这个我们待会讲到你又知道了哈其实就相当于说， 呃不需要我们自己去操作啊，不需要我们自己去操作啊，那么你只要写一句啊，那么他自己去操操控啊，他自己操控不需要去写这种这种动啊。其实你有这种框框架的开发经验了，已经知道了，所以基本上我们写任何代码不是说啊，我上来写一个都乐福然后干啥就选择对不对。不是啊，不是 好，那么都是通过数据来控制界面的。嗯， gs 叉这个使用 gs 差语法。 gsx 是什么呢？大概简单说一下啊，待会我们写到你要知道就相当于什么呢，相当于你会发现就类似于你在你在一个 gs 文件当中你居然可以看到类似于 htm 的写法。 哎这种啊，那么这个东西叫什么呢？叫 gsx 啊， gsx 好的一个写法啊，那么待会呢你就会看到啊，待会我们写到你就可以看到了啊，那么行那呃 比较灵活啊比较灵活。这个呢？这个其实基本上框架语言啊，其实基本上都是这个样，呃使用使用虚拟动啊，高效虚拟动， 虚拟动，呃因为他这个东西啊，就是虚拟动物是什么？同志们大家应该前面也了解过对不对？虚拟动物是什么？是一个结结对象对不对？ 那么之前老师就告诉过大家说其实啊，其实像这种，呃我们所写的这种啊就是节点啊， note 节点，当然不是说我们说 no 的福气啊，不是啊，这个节点嘛，就是说呃 div 或者啊什么 p 标签这些，那么其实呢他们呃都可以用这种 js 对象，是不是来表示啊？ 对吧？以前好像给大家写过，比方说 tag name 对不对？ tag name， 然后呢啊它有哪些属性？ plus 对不对啊？有哪些属性啊？还有什么直组建然后指标签求人对不对？像这些 啊，用这种 js 对象啊来把它模拟出来啊模拟出来，呃好，然后呢他其实真真正正的你可以看到哈，你是这样你待会就可以看到这这一种 他真正的是用一个方法啊来去创建一个对象，创建完对象之后啊那么他渲染的浏览器上面其实是一个啊，就相当于说模拟出来的这么样一个啊，一个动数啊，一个动数。好， 那么这个呢，你大概知道一下啊大概知道一下，然后主电话开发这个不用说了啊，这个东西都是都是这样，然后这个都是写主见啊来开发的，所以我们只要学会哎主见怎么写就行了。单项数据流 大家最流行就是说的是什么？说的是这个富传子，然后呢啊，这个子传富的时候实际上相当于什么？像我们这个 view 当中的，他没有直接给我们在子主建当中去修改副主建的数据，对不对？哎， 其实这个啊好，呃，行，那么这个呢，就是我们所说的啊，这个 record 的一个简单的一个介绍啊，大概呢了解一下啊，大概了解一下，到目前的话国内的一个现状，是啊，一些大公司呢，他会去， 会去这个使用它，然后呢中中型公司，小型公司可能就没有用它啊，那么中型公司的话呢，那一般来讲这个有一些会慢慢的向这个方面去靠拢了啊，有一些，所以说 view 跟 record 啊这些呢，其实大家都要会啊，大家都会。 好，那么来到这里面啊，这个呢？呃，那说了这么多，我们其实大概的啊，了解一下，说他的一个项目的创建以前呢，我们在这个 view 当中啊，我们是先干什么呢？下载一个交友架上来，对吧？下一个交友架下来，然后呢我们就开始 去进行啊，这个在加油站上面呢，去进行一个啊，开始搭建去修改。那么 rec 其实也有这种官方的一个叫叫啊，叫做他的名字叫什么？叫做可爱的 react app create ray app， 就这个调查价啊，这叫这个调查。还记得我们以前这个 viu 的吗？ 对， v u e 对不对？ v u e at v u e 啊，这个斜杠 plan 对不对？哎，就这个啊，就这个叫叫啊，这叫叫，还记得我们安装过，对不对？ 安装过啊，安装过好，那么这个啊，那这里面我们说，呃，他这个交友架哈也是他这个官方提出来的，所以说其实就是官方在用啊，官方呢，推荐，我也推荐我们使用啊，同样的也是呢啊，这个 wipe 搭建的啊，搭建的 好，那么那这个是相当于啊，有一个脚趾架出来给我们，那我们待会得通过这条命令来创建，但是你会发现我们之前用的是 mpm， 对不对？现在有一个 mpx 啊，那么 mpx 又是什么呢？ 那么首先一个啊，就是 mpm 啊，我们我们以前用 mpm 去下载东西的时候呢，他其实下载他要么可以下载到你本地，本地的路径就是你这个项目文件夹里面，对不对？那么还可以下载到哪里？全局，全局，我们加一个什么杠精，是不是全局， 对吧？这是 mpm 的啊，以前学的，那么今天，今天啊，突然间见到了一个啊，这个 mpx， 对吧？那么这个又是什么呢？说安装了之后啊，他会帮你去啊，他会帮你去直 形衣带包里面的二进制文件。这个好像听起来很高级啊，那么实际上本用大白话讲是什么意思呢？就是你不需要把这个东西啊，直接下载到你的本啊，这个全局了， 不需要了啊，不需要了，那么他就直接，哎，执行这条命令，他就相当于直接给你创建了，直接给你创建了，你不会在全局当中或者本地当中去出现这样一个东西了， 明白吧？不会占用你本地或者全局的一个空间，明白吧？啊，就是这个意思啊，好，那么当然啊， nb 叉，他说了啊，这个在一代包这个文件当中啊，在你当前 啊，这个文件的一个依赖包当中啊，那么去执行啊，那么如果找不到呢？哎，他就会到 pass 里面去找啊，那么如果找不到呢，他就帮你安装，所以像这个啊，像这个 mps 啊， mps， 那么他在 mpm 五点 点二点零开始就已经有了，就已经有了啊，就已经有了，哎，我们 mpm 现在是多少大家知道吗？ mpm 杠 v， 当然这个东西跟你的弄的有关，是不是跟你弄的有关吗？ mpm 啊，这个 范围对吧，应该是六点几的吧，没记错的话应该是六点几啊，六点几的，所以说呢，现在其实是都是有这种 mps 的啊，都是有 nps 的，所以呢啊，这个就是我们所说的啊，用来创建项目的啊，这样一个命令， mps 酷瑞瑞 app。 再说一遍，这个东西是什么？ 是脚手架名称后面这个东西呢？项目名称，我们文件夹的名称，对不对啊？哎，我们 viu clear 是不是也是这个样子啊？哎，也是一个文件夹名称啊，然后在这里面呢，我们因为，因为啊，这个我们要下载 用这个命令，所以有些注意点，你还是需要知道的。首先第一个就是说呢，他建议运行在一个 no 的版本的一个幺二点幺三点零的 以上的一个版本，那所以你会看到我们刚才的一个版本是幺零，那么就是在这个之下，对吧，所以我们呢，至少你得安装一个这么样一个东西， m v m 啊， l s， 你可以看一下，我们没有这个东西，对不对？那么就 m v m 这个丁斯多，还记得这个命令吗？ 对吧？ v 幺二点一三点零是在干什么？对，安装这个版本的 no 的对不对？ 安装这个版本的 no 的啊，好，那么我们就先安装一下啊，他既然提提建议了啊，那我们就把他这个东西按照他的这个来好，然后呢在这里面呢配置一个镜像员哈，为什么要配这个镜像员呢？因为如果没有配的话，你到下载会非常非常慢，甚至有可能断掉就失败的，失败的这个概率会很大。 明白了，所以说呢在这里面先配一下，我可以看一下我们的这个我们的这个啊目前目前是什么 啊？目前已经是淘宝了，那么你就不用在执行上面了，你看一下如果不是淘宝的最好改它。改一下能用完吗？哎，最好把它改一下，然后呢我们再去啊创建我们的一个项目啊，实际上就是这个。 好，所以说呢假设我们现在呢啊我就想要开始来创建我的项目了啊，好，那么怎么做呢？来，注意看来到我们今天要创建的这个项目文件呃，这个文件夹里面， 但好，那么我就在这里面去走啊。 c m d 好，那么怎么走呢？就刚才因为我们现在你看 no 的 m n o d no 的刚 v 我们看一下有没有哦，现在还是还没切换过来是吧？没有啊，那么就 m v m 怎么切换？同学们， 哪一个哪一个？柚子，同学们，柚子不要忘了啊，幺二点幺三点零 对吧？啊，把它切换过来啊，切换过来，然后在 nba m s 看一下，有吧有的啊有的。好，那么这时候就可以开始啊，你看再再来一遍 no 的干杯 是吧，就已经切换过来了啊，所以在这里面啊，来，我们把刚才那个关了啊关了。好，那这时候干什么呢？我们就可以执行我们刚才所看见的一个命令啊，那么第一次敲我就把它这个完整的敲出来啊， crate reabb crat great reairaact 这单词要会拼哈， 好，那么 abb， abb 好，那么阿呆萌啊，阿呆萌，好，那么这时候回转好，那么就相当于 他现在呢，已经在开始去进行安装啊，这个咱们这个第一个项目了哈，我们的第一个项目，行，那么现在呢，我给大家一点时间，你呢干什么啊？首先检查一下你的 no 的版本啊，然后呢再去配置一下你的计量员，然后再开始执行这条面料。好，开始啊。

周末整理了一下 react 整个生态，目前在企业里面比较流行的一些技术选型， 从创建项目，我们更多的是 cia， red， red app， 如果是服务端渲染的项目，那么我们的选型是 next gs。 现在又流行起来问特，那么这个里面也有一些建议，建议使用问特创建 red 口端应用，包括一些相应的阅读的文档啊。 现在的状态管理，流行的 red 内部内置了 house 的这种状态的管理，包括用 redis 做管理。目前企业内部呃用的比较多的状态管理， mobos 拉 style 这个也用的比较多，也整理了相应的一些资料。 文档里我也给了一些状态的选型的建议，可以根据自己的业务做选型，再到路由的管理。咱们都知道这是 red 啊，项目当中样式的管理啊，用 c s e g s 这种方案还是用 c s model 的方案，还是用 style company 式的方案？ 目前用的比较多的是春问的 css， 也给了一些选型的建议，再到组建库， 按照底站， acu 底站，这是国内用的比较多的，还有一些动画库，包括可视化的图标，像 ontov。 项目当中如果你用表单的话，可以使用 red hooks form 类型的检查，比较流行的就是 t s 再到代码风格，那么 print 加 e i link 一层 a i b e b 的样式的指南，再到数据的结构，可以试一下 a 模特库， 国际化的选型，再到副文本编辑框时间的处理。客户端的选型是用托瑞还是 electro 移动端，如果大家需要的话，可以评论区留言。