通过

React 概述

  • 项目

什么是 React JS？

React 是用于生成前端最终用户界面的开源 JavaScript 库。 与提供完整应用程序框架的其他 JavaScript 库不同，React 仅侧重于通过被称作组件的封装单元创建应用程序视图，这些组件会维护状态和生成 UI 元素。 你可以在网页上放置单个组件，或嵌套组件的层次结构以创建一个复杂的 UI。

React 组件通常以 JavaScript 和 JSX (JavaScript XML) 编写，JSX 是一个与 HTML 很相似的 JavaScript 扩展，但有一些语法功能，这些语法功能使执行常见任务（例如为 UI 元素注册事件处理程序）变得更轻松。 React 组件实现 render 方法，该方法返回表示组件 UI 的 JSX。 在 Web 应用中，组件返回的 JSX 代码将转换为在浏览器中呈现的符合浏览器的 HTML。

React 是否可在 Windows 上工作？

是的。 Windows 支持两种开发 React 应用的不同环境：

可使用 React 执行什么操作？

Windows 为 React 开发人员提供各种场景支持，包括：

安装选项

可通过几种不同的方法来安装 React 以及最适合你的用例场景的集成工具链。 以下是一些最常见的方法。

React 工具

虽然在纯文本编辑器中编写简单的 React 组件可对 React 进行很好的介绍，但是以这种方式生成的代码很庞大，难以维护和部署，而且速度慢。 生产应用需要执行一些常见任务。 这些任务由被应用作为依赖项的其他 JavaScript 框架处理。 这些任务包括：

  • 编译 - JSX 是常用于 React 应用的语言，但浏览器无法直接处理此语法。 因此需要将代码编译为标准的 JavaScript 语法，并为不同的浏览器自定义代码。 Babel 是支持 JSX 的示例编译器。
  • 捆绑 - 由于性能是新式 Web 应用的关键，因此应用的 JavaScript 应只包含应用所需的代码，并将其合并为尽可能少的文件，这一点很重要。 webpack 等捆绑程序为你执行此任务。
  • 包管理 - 通过包管理，可以轻松地将第三方包的功能添加到自己的应用，其中包括更新包和管理依赖项。 常用的包管理器包括 Yarn 和 npm。

这一套帮助你创建、生成和部署应用的框架统称为工具链。 适用于使用此工具链的 React 的一个易于设置的开发环境是 Vite，可为你生成简单的单页应用。 使用 Vite 所需的唯一设置是 Node.js。

React Native 组件目录

可在 React Native 应用中使用的组件包括：

  • 核心组件 - 作为 React Native 框架的一部分开发和支持的组件。
  • 社区组件 - 由社区开发和维护的组件。
  • 本机组件 - 你使用平台本机代码创作的组件，并且为了可以从 React Native 访问而进行了注册。

React Native 目录提供可以由目标平台筛选的组件库的列表。

Fullstack React 工具链选项

React 是库，而不是框架，因此可能需要其他工具来创建更复杂的应用。 除了使用 React，你可能还会考虑使用以下各项：

  • 包管理器：React 的两个常用包管理器是 npm（包含在 NodeJS 中）和 yarn。 两者都支持可以安装的大量维护良好的包库。
  • React 路由器：导航组件的集合，可帮助你执行诸如为 Web 应用的 URL 添加书签，或以组合方式在 React Native 中进行导航等操作。 React 实际上只涉及状态管理并将该状态呈现给 DOM，因此创建 React 应用程序通常需要使用 React 路由器等路由库。
  • Redux：一种可帮助处理数据流体系结构的可预测的状态容器。 在进行更高级的 React 开发之前，可能不需要使用它。 引用 Redux 的创建者之一 Dan Abramov 的一句话：“除非你在使用 Vanilla React 的过程中遇见问题，否则不要使用 Redux。”
  • Webpack：一种使你可编译 JavaScript 模块的生成工具，也称作模块捆绑程序。 webpack 处理应用程序时，它会在内部生成一个依赖项关系图，该关系图映射项目所需的每个模块，并生成一个或多个捆绑。
  • Uglify：一种 JavaScript 分析器、缩小器、压缩器和修饰器工具包。
  • Babel：一种 JavaScript 编译器，主要用于将 ECMAScript 2015+ 代码转换为当前及旧浏览器或环境中的后向兼容的 JavaScript 版本。 它对于使用 babel-preset-env 也很有帮助，这样你就无需微观管理语法转换或浏览器填充代码，并且可以定义要支持的 Internet 浏览器。
  • ESLint：一种用于识别和报告在 JavaScript 代码中发现的模式的工具，有助于使代码更加一致，避免出现 Bug。
  • Enzyme：一种适用于 React 的 JavaScript 测试实用工具，通过该工具可以更轻松地测试 React 组件的输出。
  • Jest：一种内置于 create-react-app 包中的测试框架，有助于编写惯用的 JavaScript 测试。
  • Mocha：一种在 Node.js 和浏览器中运行的测试框架，可帮助进行异步测试、报告并将未捕获的异常映射到正确的测试用例。

React 课程和教程

以下是一些学习有关 React 的知识以及如何生成示例应用的建议位置：

其他资源