react 页面跳转的所有方式

哈喽，大家好，今天我们来讲一下 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 react 是用于构建用户界面的 javascript code， 起源于 facebook 的内部项目，于二零一三年五月开源，现在已然成为前端最流行的库， 主要用于构建 ui 组件化开发模式。这里跟标签长得一样的就是组件，每个组件负责不同的功能，然后对其组合已构成复杂的 ui。 它的美妙之处在于构建组件的简单性也降到了理论上的最低水平。 它只是 javascript 的一个函数。这个函数的返回值呢，就是要渲染 rt 描或 ui， 采用的是 g s 叉模板引擎来实现结构和逻辑。 如果你想实现组件的数据传递，在组件定义的地方用一个 props 参数接收，然后可以在组件调用的地方传递对应的数据。当我们页面需要动态更新时，会引入 hoox 里 the use state， 然后通过 use state 得到返回的两个数据，一个是我们使用的状态 count， 另一个是我们要修改状态的方法 set count。 接下来，我们可以在渲染页面的 g s 叉中通过具体的业务逻辑实现页面的动态更新。当我们在页面上点击按钮时，那么 ctrl 的值就会实时响应。

今天我们来讲一个超级热门的前端 gs 框架 react， 你也许没有用过它，但一定听过它的名字。现在绝大多数的外并用，包括很多前端的开源库都是使用 react 开发的。 它最大的优点呢，自然是简单和高效，这单包括它的性能，还有开发效率，尤其配合上 nex， j s gatsby bleat 这类框架，可以让你在很短时间内快速搭建一个相对复杂的应用。 今天呢，我会带大家快速入门 react， 并向大家讲解 react 中的核心概念和一般开发流程。最后我们用它来举例搭建一个非常简单的应用。 考虑到 rex 新版本中加入的一些新特性，比如后允许我们使用更简洁的语法来定组建，我们就不再介绍传统的类的定义方式了。另外， rex 中的核心概念其实并不多，我会尽量通过实际案例将那么完整的呈现给大家。 细枝末节的部分可能就一笔带过了。在使用 rack 之前，我们需要确保计算机中安装有 note j s 运行环境。随后打开命令行，我们可以使用 n p x create rack tab 后面跟上应用的名称来快速创建一个 rack。 听用。 和一般的 no 程序类似， npm start 可以启动一个本地调试的服务器，它会自动在浏览器中打开我们的应用。 首先呢，我们来快速浏览一下 react 工程的结构，可以看到这里全是自动生成的代码，文件比较多，不过大多数我们可以暂时忽略。 首先，我们打开 source 路径下的 index 点 j s 文件，也就是我们应用的主程序。这里最最重要的是这个 react on 点 render 函数。整个页面的渲染都是从这里开始的。第一个参数是我们要渲染的所有元素， 可以看到这里是 html 的语法。第二个参数代表将渲染的结果插入到页面的哪一个容器中。可以看到这里对应的是这个 id 叫 root 的元素。 这里的第一个参数乍看之下比较诡异，因为我们在加了 script 代码中嵌入了 html 标签。这个其实是 react 对 jsd 种语法扩展，也被叫做 jsx， 它允许将 html 标签和 js 代码混合使用。 他的优点是我们不再需要分开定义 html 和 gs 文件，因此编写和阅读代码会方便很多。我们可以尝试去修改这里的标签， 可以看到浏览器中的内容也会自动刷新。我们继续回到之前的代码，可以看到这里的 app 显然不是一个标准的 html 标签，如果我们按住 ctrl 跟随进去，他会跳到另一个函 数的定义。这里是一个非常重要的概念， react 中的组件都可以被简化成一个函数的定义。函数的输出是一串 html 标签，也就是组建最终渲染的结果。 我们可以通过组合其他的组件或者 html 标签来创建更多复杂的组件。但这里的例子过分简单化了，因为我们的渲染结果是固定的，并且没有任何动态的逻辑。这里我先删除掉暂时不用的代码，仅仅保留最核心的部分 react tom 点、 render 函数和这里唯一的组件 app。 接着我们来介绍一个最常见的场景，根据数据来动态生成用户界面。数据通常是通过 a p i 从后端获取，不过这里为了简单起见，我在文件开头定了一个用于返回假数据的函数 fetch to dos。 随后在生成界面的时候，我们 可以调用这个函数获取数据，并通过 map 便利土豆丝中的每一条数据，然后生成一个个列表元素。这里需要特别注意的是花括号的用法。如果我们想在 html 标签中嵌入 javascript 表达式，则需要将他们嵌套在花括号中。 这里生成的每一个列表元素由复选框、 input 和一个标签 label 组成。复选框是否选中取决于数据中的 completed 属性，而标签的文本则是来自于数据中的 title 属性。 到目前为止呢，我们的界面看起来依然十分单调。我们知道 racked 的一大优势在它巨大的生态系统和开源库，比如常见的 ui 框架， bootstrap， semitic， material ui 等等，在 rack 中都有很好的继承。这里我直接使用 rack bootstrap 来对界面做一些美化。 首先我们按照文档中的步骤来安装 react bootstrap 这个包，然后在文件开头导入我们要用到的组件和样式表。接着我们替换掉之前的 html 标签，按照文档中的用法来加入复选框和文字组件。 另外，文字的部分，我们会根据 completed 是否为处来加入一条删除线的效果。这里是修改之后的结果。 可以看到用 react 创建一个漂亮的界面其实非常的容易。目前我们的界面还非常简单，假设我们之后加入了更多的代码，当组件变得更加复杂以后，我们可以考虑将其中可以重用的代码拆分成一个个独立的组件，也就是模块化。 比如这里的列表元素可以被抽离成一个单独的组件，我们教它 to do item 列表中的文字和复选框状态，我们可以用类似于 html 标签属性 的语法，并作为函数参数 props 传递进来。随后我们可以通过 props 点 title， props 点 completed 来访问他们。 这里的 props 在 react 中也被叫做属性。首先，属性一定是由上层元素自上而下传递下来的，其次，属性是指读的。换句话说，我们不能在函数内部修改他们 一个组件的属性，会直接决定他的输出，也就是我们最终渲染的结果。这种模式呢，也是我们经常听到的单向数据流模式，因为他从源头上避免了数据在组件之间的来回传递，因此更加利于调试和维护。 之前我们讲到的属性可以在元素中传递静态的数据，但在实际使用中，肯定有数据是动态的。比如这里的代办事项列表，我们应当是允许去更新或者删除其中的条目的。 因此，要存储动态变化的数据，我们需要用到 react 中。另一个重要的概念，状态状态，你可以把当做是组建自身的一个私有变量。在 react 中要定一个状态，我们需要用到 use state 方法， 他会返回两个值，第一个是存储当前状态变量的 to dos， 第二个是用于修改状态的方法 set to dos。 最后，这里的参数代表状态的初始值。 需要强调的是，要修改一个状态，我们是不能够直接对这里的 to dos 变量复制的，这样是没有用的，相反，我们必须调用 set to dos 方法。 那你可能会问，为什么我们不直接定一个普通变量，而是依靠 react 提供的这套机制来管理状态呢？首先，使用函数的局部变量肯定是不行的，因为他们在函数退出时就自动销毁了。如果使用全局变量的话，我们还要考虑到他和 组建生命周期的同步。因此这里呢，我们只需要简单记住 rex 提供的这种特定的写法。具体的时间细节呢，我们就不多做解释了。 有了状态之后呢，我们可以给列表的每一行加入一个删除按钮，用来删除对应的代办事项。 当我们点击按钮时，可以响应 button 的 on click 事件，调由属性传进来的 on delete 毁掉函数。然后我们在之前的 app 组件中来定义这个 on delete 函数。 首先，我们挑选出删除之后剩下的列表选项，然后调用 set to do 来更新当前的状态。修改程序之后，点击删除按钮会看到这样的效果。 整个过程呢，大概是当我们点击按钮之后，状态被更新之后，界面会随着状态的变化而重新渲染。随后我们可以用同样的方法来响应复选框被按下的试键 on change， 他会调用有属性传递进来的 ontogo 毁掉函数。然后我们在之前的 app 组件中来定义这个 ontogo 函数即可。当复选框被选中或者取消选中时，我们会去修改对应元素的 completed 属性。最后调用 set to do 来更新当前的状态。 在我们点击复选框之后，会立刻切换当前代办事项的完成状态。通过这个例子呢，我们就讲完了 react 中最核心的这几个概念， jsx 取法组建的渲染属性和状态以及事件的响应。 当然， react 的强大之处肯定不单单在于这个库本身，而是它背后庞大的生态链和数不胜数的开源库。要配置路由，我们有 react router。 要创建动画，我们有 spring frame emotion。 要管理状态，我们有 redux， flux， mobics， recoil。 要进服端渲染，我们有 next year's gatsby 等等。这里特别值得一提的是 nex gs， 你可以把当做是一个 gs 的全站框架，它支持 api 路由，浮端渲染，前端的 rex 组件等等，几乎是零配置使用。

