如何在 Ubuntu 22.04 上安装 ReactJS | 20.04
ReactJS，通常简称为 React，是由 Facebook 开发和维护的强大的开源 JavaScript 库。它主要用于为单页应用程序创建交互式用户界面 (UI)，从而带来流畅无缝的用户体验。React 通过渲染高效的组件来工作，这些组件是简单的、可重用的 JavaScript 代码片段。
React 背后的理念围绕着从更小的、独立的组件构建复杂 UI 的概念展开，每个组件负责呈现一小段可重用的 HTML。这导致高度模块化的代码更易于维护和推理。
ReactJS 的独特功能
React 提供了大量独特的功能，使其有别于其他软件语言和库。以下是其突出属性的概述：
也可以看看:
- 虚拟 DOM： React 创建实际 DOM（文档对象模型）的轻量级副本，允许高效的差异化和协调过程。这最大限度地减少了对 DOM 的直接操作次数，从而提高了性能。
- JSX： JSX 是 JavaScript 的语法扩展，允许您在 JavaScript 中编写类似 HTML 的代码。这不仅使您的代码更具可读性，而且简化了整个开发过程。
- 基于组件的架构： React 使您能够封装组件，使代码可重用并且更易于测试和维护。每个组件都可以管理自己的状态，从而产生更可预测的代码。
- 单向数据流： React 实现单向数据流，这意味着子结构的更改不会影响其父结构。这确保了代码的稳定性并使调试更容易。
- 强大的社区支持：在 Facebook 的支持下，React 拥有强大的开发人员社区、频繁的更新和庞大的资源库。
ReactJS 对比 备择方案
虽然有许多流行的 JavaScript 库和框架，例如 Angular 和 Vue.js，但 React 由于一些关键差异而脱颖而出：
- 性能：得益于其虚拟 DOM，React 提供了卓越的性能，尤其是对于大型和动态应用程序。
- 灵活性： React 通常被认为比遵循严格结构的其他框架（如 Angular）更灵活。React 基于组件的架构允许开发人员选择自己的架构、库和工具。
- 学习曲线：与 Angular 相比，React 的学习曲线相对更易于管理，这主要是因为它的简单性和对 JavaScript 的关注。
- 集成： React 可以很容易地集成到其他项目中，不像 Angular 或 Vue，它们通常用于从头构建新应用程序。
在后续指南中，我们将深入探讨如何在 Ubuntu 22.04 Jammy Jellyfish 或 Ubuntu 20.04 Focal Fossa 上安装 ReactJS，从 NodeSource 安装最新的稳定版或 LTS 版本，然后使用 npm 安装 ReactJS。
第 1 部分：在 Ubuntu 上安装 Node.js
Node.js 是 ReactJS 的重要组件，因为它充当允许 JavaScript 在服务器端执行的运行时环境。本节将指导您完成在 Ubuntu 系统上安装 Node.js 的必要步骤。我们将使用命令行界面 (CLI) 来完成这些任务。
第 1 步：更新您的 Ubuntu 系统
在我们开始安装过程之前，必须确保您的 Ubuntu 系统已更新。此步骤通过确保所有现有包都是最新的来帮助避免潜在的冲突。执行以下命令来更新您的系统：
sudo apt update && sudo apt upgrade此命令将从 Ubuntu 存储库中获取最新版本的系统软件包，然后将您的系统升级到这些最新版本。
第 2 步：安装所需的软件包
为了顺利安装 Node.js，某些包是必需的。我们将使用 apt 包管理器安装它们。以下命令将安装curl（使用各种协议传输数据的工具）和git（分布式版本控制系统）：
sudo apt install curl git -y第 3 步：导入 NodeSource 存储库
要安装 Node.js，我们将使用 NodeSource 存储库，与默认的 Ubuntu 存储库相比，它提供了更多最新版本的 Node.js。您可以选择当前稳定版本或最新的 Node.js 长期支持 (LTS) 版本。
当前版本将具有最新功能，但 LTS 版本提供更高的稳定性，通常是生产环境的更好选择。根据您的喜好，运行以下命令之一来导入 NodeSource 存储库：
选项 1 – 导入 Node.js – 当前版本：
curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -选项 2 – 导入 Node.js – LTS 版本：
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo bash -将所选的 NodeSource 存储库添加到您的系统后，您将需要运行另一个更新以确保系统识别新存储库：
sudo apt update系统更新后，您可以使用以下命令安装 Node.js：
sudo apt install nodejs安装后，验证已安装的 Node.js 的版本和构建，以确保一切都已正确设置。您可以通过运行以下命令来执行此操作：
node --version这将输出当前系统上安装的 Node.js 版本，确认安装成功。
第 2 部分：安装 ReactJS
现在在您的 Ubuntu 系统上安装了 Node.js，我们准备好继续安装 ReactJS。ReactJS 是一个强大的 JavaScript 库，用于构建用户界面，尤其是需要快速响应的单页应用程序。
第 1 步：更新 NPM
Node 包管理器 (NPM) 是 JavaScript 开发人员的一个不可或缺的工具，它与 Node.js 捆绑在一起。它提供了在 Node.js 中安装、更新和管理各种软件包的功能。确保 NPM 是最新的是安装过程中至关重要的第一步。
要将 NPM 更新到最新版本，请运行以下命令：
sudo npm install npm@latest -g此命令中的标志-g表示 NPM 应该在您的系统中全局更新。此步骤保证您执行的所有后续 npm 命令都使用最新版本的包管理器，从而优化效率并减少潜在问题。
第二步：安装 ReactJS
使用更新的 NPM，我们现在准备安装 ReactJS。ReactJS 提供了一组丰富的工具和功能，开发人员可以在整个应用程序开发过程中利用这些工具和功能。
要安装 ReactJS 并创建新的 React 应用程序，您可以使用 Create React App 命令行工具。该实用程序允许在没有任何构建配置的情况下快速设置新的单页 React 应用程序。使用以下命令安装它：
sudo npm install -g create-react-app此命令将在您的系统上全局安装 Create React App。
第 3 部分：制作你的第一个 ReactJS 项目
在您的 Ubuntu 系统上成功安装 ReactJS 之后，我们现在开始进入我们旅程中令人兴奋的部分——创建您的第一个 ReactJS 项目。此实践活动旨在让您对 ReactJS 及其功能有一个实际的了解。
第 1 步：初始化您的 ReactJS 项目
我们需要做的第一件事是初始化一个新的 ReactJS 项目。为此，我们使用名为“Create React App”的命令行工具。这个由 Facebook 提供的实用程序通过自动为您配置构建设置来简化创建新 React 应用程序的过程。
运行以下命令创建一个新项目。将“我的应用程序”替换为您想要的项目名称：
npx create-react-app my-app该npx命令执行 Create React App 包而不在全局安装它。此命令使用您指定的名称（在本例中为“my-app”）创建一个新目录，并在此目录中设置一个新的 React 应用程序。
第 2 步：导航到您的新项目目录
创建新的 React 项目后，下一步是导航到新创建的项目目录。我们使用cd（更改目录）命令执行此操作。该命令允许我们从终端进入系统中的不同目录。
通过执行以下命令导航到您的新项目目录：
cd my-app现在您位于新 React 应用程序的项目目录中。在这里，您可以运行各种命令来管理和操作您的 React 应用程序。
第 3 步：开始你的 ReactJS 项目
设置并准备好新项目后，就可以启动它并查看您的劳动成果了。这是通过运行一个简单的npm命令来实现的。
要启动新的 React 应用程序，请运行以下命令：
npm run buildnpm start执行此命令后，将启动开发服务器。该服务器会监视项目文件中的任何更改并自动刷新您的应用程序，从而在您开发应用程序时为您提供实时更新。你的新 React 应用程序现在应该可以在你的网络浏览器中访问了http://localhost:3000。
第 4 部分：为您的 ReactJS 应用程序设置 Systemd 服务
在我们旅程的这一部分，我们将为我们的 ReactJS 应用程序设置一个 systemd 服务。Systemd 是 Linux 操作系统的系统和服务管理器，它已成为大多数新 Linux 发行版事实上的初始化守护进程。这一步对于确保我们的应用程序能够持久运行至关重要，即使在系统重启、崩溃甚至终端会话结束时也是如此。
第 1 步：创建 Systemd 服务文件
我们的第一个任务是为我们的 ReactJS 应用程序创建一个 systemd 服务文件。服务文件告诉 systemd 如何管理我们的应用程序并与之交互。
要创建服务文件，我们将使用文本编辑器，例如 nano。执行以下命令创建并打开服务文件（将“my-app”替换为您的应用程序名称）：
sudo nano /etc/systemd/system/my-app.service此命令打开 nano 文本编辑器并在“/etc/systemd/system”目录中创建一个名为“my-app.service”的新文件。
第 2 步：配置 Systemd 服务文件
在文本编辑器中打开服务文件后，我们需要输入一些关于我们的 ReactJS 应用程序的具体细节。以下是您的 systemd 服务文件的示例：
[Unit]
Description=My ReactJS App
After=network.target
[Service]
ExecStart=/usr/bin/npm start
WorkingDirectory=/path/to/my-app
User=username
Group=usergroup
Restart=always
RestartSec=3
Environment=PATH=/usr/bin:/usr/local/bin
Environment=NODE_ENV=production
Environment=PORT=3000
[Install]
WantedBy=multi-user.target
在此文件中，将“/path/to/my-app”替换为您的 ReactJS 应用程序的实际路径，并将“用户名”和“用户组”分别替换为您的实际用户名和用户组。这些Environment行为您的应用程序正确运行设置了必要的环境。
第 3 步：启用和启动服务
正确配置 systemd 服务文件后，保存并退出文本编辑器。现在，我们需要通知 systemd 我们的新服务，并指示它在系统启动时启动该服务。
要启用并启动您的服务，请执行：
sudo systemctl enable my-app
sudo systemctl start my-app该systemctl命令是一个实用程序，用于检查和控制 systemd 系统和服务管理器的状态。
最后，使用以下命令验证您的服务是否正在运行：
sudo systemctl status my-app此命令应输出有关您的服务的信息，包括其当前状态。如果运行正常，您应该会在输出中看到“active (running)”。
关于在 Ubuntu Linux 上安装 ReactJS 的结束思考
在本文中，我们开始了在 Ubuntu Linux 系统上设置ReactJS的综合之旅。我们首先安装 Node.js 和 npm，这是为我们的 JavaScript 开发环境提供支持的关键组件。然后我们安装了 create-react-app 包，这是一个有助于简化启动新 ReactJS 项目过程的工具。
为确保正确设置 ReactJS 环境，我们继续创建一个测试 ReactJS 应用程序。这使我们能够看到运行中的环境，并验证一切是否运行顺利。
最后，我们通过为我们的 ReactJS 应用程序创建一个 systemd 服务来进入 Linux 系统管理的世界。这个关键步骤确保我们的应用程序保持正常运行，即使在系统重启或意外故障时也是如此。
这份综合指南为在 Ubuntu Linux 上设置 ReactJS 开发环境提供了坚实的基础。然而，学习永远不会停止。要真正掌握 ReactJS 及其与 Linux 环境的交互，还有更多的概念和细微差别需要探索。
其他资源
在您追求知识的过程中，以下是一些您可能会觉得有用的官方资源：
- ReactJS 官方文档：这是官方的 ReactJS 文档，涵盖了从初学者概念到高级主题的所有内容。它是任何 ReactJS 开发人员不可或缺的资源。
- Node.js 文档：官方 Node.js 文档是了解更多有关 Node.js 和 npm 以及如何在开发工作流程中有效使用它们的好地方。
- Systemd 概述：这是 systemd 的官方 wiki。它深入介绍了 systemd、它的用法和它的命令集。
