淮南市城乡建设局网站,网站建设问题表,厦门网页定制,运营培训班大家好#xff0c;我是若川。推荐这篇可收藏的React入门手册。也推荐之前一篇类似的文章《如何使用 React 和 React Hooks 创建一个天气应用》。点击下方卡片关注我、加个星标React 是目前为止最受欢迎的 JavaScript 框架之一#xff0c;而且我相信它也是目前最好用的开发工具… 大家好我是若川。推荐这篇可收藏的React入门手册。也推荐之前一篇类似的文章《如何使用 React 和 React Hooks 创建一个天气应用》。点击下方卡片关注我、加个星标React 是目前为止最受欢迎的 JavaScript 框架之一而且我相信它也是目前最好用的开发工具之一。这篇文章的目的在于为 React 初学者提供一些学习指导。在学习完这篇文章后你就可以对 React 有初步的了解什么是 React它为什么这么受欢迎如何安装 ReactReact 组件React StateReact Props在 React 中处理用户事件React 组件的生命周期事件以上这些内容是你构建高级 React 应用的基础。这篇文章是专门为刚接触 React 的 JavaScript 程序员写的。现在就让我们开始学习吧。什么是 ReactReact 是一个 JavaScript 库旨在简化 UI 的开发。2013 年Facebook 首次向全世界发布了 React。此后人们用它开发了一些应用最广泛的 APP并且它也使 Facebook 和 Instagram 在无数应用中占得领先地位。React 最初是为了使开发者可以在任意时间点都能轻松地追踪 UI 及它的状态。它通过将 UI 划分为多个组件的集合来达到这个目的。在学习 React 的时候你可能遇到一些小困难但是只要解决了它们我保证这将会是你最美好的经历。React 可以使前端开发工作变得更加简单而且它的生态里还有很多好用的库和工具。React 自身有一套易于使用的 API当你开始学习的时候需要先明白以下 4 个基本概念组件JSXStateProps我们将在这篇指导中学习以上几个基本概念那些高级的概念我们会留给其它的教程我也会在文章的末尾给出深入学习 React 的资料。你可以免费下载 PDF / ePub / Mobi 格式的本篇指导。学习目录学习 React 需要知道多少 JavaScript为什么要学习 React如何安装 ReactReact 组件JSX 简介使用 JSX 实现 UIJSX 与 HTML 的区别在 JSX 中嵌入 JavaScriptReact 中的状态管理React 组件中的 PropsReact 应用中的数据流在 React 中处理用户事件React 组件中的生命周期事件参考资料学习 React 需要了解多少 JavaScript在真正开始学习 React 之前你需要对 JavaScript 的核心概念有很好的理解。你不需要成为 JavaScript 专家但是我希望你对以下内容有很好的了解变量箭头函数使用扩展运算符处理对象和数组对象和数组的解构模板字符串回调函数ES 模块化如果你对这些概念不熟悉我为你提供了一些资料来学习这些概念点击文末“阅读原文”可见。为什么要学习 React?我强烈建议每一位 Web 开发者都可以对 React 有基本的了解。这是因为以下几个原因React 十分受欢迎。作为一名开发者你很可能在将来参与 React 项目。它们可能是目前正在进行的项目也可能是你的团队希望你使用 React 开发的一个全新的 APP。现在很多工具都是基于 React 开发的比如 Next.jsGatsby 等流行框架与工具它们在后台都使用了 React。作为一名前端工程师你很可能会在面试时遇到关于 React 的问题。这些都是很好的理由但是我希望你学习 React 的一个主要原因是它真的非常优秀。React 促成了包括代码复用、组件化开发在内的几种很好的开发实践。它高效、轻量并且使开发者关注于应用中的数据流这种开发思想适用于很多常见的场景。如何安装 React有几种不同的方式安装 React。在开始时我强烈建议一种方法那就是使用官方推荐的工具create-react-app。create-react-app 是一个命令行工具旨在让你快速了解 React。你可以从使用 npx 开始这是一种不需要安装就能下载和执行 Node.js 命令的便捷方法。在这里查看我的 npx 指南https://flaviocopes.com/npx/从 5.2 版的 npm 开始增加了 npx 命令。如果你现在还没安装 npm那么点击这里 https://nodejs.org 安装吧npm 是随 Node 安装的。如果你不能确定你的 npm 版本号那么执行 npm -v 命令来检查你是否需要更新 npm。注意如果你不熟悉终端的使用方法请访问 https://flaviocopes.com/macos-terminal/ 查看我的 OSX 终端教程。这份教程适用于 Mac 和 Linux。当你执行 npx create-react-app app-name 命令时npx 首先会 下载 最新版的 create-react-app然后再运行它运行结束后会把它从你的系统中删除。这点很不错因为你的系统上永远不会有旧的版本并且每次运行的时候你都会获得最新、最全的可用版本。让我们开始吧npx create-react-app todolist
运行成功后你会看到create-react-app 会在你指定的文件夹下创建项目的目录结构本示例中为 todolist同时将它初始化为一个 Git 仓库。它也会在 package.json 文件中添加几个命令所以你可以即刻进入到新创建的应用目录下运行 npm start 命令来启动 app。默认情况下这个命令会在你本地的 3000 端口启动 app并打开浏览器为你展示欢迎界面现在你就可以开始开发这个应用程序了React 组件在上一节课程里我们创建了我们的第一个 React 应用。在这个应用中包含了一系列执行各种操作的文件大部分文件都与配置有关但是有一个文件十分的不同App.js。App.js 是你遇到的 第一个 React 组件。文件中的代码如下import React from react
import logo from ./logo.svg
import ./App.cssfunction App() {return (div classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /pEdit codesrc/App.js/code and save to reload./paclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn React/a/header/div)
}export default App一个使用 React 或者其他的主流前端框架如Vue、Svelte创建的应用都是由很多的组件构成的。不过我们还是先分析这个组件吧。我把这个组件代码简化如下import React from react
import logo from ./logo.svg
import ./App.cssfunction App() {return /* something */
}export default App现在你可以看到几件事情我们使用 import 导入了一些东西并且 导出 了一个名为 App 的函数。在这段示例代码中我们导入了一个 JavaScript 库react npm 包、一个 SVG 图片和一个 CSS 文件。create-react-app 设置了一种方法它允许我们导入图片和 CSS然后在 JavaScript 中使用它们。但这不是我们现在需要关心的内容我们现在关心的是 组件 的概念。App 是一个官方示例中的函数, 返回了一些初看之下非常怪异的内容。它看起来很像 HTML但是内嵌了一些 JavaScript。其实这就是 JSX一种我们构建组件时使用的特殊语言。我们将会在下一节讨论 JSX。除了可以返回 JSX组件还具有一些其他特征。一个组件可以有它自己的 state状态这就是说它可以封装一些其他组件无法访问的属性除非它把这些 state 暴露给应用中的其他组件。一个组件也可以接收来自其他组件的数据我们称这些数据为 props。先不要着急我们很快就会详细学习所有的这些概念JSXState 和 Props了。JSX 简介要想学习 React 就必须首先了解 JSX。在上一节中我们创建了第一个 React 组件即 App它定义在由 create-react-app 构建的默认应用程序中。它的代码如下import React from react
import logo from ./logo.svg
import ./App.cssfunction App() {return (div classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /pEdit codesrc/App.js/code and save to reload./paclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn React/a/header/div)
}export default App当时我们忽略了 return 语句中的所有内容但是在本节中我们将会讨论它们。我们将包含在组件返回语句后的括号内的所有内容称为 JSXdiv classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /pEdit codesrc/App.js/code and save to reload./paclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn React/a/header
/div这些内容 看起来 很像 HTML但是却又不是真正的 HTML。它们之间有一些不同点。而且将这样的代码包含在 JavaScript 文件中有点奇怪它们看起来一点都不像 JavaScript在后台React 会处理 JSX它们会被转换为浏览器可以识别的 JavaScript。因此虽然我们编写了 JSX但是最终会有一个转换的步骤使它可以被 JavaScript 解析器所识别。React 这样做的一个主要原因就是使用 JSX 能更加轻松的开发 UI 界面。当然了前提是你必须非常熟悉它。在下一节中我们将会学习 JSX 是怎么使 UI 开发变容易的。再然后我们将会讨论它与“标准 HTML”的区别而这些差异是你必须知道的。使用 JSX 构建 UI就像上一节中介绍的那样JSX 的一个主要作用就是借助它可以非常容易的编写 UI。特别的在 React 组件中你可以导入其他 React 组件然后将它们嵌入当前组件以展示它们。通常情况下一个文件就是一个 React 组件这是我们可以非常容易的在其它组件中复用通过导入的方式它们的原因。但是同一个文件中也可以定义其它的 React 组件这些组件只会在当前文件中用到。这里并没有明确的规则来规定一个文件中是否需要定义多个组件选择最适合你的那种方式即可。当一个文件中的代码行数过多时我通常会将代码进行拆分放到单独的文件中。为了方便学习我们在 App.js 文件中再定义一个组件。我们计划创建一个名为 WelcomeMessage 的组件function WelcomeMessage() {return pWelcome!/p
}看到了吗这个组件就是一个简单的函数它返回了一行 JSX表示一个 p 标签。我们将这个函数添加到 App.js 文件中。现在我们将 WelcomeMessage / 添加到 App 组件的 JSX 代码中就可以在 UI 中展示这个组件import React from react
import logo from ./logo.svg
import ./App.cssfunction WelcomeMessage() {return pWelcome!/p
}function App() {return (div classNameAppheader classNameApp-headerimg src{logo} classNameApp-logo altlogo /pEdit codesrc/App.js/code and save to reload./pWelcomeMessage /aclassNameApp-linkhrefhttps://reactjs.orgtarget_blankrelnoopener noreferrerLearn React/a/header/div)
}export default App下面是运行结果你应该可以在屏幕中看到“Welcome!”信息。我们称 WelcomeMessage 为子组件App 为父组件。我们像使用 HTML 标签一样添加 WelcomeMessage / 组件。这就是 React 组件和 JSX 优雅的地方我们构建应用程序组件并且像使用 HTML 标签一样使用它们。关于 JSX 与 THML 的区别我们将会在下一节中学习。JSX 与 HTML 的区别JSX 看起来像 HTML但事实并不是这样。在这节课程里我会介绍一些在使用 JSX 时你必须要知道的东西。如果你仔细阅读过 App 组件的 JSX 代码会发现一个很明显的不同点组件中有一个名为 className 的属性。在 HTML 中我们使用的是 class 属性。出于各种原因它可能是使用最广泛的属性而 CSS 就是其中一个原因。class 属性使我们可以轻松的设置 HTML 样式并且在设计 UI 时Tailwind 之类的 CSS 框架就是以这个属性为核心的。但是这里有个问题。我们在 JavaScript 文件中编写 UI 代码而 class 是 JavaScript 语言的保留字这就意味着我们不能使用它它有特殊的作用定义 JavaScript 类。由于这个原因React 的作者们不得不选择一个其它的名称。这就是我们为什么用 className 替代了 class。当你将一些现有的 HTML 代码改写为 JSX 时需要牢记这点。React 为了保证页面能正常显示对这种情况进行了特殊处理但是它会在开发者工具中给出警告这种情况非常普遍并不是只有 HTML 会遇到这种困扰JSX 与 HTML 的另一个非常大的不同点是 HTML 是很 宽松。当出现语法错误、标签没有正确闭合或者匹配时浏览器会尽可能的解析 HTML而不是中断解析过程。这是 Web 的一个核心特点它非常宽松。但是 JSX 并不宽松。如果你忘记将一个标签闭合你将会得到一条错误信息React 会给出非常友好的错误信息使你可以准确地定位问题并解决问题。第三个 JSX 与 HTML 的不同点在于在 JSX 中我们可以内嵌 JavaScript。我们会在下一节讨论这点。在 JSX 嵌入 JavaScriptReact 的一大特点就是我们可以非常容易的在 JSX 中嵌入 JavaScript。其他的前端框架如 Angular 和 Vue有自己的特殊方法来在模板中显示 JavaScript 值或者执行类似循环的操作。React 并没有添加类似的新特性。React 通过使用大括号的方式容许我们在 JSX 中嵌入 JavaScript。我们展示的第一个示例来自于我们之前学习过的 App 组件。我们可以使用下面的方法导入 logo 的 SVG 文件import logo from ./logo.svg然后在 JSX 中我们将这个 SVG 文件赋值给 img 标签的 src 属性。img src{logo} classNameApp-logo altlogo /我们再来展示一个示例。假设 App 组件有一个变量名为 messagefunction App() {const message Hello!//...
}我们可以通过在 JSX 的任意位置添加 {message}来在 JSX 中显示这个变量的值。我们可以在 { } 中添加任何 Javscript 表达式但是每对大括号中只能有 一个 表达式并且这个表达式必须是可正确求值的。如下所示这是一个在 JSX 中非常常见的表达式。我们编写了一个三元运算符在其中定义了一个条件语句message Hello!当条件为真时我们输出一个值The message was Hello!条件为假时输出另一个值当前示例中为变量 message 的值{message Hello! ? The message was Hello! : message
}
在 React 中管理 state每一个 React 组件都可以有它自己的 state。那么什么是 state state 就是 由组件管理的状态的集合。例如对于表单来说它的每一个独立的 input 元素都管理着它自己的 state它的输入值。一个按钮负责处理自己是否被点击是否获得焦点。一个链接负责管理鼠标是否悬停在它上面。在 React 或者其他组件化的框架、库中我们所有的应用都是以大量使用含有 state 的组件为基础构建的。我们使用由 React 提供的高效管理工具 useState 来管理 state。从技术上来说它是个 钩子 尽管事实就是这样但是现在我们还不需要知道钩子的详细信息。你可以使用下面的方法来从 React 中导入 useStateimport React, { useState } from react通过调用 useState()我们将会得到一个 state以及一个供我们调用用来修改 state 值的函数。useState() 可以传入一个参数用来初始化 state。它会返回一个数组这个数组包含一个 state 和一个修改 state 值的函数。如下所示:const [count, setCount] useState(0)这一点非常重要。我们不能直接修改 state只能通过调用修改函数来修改它否则React 组件无法及时将数据的变化反映在 UI 中。调用修改函数是一种将组件 state 的变化告知 React 的方法。这个语法是不是看起来有点奇怪这是因为 useState() 返回的是数组所以我们使用了数组解构的方法来获取每个数组成员就像这样const [count, setCount] useState(0)下面是一个示例import { useState } from reactconst Counter () {const [count, setCount] useState(0)return (divpYou clicked {count} times/pbutton onClick{() setCount(count 1)}Click me/button/div)
}ReactDOM.render(Counter /, document.getElementById(app))
我们也可以调用多次调用 useState()来创建多个 stateconst [count, setCount] useState(0)
const [anotherCounter, setAnotherCounter] useState(0)React 组件中的 Props我们称传入组件的初始值为 props。我们之前创建了一个 WelcomeMessage 组件function WelcomeMessage() {return pWelcome!/p
}我们这样使用它WelcomeMessage /这个组件没有任何初始值所以它没有 props。在 JSX 中props 可以作为属性传给组件。WelcomeMessage myprop{somevalue} /在组件中我们以函数参数的形式接收 propsfunction WelcomeMessage(props) {return pWelcome!/p
}通常情况下我们用对象解构的形式来获取 props 的名称function WelcomeMessage({ myprop }) {return pWelcome!/p
}现在我们获得了 props并可以在组件中使用它了。如下所示我们可以在 JSX 中输出它的值function WelcomeMessage({ myprop }) {return p{myprop}/p
}这里的大括号有多种含义。对于函数参数来说大括号是对象解构语法的一部分。我们也可以用它来定义函数代码块而在 JSX 中我们用它来输出 JavaScript 值。将 props 传递给组件是一种在应用中传递值的好方法。一个组件既可以有自己的状态state也可以通过 props 来接收数据。当将函数作为 props 时子组件就可以调用父组件中定义的函数。有一种被称为 children 的特殊 props它代表了包含在组件的开始标签和结束标签之间的所有内容例如WelcomeMessage Here is some message /WelcomeMessage这种情况下在 WelcomeMessage 中我们可以通过使用名为 children 的 props 来获取 Here is some message。function WelcomeMessage({ children }) {return p{children}/p
}React 应用中的数据流在一个 React 应用中数据通常以 props 的方式从父组件流向子组件就像我们在上一节看到的那样WelcomeMessage myprop{somevalue} /如果给子组件传递一个函数你就可以在子组件中修改父组件的 stateconst [count, setCount] useState(0)Counter setCount{setCount} /
如下所示在 Counter 组件内部我们取得了 setCount然后在适当情况下可以调用它来修改父组件中的 countfunction Counter({ setCount }) {//...setCount(1)//...
}
其实还有很多更高级的方法来管理数据比如 Context API 和 Redux 之类的库。但是这些方法会增加复杂性而在大约 90% 的时间里我们刚刚介绍的两种方法都是完美的解决方案。在 React 中处理用户事件React 提供了一种简单的方法来管理从 DOM 触发的事件如点击事件、表单事件等。这里我们以最容易理解单击事件为例来进行说明。你可以在任意的 JSX 元素上使用 onClick 属性buttononClick{(event) {/* handle the event */}}
Click here
/button
每当元素被点击的时候传递给 onClick 属性的函数就会被触发。你也可以在 JSX 的外部定义这些函数const handleClickEvent (event) {/* handle the event */
}function App() {return button onClick{handleClickEvent}Click here/button
}
当点击 button 时就会触发 click 事件此时React 就会调用 click 事件的处理函数。React 支持非常多的事件类型如onKeyUponFocusonChangeonMouseDownonSubmit 等。React 组件的生命周期事件到目前为止我们已经学习了怎么使用 useState 钩子来管理 state。在本节中我想介绍另外一个钩子userEffect。useEffect 钩子允许组件访问它的生命周期事件。当你调用这个钩子时你需要传入一个函数。在组件第一次被渲染的时候以及在随后的每次重新渲染 / 更新时React 都会调用这个函数。React 首先更新 DOM然后调用任何传递给 useEffect() 的函数。所有这些都不会阻塞 UI 的渲染即使是同步函数。这里是一个示例const { useEffect, useState } Reactconst CounterWithNameAndSideEffect () {const [count, setCount] useState(0)useEffect(() {console.log(You clicked ${count} times)})return (divpYou clicked {count} times/pbutton onClick{() setCount(count 1)}Click me/button/div)
}
因为在随后的每次重新渲染 / 更新时传递给 useEffect() 的函数都会被执行所以出于性能上的考虑我们可以告诉 React 在某些时候不要执行这个函数。为了实现这个目的我们可以为 useEffect() 传入第二个参数这个参数是一个数组它的成员是需要监视的 state 变量。只有在这些 state 发生变化的时候React 才会执行这个函数。useEffect(() {console.log(Hi ${name} you clicked ${count} times)
}, [name, count])
类似的你可以传入一个空数组这会使 React 只在组件挂载的时候才执行这个函数。useEffect(() {console.log(Component mounted)
}, [])
这是一个非常有用的技巧。useEffect() 非常适合添加日志访问第三方 API 等。接下来做什么熟练掌握在这篇文章中提到主题是朝着学习 React 目标迈出的重要一步。在这里我想给出一些指导防止你在有关 React 教程和课程的海洋中迷失方向。接下来该学习什么呢了解有关虚拟 DOM编写声明式代码单向数据流不变性组合的更多理论。构建一些简单的 React 应用。例如一个简单的计数器或者与公共 API 交互。学习如何使用条件渲染如何在 JSX 中使用循环如何使用 React 开发者工具通过 plain CSS 或者 Styled Components 学习如何在 React 应用中使用 CSS。学习如何使用 Context APIuseContext 与 Redux 来管理 state。学习如何与 forms 交互。学习如何使用 React 路由。学习如何测试 React 应用。了解基于 React 构建的应用程序框架如 Gatsby 或者 Next.js。当然最重要的是请确保在构建应用的过程中实践你所学习的每一个知识点。结语非常感谢阅读这篇入门指导。我希望这篇指导可以激发你去学习更多关于 React 知识的兴趣以及了解 React 能做的每一件事。不要忘了你可以免费下载 PDF / ePub / Mobi 格式的本篇指导每天我都会在我的网站 flaviocopes.com 上发布编程教程你可以在那里看到更多类似的精彩内容。原文链接https://www.freecodecamp.org/news/react-beginner-handbook/作者Flavio Copes译者xinlei_ye最近组建了一个江西人的前端交流群如果你是江西人可以加我微信 ruochuan12 拉你进群。今日话题时光飞逝明天就是端午节三天假期了提前祝大家端午安康。欢迎分享、收藏、点赞、在看我的公众号文章~一个愿景是帮助5年内前端人走向前列的公众号可加我个人微信 ruochuan12长期交流学习推荐阅读我在阿里招前端我该怎么帮你可进模拟面试群2年前端经验做的项目没技术含量怎么办点击上方卡片关注我、加个星标················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》多篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时活跃在知乎若川掘金若川。致力于分享前端开发经验愿景帮助5年内前端人走向前列。
