怎样创建一个新的React.Js应用程序

React是一个开放源代码的JavaScript库,用于创建Web前端和UI组件。 由Facebook和大型开发人员社区开发和维护。这对于创建移动应用程序也很有用。

使用yarn包管理器创建reactjs应用程序以创建生产版本。用于运行和监视反应应用程序的Pm2。

本教程将帮助您在开发人员系统上创建一个新的React.js应用程序。它还可以帮助您运行reactjs应用程序并创建生产版本。

先决条件

React.Js应用程序可以在安装了node.js的任何平台上运行。 我们建议您使用NVM软件包管理器来安装Node.js。

假设该节点已经安装在您的系统上。如果没有,请按照下面的链接首先安装node.js。

  • https://tecadmin.net/install-nodejs-with-nvm/

它还安装了纱线卷装管理器。

npm install -g yarn 

第1步-创建一个React应用程序

有多种方法可以在开发人员系统上创建新的React应用程序。例如,使用yarn,npx或npm init命令创建新阅读应用程序的最新版本。

在本教程中,您将使用npm init创建一个新的react应用程序。

yarn create react-app myreactapp 

可以与其他螺纹一起使用 像素 (((npx create-react-app myreactapp) 或者 npm (((npm init react-app myreactapp)创建React.js应用程序的命令。

如果成功创建了该应用程序,您将在屏幕上看到很长的结果。最后,使用一些方便的命令,您将获得类似于以下内容的结果:

第2步–在开发人员模式下运行React应用

创建一个React应用程序之后。这将在当前目录中创建一个具有项目名称的文件夹。切换到该项目并运行 yarn start 启动应用程序。

cd myreactapp 
yarn start 

输出:

 
Compiled successfully!

You can now view myreactapp in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.10.200:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

默认的React应用程序从端口3000启动。使用端口3000和系统IP地址访问React应用程序。对于本地计算机,请使用“ localhost”,然后使用端口。

在Ubuntu 20.04上安装React.js

第3步–开始编辑您的React.js应用程序

开始使用react.js构建出色的应用程序。使用屏幕上所示的文本编辑器编辑src / App.js文件。下一个, 功能应用程式()..您可以在此处添加要显示在主页上的内容。

React.js进行了第一次更改

保存文件。浏览器会自动重新加载页面以显示更新的内容。这对于实时查看更改非常有用。

React.js在屏幕上显示更改

步骤4 –在PM2上运行React应用程序

带有内置负载平衡器的Node.JS应用程序的流程管理器(pm2)。 它提供了一种简单的方法来管理,运行和监视Node应用程序。

要使用pm2,请确保已将其安装在系统上。您也可以使用以下命令进行安装。

npm install -g pm2 

然后切换到react应用程序并运行以下命令:

pm2 start yarn --name "MyReactApp" -- start 

这里 --name "MyReactApp" 定义应用程序的名称,并将其显示在pm2应用程序列表下方。 start是传递到yarn命令行的参数。

上面的命令在定义的端口上启动一个React应用程序。 您可以使用网络浏览器访问该应用程序。

以下pm2命令可帮助您检查应用程序的状态并停止并启动它。

pm2 status MyReactApp        # Check application status pm2 stop MyReactApp          # Stop application by name pm2 start MyReactApp         # Start application by name 

要查看应用程序生成的日志,请使用以下命令:这对于调试目的很有用。

pm2 logs MyReactApp 

第5步–创建生产版本

准备好将应用程序部署到生产环境中时。 从您的react.js源应用程序生成一个生产构建。

要生成生产版本,请打开终端并转到react应用程序目录。然后运行以下命令:

yarn build 

如果构建成功,将在React.js根目录下的build目录中生成一个生产文件。您可以将所有文件从构建目录部署到生产服务器。

ls -l build/
 
-rw-r--r-- 1 root root 1092 Mar 22 12:06 asset-manifest.json
-rw-r--r-- 1 root root 3870 Mar 22 12:06 favicon.ico
-rw-r--r-- 1 root root 3022 Mar 22 12:06 index.html
-rw-r--r-- 1 root root 5347 Mar 22 12:06 logo192.png
-rw-r--r-- 1 root root 9664 Mar 22 12:06 logo512.png
-rw-r--r-- 1 root root  492 Mar 22 12:06 manifest.json
-rw-r--r-- 1 root root   67 Mar 22 12:06 robots.txt
drwxr-xr-x 5 root root 4096 Mar 22 12:06 static

结论

使用React创建出色的用户界面。