React.js - 你需要了解的事情

React正在占领 Web 开发领域 - 作为现代用户界面的事实上的库，因此学习它可以带来许多好处。

本文将向您介绍成为一名成功的 React 开发者所需的一切知识。这并非深入的教程，而是对所有必要概念的介绍。您还可以在这里找到额外的资源链接，它们可以帮助您深入了解某些主题。

开始之前

通常建议在使用 React 等框架构建应用程序之前，先掌握 HTML、CSS 和 JS 经验。因此，最好在阅读本文之前先学习这些知识。此外，如果您喜欢这篇文章，请留下🧡 和 🦄，这将对您有很大帮助。

让我们开始吧！

现代 JS 特性

• 扩展语法
• 类语法
• 箭头函数
• 模板字符串
• 异步/等待
• ES 模块

现代 JS 开发环境

React 代码的目标环境是浏览器（大多数情况下，我们也可以编写移动应用或在服务器上渲染应用）。由于浏览器无法理解我之前提到的所有最新 JS 特性，我们需要一个打包器和一个代码编译器——更多信息请见后文。我们还需要一个包管理器来下载所有我们想要使用的库——包括 React、React-DOM、Router 等等。

请注意，如果你刚开始学习，你不需要非常深入地了解这些内容，但对它们中的每一个都有所了解是有意义的

• Node.js - 我们的开发环境是Node.js环境。我们的工具（例如 Webpack、Babel 或 Create React App）也是 Node.js 程序。我们使用 Node.js 来启动开发环境、构建生产环境、运行测试等等。
• npm（或 yarn）——包管理——用于安装开发环境中所需的一切（React、Router、Babel、Webpack 等）
• ESLint - 观察代码中常见的编程错误或不良实践 - 良好的 Linter 配置可以帮您避免许多编码错误和 bug。当您的操作违反 Lint 规则时（例如未正确使用 React Hooks），Lint 配置会抛出错误或警告。
• Babel 编译器——将现代 JS 转换为浏览器可以理解的代码
• Webpack —— 将所有代码模块（所有文件和依赖项）打包成浏览器可以理解的单个（或多个）JS 文件。我们可以使用 Webpack 中的不同插件来实现不同的功能（例如压缩代码、打包和优化 CSS 等）。

将你的 UI 构建成可重复使用的组件

React 开发中最重要的概念是组件。我们的 UI 是由许多组件组成的。以下是一个简单的 Dev.to 接口示例，它被分解成多个组件：

较大的 UI 块将由许多较小的部分组成。例如，我没有分解 LeftPane 中的所有部分。您可以想象一下，它包含一个 Avatar 组件，该组件还包含 Picture、Header 和 Text 组件。下面是一个侧边导航组件，等等。

学习使用 React Hooks

React Hooks 是编写 React 应用程序的现代方法。所有 React 应用程序中都需要以下几个 Hooks：

• useState 或 useReducer
• useEffect - 确保你理解这一点，因为它一开始并不简单

路由

除非你正在构建一些非常小的应用程序，否则你会意识到需要在应用程序中渲染多个页面。这时路由就派上用场了。

路由的工作原理是在路由下渲染一组特定的 React 组件：

• '/' - 渲染 HomePage 组件
• '/about' - 渲染 AboutPage 组件

当我们在路线中接受以下情况时，路线会变得更加复杂：

• URI 参数例如：/employee/{employeeID}
• 查询参数例如：/employee?{employeeID=1}

学习管理全局状态的方法

全局或应用程序级状态是需要全局存储的数据，以便多个组件可以访问。

全局状态的一些示例：

• 当前登录的用户是谁以及他/她的权限是什么
• 当前选定的主题
• 当前选择的语言/区域设置

了解：

• Context Api + useReducer 钩子
• Redux

一般来说，你应该尽可能避免全局状态，而应该使用本地组件状态。

为什么 React 项目仍然使用 Redux

亚历山德鲁-丹·流行音乐 · 八月 8 '20

与 HTTP 服务交互

现在我们知道如何将 UI 拆分为组件、进行路由和状态管理，下一步就是管理从应用程序中的 API 获取数据。

