如何在 Ubuntu 20.04 上安装 ReactJS

介绍:

React 是一个非常强大的 JavaScript 前端库,可用于定义用户界面和相关组件。 它是一个开源库,由 Facebook. 今天的文章将教你在你的 Ubuntu 20.04 系统上安装 ReactJS 的方法。

在 Ubuntu 20.04 系统上安装 ReactJS 的方法:

要在 Ubuntu 20.04 系统上安装 ReactJS 并运行相应的应用程序,您需要执行以下步骤:

第 1 步:将相关 PPA 存储库添加到您的 Ubuntu 20.04 系统:

您需要将 NodeJS PPA 存储库添加到您的 Ubuntu 20.04 系统,因为只有在您的系统上安装了 NodeJS 时,ReactJS 应用程序才能在您的系统上运行。 可以使用以下命令添加所述存储库:

$ curl –sL https://deb.nodesource.com/setup_14.x | sudo bash -

将上述存储库成功添加到您的 Ubuntu 20.04 系统将在终端上呈现下图所示的消息:

第 2 步:在 Ubuntu 20.04 系统上安装 NodeJS:

之后,您可以使用以下命令在您的 Ubuntu 20.04 系统上安装 NodeJS:

$ sudo apt install nodejs –y

在您的 Ubuntu 20.04 系统上安装 NodeJS 后,您将收到下图所示的成功消息:

第 3 步:检查 Ubuntu 20.04 系统上安装的 NodeJS 版本:

您可以通过使用以下命令检查 NodeJS 的版本来验证 NodeJS 在您的 Ubuntu 20.04 系统上的成功安装:

$ node –v

在我们的 Ubuntu 20.04 系统上安装的 NodeJS 的版本是 10.19.0 如下图所示:

第 4 步:在 Ubuntu 20.04 系统上安装 Yarn:

现在你需要在你的 Ubuntu 20.04 系统上安装 Yarn,使用以下命令:

$ sudo npm install –g yarn

在您的 Ubuntu 20.04 系统上成功安装 Yarn 后,您将在终端上收到下图所示的消息:

第 5 步:在 Ubuntu 20.04 上创建您的第一个 ReactJS 应用程序:

您现在可以使用以下命令在 Ubuntu 20.04 上创建您的第一个 ReactJS 应用程序:

$ sudo npm init react-app myfirstreactapp

或者,您也可以使用以下命令创建 ReactJS 应用程序:

$ yarn create react-app myfirstreactapp

成功创建 ReactJS 应用程序需要几分钟时间,如下图所示:

第 6 步:导航到您的 ReactJS 项目目录:

成功创建 ReactJS 应用程序后,您需要使用以下命令移动到其项目目录:

$ cd myfirstreactapp

第 7 步:在 Ubuntu 20.04 中启动您的 ReactJS 应用程序:

现在您需要使用如下所示的命令启动您的 ReactJS 应用程序:

$ npm start

开发服务器需要一些时间才能启动,如下图所示:

您将能够在您的默认 Web 浏览器中查看您的 ReactJS 应用程序,方法是提供您的 localhost 地址和端口号“:3000”,如下图所示:

结论:

在本指南中,我们通过安装 NodeJS 和所需的依赖项,教你在 Ubuntu 20.04 系统上使用 ReactJS 的正确方法。 最后,我们通过创建示例应用程序向您展示了 ReactJS 的用法。