我们现在开始 react 入门课程，这个是 react 官网 react g s 第二 o r g。 然后 我们可以把它切换到简体中文，然后到文档这个目录。首先呢， react 是一个 javascript 的一个酷，它是运行在 no 环境上的，我们搜索一下 no j s 然后我们进入他的官网 note j s d r o r g 我们这里可以看到有下载的链接，十六点十三 lts， 点击这个链接就可以把 no 的 js 下载下来，然后进行 安装就可以。安装成功以后我们可以启动我们的 power shell。 我们再确认一下 note gs 是不是正确安装了，我们可以收入 note 港币， 我现在的版本是十四点十七点六 node package manager 港 v 六点十四十五这个 npm 就是如果我们需要安装某一个依赖库或者工具，我们就需要通过 npm 意识到这个命令来实现。 然后我们开始瑞亚克代的温达，开始这篇文章都是一些简单的介绍，没有过多可以介绍的。我们从在网站中添加瑞亚克的开始这一篇文章，假设 你是有一个现有的网站的，然后你可以把这个 like button 放到你的网页上，然后添加一些相应所需的 script， 然后再创建一个瑞亚克斯的组件，把这两行代码添加上去以后， 就可以显示一个耐克的按钮。这次瑞亚克的入门课程就假设你之前是没有任何的经验的，所以说我们这一步 我就先跳过去不做。我们从创建新的瑞亚克的应用开始。创建一个新的瑞亚克的应用有几种方法， 他是有推荐的工具链，第一种是 create react app， 第二种是 next js， 还有一种是 gaspy， 这三种唯一的区别就是他们在项目的配置的时候不一样，他们在编码的方式上都是一样的，而 create react app 对于学习一些核心的概念，对于操作一些 react 的一些基本的一些 功能，是更方便来学习的。所以说我们就从 create react app 开始，我们可以看到这里有一个 命令叫 npx， 他这有一个提示， npx 不是拼写错误，他是 npm 附带的 pak 指的运行工具。我们刚才说过了， npm 就是安装我们所需要的依赖库所需要的命令，而这个 npx 就是 npm 的其中一个工具， 我们使用这个工具来创建我们的项目，我们进入到 f 盘，我们在 f 盘下粘贴刚才的命令，然后我们把项目的名称叫成 react， 入门 这里可能会需要一到两分钟，安装成功以后我们再开始好安装成功了，现在有几个提示，我们就 看一个收入， npm stop 开始就可以了。然后下一步我们使用 vs code 把刚才新创建的项目打开，如果你电脑上还没有安装 vs code， 你可以搜索一下进入 code。 第二 visu studio com， 这是微燃公司的一个编码工具，是免费的，然后直接点击下载，然后安装就可以。安装完 vs code， 我们就可以在这里 进入我们刚才创建的项目，然后在这个目录下边，我们就可以输入扣的空 格点，然后回车就可以用 vs 扣的打开这个目录，我们也可以先启动 vs 扣的， 然后在这里直接 open folder 也是可以的，这个就是 reactor 打开项目以后所看见的目录结构， 这个 react 入门目录下边的这些所有的文件都是刚才我们使用 npx create react app 产生的。 首先我们在这里要看一个插件叫 e s 七， 我们看一下这个插件，这个插件是推荐安装的， 安装上以后我们在运行 just grape 和瑞 ax 等程序代码的时候会比较有帮助，我们把它安装上 好，把它关掉还是进入文件， 我们来看一下这些文件。第一个是 note modules， 我们就可以把它看成是我们 c 盘下边儿的 program files， 就是运行这个项目的时候所需要安装的一些地摊方向库或者叫软件。然后 public 是一个公用的文件夹，里边有 fifi 肯有 logo 的文件， 其中 index d r h t m l 文件，我们可以看一下，这个文件是一个标准的 h t m l 文件， 我们在这里面主要就要看的就是这个 deaf， 因为 javascript 需要工作，他就需要有一个起始点，而这个起始点就是 html 的一个组件，在这里默认的就使用 id 为 root 这么一个 deaf， 我们可以在下面的文件里看出来，我们在 src 里边， 然后我们打开 index there gs， 我们可以看到他在 rendered 的时候， 这个是詹瓦斯 grap 的一个米纯命令，他找的就是 id 为入特的这么一个 element， 然后把这个组件显示在这个 element 的里边，而这个组件里边有一个 app， 这个 app 就是 app 点儿 gs 里边的这个组件，这个是创建项目的时候默认 生成的一个 function， 它里面的代码特别像 html 的文件，有 diff， 有 header， 有 image， 还有 paragraph， 但是它是 gsx， 因为整个这一部分方式，我们可以把它看成一个组件，他可以进行 xbox， 还可以在 index 里边进行 input， 然后把它带上到别的组件里边，所以说它并不是一个单纯的 htm 的文件。这里还有 get 一个 no， 这个是默认生成的，他就是把一些不需要同步到代码服务器的文件或者文件夹都标识在这里了，这些都是默认的。我们可以看到 note 刚 models 已经被限制在外边了，因为他 呃只是一些安装文件，没有必要把它进行同步或者备份。 然后最后我们再看一下这个 pack 点 gson 这个里面的文件，主要就是有一些项目的配置，都是需要在这里来做 项目的名称，项目的版本。然后还有一个是 dependences， 就是我们安装的一些软件都会在这里列出来，包括我们之前安装的 react scripts， 就是我们需要运行的一些命令的一些快捷方式，比如说 start 就是 react on scripts start。 然后 build 就是我们在创建完这个项目想要把它上线的时候， 我们需要用 bel 的这个命令把项目进行打包进行优化，最后把 bel 的结果 放到我们的线上服务器上，我们现在在 vs 扣的里边按 ctrl 加 j 就可以 调出侧面弄来。 第二注成名了以后，我们就可以运行 npm start 这个命令，或者 npm run start 回车 就可以启动其本地的服务器，他会自动带默认的浏览器打开一个窗口，他打开的链接是 logo house 的三千端口。加载完以后就会出现瑞阿特的一个默认的一个页面 有一个 reactor 的 logo， 然后下面是编辑 src 下面的 app， 点 gos 保存，然后来重新加载这个页面，我们可以把它 缩小一下，然后我们把 reactor 也缩小一下， 我们打开他说的 src 下面的 app， 点 gos， 然后我们把 ctrl 勾把侧面都关掉，我们可以直接在这里编辑，我们把 learn react 改成 老许编程，然后我们保存在右侧的页面，就会自动进行更新， 也不需要重新加在页面。这个就是瑞艾克特的一个神奇吸引人的地方。

