创建React App,使用React Ubuntu 20.04创建您的第一个应用程序

创建反应应用

在下一篇文章中,我们将看一看 我们如何使用Create React App在Ubuntu 20.04上使用ReactJS创建我们的第一个应用程序。 ReactJS是一个开放源代码的JavaScript库,用于创建用户界面,由Facebook和开发人员社区维护。 ReactJS可用于Web应用程序或移动应用程序的开发。

在React中, 也称为ReactJS,数据在DOM中处理。 运行React应用程序需要用于路由和状态管理的其他库。 这些库的一些示例是 终极版 y 反应路由器.

在Ubuntu 20.04上安装React

要在系统上安装React,我们首先必须知道npm是什么,并了解为什么需要它们。 Npm代表节点包管理器,它是世界上最大的开源软件注册中心。 包含超过800.000个代码包。 Npm是免费使用的,无需注册或登录即可下载和使用任何公共软件。

Npm是用于javascript应用程序的依赖项管理工具,这有助于安装所有库和其他工具以支持JS应用程序的开发。

安装npm

安装nodejs,其中包括npm,我们只需要打开一个终端(Ctrl + Alt + T)并执行以下命令:

sudo apt install nodejs

完成npm安装后,我们可以 检查您的版本和节点的版本。 我们可以使用以下命令执行此操作:

已安装npm版本

npm -v

由于经常执行更新,因此安装的npm版本取决于安装日期。 我们必须确保安装的版本高于5.

检查节点的安装版本,使用的命令将是:

安装的节点版本

node -v

如果您的系统上未安装最新版本的npm, 您可以将Node Package Manager(npm)更新到最新版本 在终端中运行此命令:

更新npm

sudo npm install -g npm@latest

安装create-react-app

要安装一个高效的React环境,我们需要配置babel,webpack等工具,这些工具对于React世界的初学者来说配置起来很复杂。 但是,我们可以找到一些工具来帮助我们进行配置。 其中我们会发现 create-react-app,这是最易于使用和配置的工具.

Create React App是学习React的舒适环境,这是使用React开始构建新的单页应用程序的最佳方法。

创建React App配置您的开发环境 这样您就可以使用最新的Javascript功能,提供良好的开发体验,并优化您的应用程序以进行生产。 如其网站上所示,必须在计算机上安装Node> = 8.10和npm> = 5.6。

我们可以 使用npm安装create-react-app。 为此,在终端(Ctrl + Alt + T)中,我们只需要执行以下安装命令:

安装创建反应应用程序

sudo npm install -g create-react-app

在我们的系统上完成create-react-app应用程序的安装后,我们可以 检查安装的版本 执行以下命令:

创建反应应用程序版本

create-react-app --version

创建第一个React应用程序

我们的第一个React应用程序可以使用create-react-app轻松创建。 我们只需要使用以下命令:

使用create react app使用reactjs创建我的第一个应用

create-react-app mi-primera-app

上面的命令将创建一个名为React的应用程序 我的第一个应用。 同时 将创建一个与应用程序名称相同的新文件夹,其中包含所有必要的文件,设置和库.

运行React应用

一旦创建了React项目, 我们将不得不移至项目目录并使用以下命令运行React应用程序 在终端中(Ctrl + Alt + T):

npm start

命令 npm开始 启动将执行整个构建过程的开发服务器.

用reactjs编译我的第一个应用程序

终端将告诉我们,我们必须 打开浏览器并加载默认情况下将在URL http:// localhost:3000上运行的应用程序。 当浏览器打开时,我们将在屏幕上看到React徽标和文本。

从浏览器中看到的第一个应用

卸载create-react-app和npm

用户 我们可以使用npm uninstall命令卸载从npm安装的任何库。 在终端(Ctrl + Alt + T)中运行以下命令进行卸载 创建反应应用:

删除创建反应应用程序

sudo npm uninstall -g create-react-app

同样,我们可以 卸载npm 在同一终端中使用此其他命令:

卸载nodejs

sudo apt remove nodejs

有关用于创建用户界面的JavaScript库的更多信息,请参见 项目文件.


发表评论,留下您的评论

发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。

  1.   布鲁诺

    优秀的内容! 奥布里加多!