对 HTTP 和 Web API 的基本了解至关重要。您将使用fetch API或类似 的库与 API 进行交互axios，因此请学习如何使用其中一种。

我写了关于流行的 Web API 以及如何与 HTTP API 交互的文章：

您应该了解的热门 Web API

亚历山德鲁-丹·流行音乐 ・ 七月 22 '20

#webdev #api #生产力 #machinelearning

正确处理 React 组件中的 async/await

亚历山德鲁-丹·流行音乐 · 2020 年 4 月 5 日

组件库

您可能并不总是想从头开始构建复杂 UI 的所有组件 - 因此了解预构建的组件库会很有用。使用这些组件库可以加快开发速度，因为您无需从头开始编写按钮、下拉菜单、表格等基本 UI 组件。

• 材质 UI
• 反应带
• 语义用户界面
• 脉轮
• Ant Design

您绝对不需要熟悉所有这些 - 只需知道它们在那里，并且在您需要时可以找到它们。

一切就绪！

好了！如果你坚持到了这里，收集了所有前面主题的信息，并且理解了每个主题的含义，那么你就完成了！

接下来，我们将讨论一些对于 React 开发人员来说非常有趣的更高级的内容。

高级 - 何时以及为何使用 React 工具链？

在上面的文章中，我讨论了何时应该使用诸如 Create React App、Next.js 或 Gatsby 之类的 React 工具链。

当你真正能够做出这些决定，或者帮助别人做出这些决定时，这很有趣，因为从这三个中选择正确的一个对于你的项目的成功至关重要：

何时选择 Gatsby、Next.Js 或 Create React App

亚历山德鲁-丹·流行音乐 ・ 七月 13 '20

高级 - 部署模型

由于在大多数情况下我们的 React 应用程序生产构建将产生静态资产，因此我们可以使用以下方式进行部署：

• CDN
• Web 服务器
• 容器

何时选择其中一个可能取决于不同的因素。

高级 - Typescript

Typescript 在React生态系统中越来越受欢迎。我围绕它写了一篇文章：

React Typescript 之路 - 2020

亚历山德鲁-丹流行音乐 · Sep 10 '20

#react #typescript #javascript

高级 - React 模式

使用模式可以使我们的代码更加模块化，更易于扩展和推理，而且更易于测试。

其中一些是：

• 渲染道具
• HOC
• 无头组件

无头组件可能是目前最流行的模式，因为在自定义挂钩中编写应用程序的业务逻辑非常好，从而使我们的组件代码保持干净。

高级 - 测试

在构建高弹性的 UI 应用时，测试至关重要。如果我们能用这些优秀的工具来构建可模块化为独立组件的应用，为什么不同时确保这些模块/组件始终能够按照我们的预期运行呢？

您需要了解：

• Jest 基础知识
• 如何使用 - React 测试库
• 如何使用 Cypress

您可以使用这个免费课程来学习使用 Jest 和 React 测试库来测试 React 应用程序。

高级造型方法

与React生态系统中的许多其他事物一样，样式有其特色 - 并且可以像使用普通 CSS 样式表一样简单，也可以使用更复杂的方法，如 JS 中的 CSS。

造型可以是：

• CSS
• 排队
• CSS 模块
• SASS（模块）
• JS 中的 CSS
• 原子 CSS（例如 TailwindCSS）

不同的应用程序会有不同的样式需求。如果所有样式都是从零开始，那么像 JS 中的 CSS 或 Atomic CSS 之类的方法可能是最合理的。

某些应用程序可能需要极少的自定义样式，因为它们是基于 Bootstrap 4 或 Material UI 等 CSS 框架构建的。在这种情况下，CSS 模块或 SASS 可能是您的选择。

结论

学习 React 和使用 Web 是一段永无止境的旅程，所以要不断学习，不断探索！

如果您喜欢这篇文章，请留下🧡和🦄，也请查看我的Twitter，我会在那里发布更多精彩内容。

👇在下面评论👇
我遗漏了什么吗？今天 React 世界有哪些值得了解的最重要的事情？