rex 快成为必须的技能了，这个视频教你从零搭建 rex 开发环境。我们要去下载 no 的，然后我们去下载 vs code， 进入开发目录执行 npx create react app， create red app 是 reacts 脚手架，它可以帮我们快速构建好开发环境。 安装好依赖后，进入英录目录，执行命令，分 pm stop， 这时就可以看到 react 的其中页面。我们来看一下脚手架帮我们生成了哪些代码。巴比卡目录下的 index dgm， 这是一个模板，只有一个 id 为 root 的 d， 在 src 目录下才是真正的代码。这里的 app 到 gs 返回了这样的一段 hgm 的页面，这个既不是字物串，也不是 hgm 标签，这段代码浏览器是没有办法执行的，这部分实际上是 gsxaka javascripts charmml， 他是通过 bibo 把这部分标签转换为瑞 x 对象。我们可以在 bibo 中测试一下，输入一个 alimand， 然后可以看到它自动转化为瑞 x 的对象。 bibo 会自动识别 jsx 语法。现在我们来写一个 rex 应用，先把原来的文件都删掉，然后引入 rex， 引入 rex 度， 利用镇压三级语法创建一个 read 元素，然后再把它渲染到页面上， 看一个 react 的应用就搞定了。如果你想听关于 react 的教程，请给我点个关注，我会持续更新 react 教程。

