通过

React 概述

什么是 React JS？

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

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

重要

2025 年 2 月，React 团队 宣布 在新应用中不再推荐使用 Create React App (CRA)。 团队建议现有应用迁移到 Next.js 或 React 路由器等框架，或者迁移到 Vite、Parcel 或 RSBuild 等生成工具。

React 是否适用于Windows？

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

  • 在 Windows
  • 在 Windows Subsystem for Linux

可使用 React 执行什么操作？

Windows支持适用于 React 开发人员的各种方案，包括：

  • Basic Web 应用：如果你不熟悉 React，并且主要希望了解如何使用 React 生成基本 Web 应用，我们建议你使用 Windows。 如果计划创建将部署用于生产的 Web 应用，可能需要考虑使用 Windows Subsystem for Linux （WSL）0 上的 vite 前端工具创建 React 应用，以提高性能速度、系统调用兼容性以及本地开发环境和部署环境（这通常是 Linux 服务器）。

  • Single-Page 应用（SPA）：这些网站通过从服务器获取新数据来动态重写当前网页与用户交互，而不是像浏览器通常那样加载整个新页面。 如果要构建面向静态内容的 SPA 网站，建议 在 WSL 上安装 Gatsby。 如果要使用 Node.js 后端生成服务器呈现的 SPA 网站，建议 在 WSL 上安装 Next.js。 （虽然 Next.js 现在还提供 静态文件服务）。

  • Native 桌面应用：React Native for Desktop + macOS 使你能够使用 JavaScript 生成跨各种类型的桌面电脑、笔记本电脑、平板电脑、Xbox和Mixed Reality设备运行的本机桌面应用程序。 它支持 Windows SDK 和 macOS SDK。

  • 本机移动应用： React Native 是使用 JavaScript 创建 Android 和 iOS 应用的跨平台方法，可呈现到本机平台 UI 代码。 安装 React Native 的方法主要有两种：Expo CLI 和 React Native CLI。 在StackOverflow上对这两者进行了很好的比较。 Expo 具有 iOS 和 Android 移动设备的客户端应用，用于运行和测试应用。 有关使用 Windows、React Native 和 Expo CLI 开发 Android 应用的说明，请参阅 Windows 上的 React Native for Android 开发。

安装选项

可通过几种不同的方法来安装 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 Directory 提供可由目标平台筛选的组件库列表。

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。
  • 酶：用于 React 的 JavaScript 测试实用工具，可更轻松地测试 React 组件的输出。
  • Jest：一个与 Babel 协同工作的测试框架，可帮助在 React 应用中编写惯用 JavaScript 测试。
  • Mocha：在 Node.js 和浏览器中运行的测试框架，可帮助异步测试、报告和将未捕获的异常映射到正确的测试用例。

React 课程和教程

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

其他资源

  • Last updated on