前端react教程

今天我们来讲一个超级热门的前端 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 组件等等，几乎是零配置使用。

今天学了几天编程的小表弟来问我怎么样上手前端 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 的五千，就可以看到我们写的页面了。那么你觉得瑞亚特上手算不算蓝呢？感谢你的观看，喜欢我的视频记得点赞关注，拜拜！