你们知道在浏览器里面操作微音十一是一种什么感觉吗？今天给你们介绍一个相当之神奇的项目，这个项目能够让你在浏览器里面就体验到微音十一，没有任何使用成本。最觉得呢是在他的这个微音十一的项目里面，居然还可以在应用商店里面装 app， 而且 app 是可以运行的，可以玩超级玛丽， 兄弟们在网页上面装桌面装的 app， 你们就说这离不离谱项目，在 gap 上面有七千六百颗星，可以看得出来是非常受欢迎的哈。另外呢，项目使用的是 react 技术站构建的，对前端朋友来讲也是非常好的一个学习项目。 那我在使用之前呢，应该告诉你们，实际上这个项目他并不是一个虚拟机啊，你可以认为他就是一个纯前端项目，项目的操作体验和 ui 效果是完全模仿的 win 十一，可以说在以假乱真这一块，这个项目做的是非常不错的， 项目里面还类似了浏览器、应用商店以及命令行，他还可以执行一些简单的命令啊。 从来没有使用过 win 十一的兄弟们，可以通过这个项目来填一下 win 十一的效果啊。 get up 搜索 win 十一 react， 然后点击这个有七千六百颗星的 win 十一 react 项目，在 read me 里面有列举这个项目的 faceous， 翻译成中文的话就是这些。 分析一下目录结构，大学上可以知道这个项目使用的是 react 技术站，加上 weight 加上 taiwin 的 c s s 进行构建的 ss 预处理，也有使用到 sars。 另外呢，这个项目也封装出了单独的桌面应用啊，在每个平台都有桌面应用，打包使用的是 tour right， 这个项目对于想学习 react 兄弟们来说真的是非常合适啊。项目里面使用到的基本都是 react 技术上面比较标准的技术， 在动画这一块呢，使用纯 c 型和 animation 也用了不少，大家有需要的时候可以来借鉴一下。接下来我们来实际体验一下 win 十一 react。 点击右侧的 demo 地址，我们就来到了 win 十一，操作逻辑和 win 十一也是一模一样的哟，底部的菜单栏 wince 一模一样的，操作逻辑一模一样的体验感一模一样，他甚至还可以调节桌面的亮度。 项目里面也内置了 dark mode， 兄弟们， wincy， react 和真正的 wincy 一对比，你会发现好像没什么区别哦。 项目里面图标的风格也是尽量模仿的 win 十一的图标风格， 当然了，设置里面的具体功能他肯定是没办法实现的，所以点击是没有任何效果的。 这个项目做的实在是太像了，以至于你很难想象到他居然是运行在浏览器中的。 在桌面右键也可以正常呼出菜单。 我们来看看应用商店，这个应用商店它可不是假商店哟，它是个真商店，可以安装 a p p 的。 比如说我们在应用商里面把 vs code 给装上，每次装好之后，窗口就会自动关掉，点开，然后点击 open。 兄弟们，这是一个运行在浏览器里面的 win 十一中的 vs code 哟，这个能力属实是做的太强悍了。 然后你是真的可以在这个 vs code 里面看代码的。 兄弟们，这还是一个网页版的 win 十一假系统吗？再来试着装一个拍审的变异器， 点 run 也是可以运行的。那我们试着来玩一玩超级玛丽， 兄弟们，游戏是可以正常运行的哈。 好了，本期视频到这里就结束了，如果你喜欢我的视频，记得点赞双击加关注哦，拜拜。

今天跟大家分享一下页面是如何实现跳转的，这里说的跳转是我们在访问一些页面的时候，比如某一个新闻列表的页面，当我们点击某一个新闻标题，就会进入他的新闻详情页，这个就是跳转的功能了， 我们来写一下代码，页面中的跳转是可以用 htm 来实现的，具体呢？有一个跳转标签，就是 a 标签， 我们来写一下 a 标签，可以看到这个标签比较简单，就是一个 a， 然后我们在 a 标签里面写入一个内容，这里的内容是用来触发跳转的，我们写好了一个跳转的内容， 然后我们预览一下页面，可以看到这里的文字样式是比较特殊的，像是一个可以点击跳转的，然后我们点击一下，点击后发现页面没有跳转，这个是因为我们没有指定要跳转的页面，怎么来指定呢？我们回到代码中来写一下 指定跳转的地址呢？是需要在 a 标签的 hr e f 这个属性中设置，比如我们在 hr e f 中设置了一个链接，然后我们再打开页面， 当我们再次点击的时候，发现他就跳转了，当我们点击回退的时候，又会回到我们的页面。总结一下， a 标签是用来实现跳转的，通过 a 标签的 hr e f 这个属性可以设置我们要跳转的链接地址，点击关注不迷路。

六十秒带你认识 react react 是用于构建用户界面的 javascript。 cool 起源于 facebook 的内部项目，于二零一三年五月开元，现在已然成为前端最流行的酷。 reactor 主要用于构建 ui 组件化开发模式。这里跟标签长得一样的就是组件，每个组件负责不同的功能， 然后对其组合已构成复杂的 ui。 它的美妙之处在于构建组件的简单性已降到了理论上的最低水平。它只是 justcope 的一个函数，这个函数的返回值呢，就是要渲染。而提苗或 ui 采用的是 gsr 模板引擎 来实现结构和逻辑。如果你想实现组件的数据传递，在组件定义的地方用一个 pros 参数接收，然后可以在组件调用的地方传递对应的数据。当我们页面需要动态更新时，会引入赫克斯 里的 use state， 然后通过 use state 得到返回的两个数据，一个是我们使用的状态 counter， 另一个是我们要修改状态的方法 set counter。 接下来我们可以在渲染页面的 gs 叉中通过具体的业务逻辑实现页面的动态更新。当我们在页面上点击按钮时，那么 ctrl 的值就会实时响应。晚上九点来我直播间学前端干货。

今天学了几天编程的小表弟来问我怎么样上手前端 rex 框架。方法一，直接在 h 店面文件里面写 rex 代码， 先建立一个作为测试的 h 下面文件，再添加一个 id 为 app 的 d i v 标签。接下来正式引入 rex。 首先添加两条 stout 标签，一个 red 个 red 动，这两个 step 的标签一个都不能漏。再引入第三个 step， 那就是 babybook， 可以让我们在网页里面直接书写 jxx 代码。最后添加一个太和为 facebook 的 step 标签，之后所有的 rex 代码都可以放在这个标签里面来写。先添加一个命名为 app 的函数式组件， app 函数返回的内容就是即将要呈现到网页里面的内容， 然后使用 rendom 点扔的来直接渲染这个 app 组件。最后四 word 配置就可以在当前目录建立一个服务器，可以直接在浏览器上面进行访问，那么直接访问多扣后置的五千就可以看到我们写的 rex 页面的。这个上手速度是不是非常快 快。在浏览器的元素检查里面可以看到一个 step 标签和一个 id 为 app 的 div 标签，那我们再写一个 rex 的类组件，这个组件的认证函数最终会返回 app 二，保存代码，打开浏览器刷新页面就可以看到 app 二了。 方法二，使用脚手夹可瑞特 rex app 是 rex 生态最强大的脚手夹，这个太阳裤在 ktv 已经拥有九万颗星，可以说是当之无愧的霸主。直接 复制脚手架初始化代码， nps ctrl ait a p p max 然后你只需要静静等待，这个脚手架会为你把所有准备工作都做好，脚手架会默认把项目的依赖也全部装好， 说实话之后命令行会给出提示，使用 yss 进行项目开发或者是 emboy 进行项目构建。项目的目录结构也比较简单，你只需要在硕士目录下进行开发即可输入 nps 或者是 yss 就可以启动整个项目了。浏览器会自动打开 logo boss 三千修改 app， 点 gs 中的代码，点击 ctrls 保存浏览器中的内容会自动更新页面，甚至都不需要刷新。 输入 yambow 进行项目构建。在项目目录下会自动生成 biu 的文件夹，这个文件夹中的内容就是我们写的代码的最终产物。我们可以直接在 blog 文件夹建立一个服务器，然后访问 logo pos 的五千，就可以看到我们写的页面了。那么你觉得瑞亚特上手算不算蓝呢？感谢你的观看，喜欢我的视频记得点赞关注，拜拜！

先说这个 z 的指向嘛，就这个的话实际上是针对这个擂主键的啊，因为擂主键是不是才会涉及到 z 啊？那你在擂主键里面它就存在一个 z 指向的问题，让我们把这个擂主键把它打开， 打开之后，然后接下来我比如说我给他绑定一个点击事件， ok， 好，同样，那接下来的话这边该怎么写？这边的话，我这里我写一个，比如说颗粒颗 handle， 对吧？这个是我对我对应的这个事件处理函数啊，比如这边 alert， 我这边能直接就这样子写吗？刻了一个 handle 吗？你看他是找不到的， 看到没有？找不到的，因为你这是个类类的话，我这边我想访问到他得通过什么？得通过 z 关键字，你这个的话，我们其实我们之前在讲这 yes 六类的时候，我们就称这个是一个什么？是不是一个实力方法，对不对？实力方法，你 z 就是指向这个实力了，所以我们这边通过 z 点颗粒颗 handle 啊，这边呢才能就是 啊对应的这个颗粒颗 handle 这个方法，我们来看下好不好使？我们把这个还是改成 but 呢，不然感觉怪怪的，是吧？一个 div 在那按钮啊，保存，保存之后，然后在这边走就出发了，对不对？哎，你看我这边的话，区别就在于这里，这里的话你需要是 this 啊，需要是 this， 但这里话就会存在一个问题，往往我在这里面，这里面的话，我是需要访问到我的这个类的这个实力的啊，但是你这边你打印这个 this， 好，这边的话走，你会发现这个 this 的话，它是一个 ontify， 为什么？ 这个的话，其实在它官网有说，当你调用这个函数的时候， z 的值为 on the five， 这个其实不是 react 的问题，其实是这个 g s 啊，涉及到这个 g s 底层，它 z 本身是不是就有些问题？所以我们这边的话需要去修正它的这个 z， 如何修正呢？啊？这边的话有三种 种方式，首先第一种将你的事件处理函数修改为箭头函数，其第一种和第二种其实基本是一个原理，就是什么？这不就把它修改成箭头函数，对不对？核心思想就是修改成箭头函数，你要么把这个事件处理函数 修改成箭头函数，你要不在绑定的时候啊，你绑定的时候，大家使用这个箭头函数的方式来进行一个绑定，就两种方式啊，首先第一种，第一种的话就是你把这个这个的话，你把它修改成一个箭头函数， 把我的这个 click handle 把它改成一个箭头函数，箭头函数它内部是不没有 z 啊？没有 z 它就会找什么，是不是找外部的啊？然后接下来它这个 z 就会指向这个主线的实力， ok， 我们来看一下啊，这是第一种， 走搞定了，对不对？第一种啊？好，那如果我这边的话，我不想，我这边呢，就是想这个颗粒颗 handle 啊，就这边的话 保持不变，保持不变的话，然后接下来第二种方式就是什么呢？就是你这边你在绑事件的时候，绑事件的时候，你这边把它修改成这个箭头函数的形式啊，这边你把它改成这个箭头函数的形式，那这里的话呢，这个 z 也是会去找什么？去找外程的，对吧？好，来我们这边，我们把它改成箭头函数的形式啊，箭头函数的形式，然后接下这边的话，呃，调用 好，大家这边来看一下。好，清空走，是不是也是 ok 的，对不对？好，这是第二种方式，第二种方式的话是就是事件绑定的时候修改成箭头函数。好，那接下来的话还有一种方式，还有一种方式是使用棒的 棒的，然后强制的就提前把这个 z 的指向，提前就把它绑定好。啊，我们来看一下第三种方式啊，在这里的话，我这边 ctrl ctr， 然后这个是我的这个构造器函数，对吧？一进来就会自动调用的。好，那既然在这里，你看我在这里的话，我就提 提前绑定这个 z 棒的，大家学过的，棒的作用是什么？这就是绑定 z， 那接下来给你返回一个什么新的函数，对不对？那接下来的话，它这个 z 就是一直指向什么，是不？你这边绑定的这个 z， 你这边绑定的 z 当前的 z 是指向谁了？是不？指向这个组件的，对不对啊？所以说我们这边呢，可以使用这个第三种方式，第三种方式的话就是这也不改， 这儿也不改啊，然后接下来这儿也不改啊，然后接下来怎么办呢？啊？这边这边我们来写一个 constructor， constructor， 然后接下来我们这边 this 点 click handle， 它等于个 this 点 click handle， 点 bond this 啊，这边的话得写个 super， ok， 好，你看我们这边就绑定了，你看这边也没变，这边也没变，对吧？好，你这边保存下，保存了之后，然后下这边来看一下，走，是不是依然是 ok 了，对不对？依然是 ok 了啊，这 这个的话就是第三种方式使用棒的在这里啊，这是第三种方式使用棒的，使用棒的方法来强势绑定这个 z 啊。这三种方法的话，你选一个你习惯用的就可以了，但我觉得大家大概率应该没有机会了，因为我们后面都不会写类主线啊，都不会写类主线， 那你这个的话，这个这些知识点你要知道，对吧？因为你有可能工作的时候就会遇到之前的这个项目用的还是类组件， ok 这三个字，就是这个知识点，你得知道啊，就是关于就是 z 的修正啊，只针对于类组件啊，函数组件不存在这个问题，对吧？因为函数组件都不会用 z， ok。 关注杜一剪辑号的同学，打断一下，我是谢老师，总听杜一的短视频，这回呢，来听听我们的大师课。这套课程是由杜一教学总监，全网都熟知的袁老师录制，现在呢，免费送给你们。不管你手上现在看的是什么样的资料， 都应该先停下来，先来看一看这套大师课。一方面呢，这套课程里面的内容都是前端最核心的知识，其他的知识都是在这个基础上生长出来的， 你先掌握好了这个，再学啥都事半功倍。而且呢，至此之后，你对前端技术的理解不会存在任何的障碍。另一方面呢，这套课还能够提升你的眼光，让你具备分辨好坏的能力。 看过大师课之后啊，有一些不入流的资料，课程什么博客论坛呀什么的，你就看不上眼了，这种分辨好坏的能力也能够为你将来的学习省下不少的时间。所以呢，还没有领到这套课程的同学，赶紧抓住免费领取的机会啊！进评论区第一条，加入粉丝群，然后根据提示领取就可以了。

好，那么，呃，所以呢，我们今天的话就开始学习我们的 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 的版本啊，然后呢再去配置一下你的计量员，然后再开始执行这条面料。好，开始啊。