如何创建一个新的React.Js应用程序

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

我们将使用yarn包管理器创建一个reactjs应用程序并进行生产构建。 Pm2用于运行和监视React应用程序。

本教程将帮助您在开发人员系统上创建新的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命令创建具有最新版本的新Read应用程序。

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

yarn create react-app myreactapp 

除纱线外,您还可以使用 像素npx create-react-app myreactapp) 或者 npmnpm init react-app myreactapp)命令来创建React.js应用程序。

成功创建应用程序后,您会在屏幕上看到很长的结果。 最后,您将找到一些有用的命令,结果如下所示。

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

一旦创建了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开始。使用具有系统IP地址的3000端口访问您的React应用程序。 对于本地计算机,请使用“ localhost”,然后使用端口。

在Ubuntu 20.04上安装React.js

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

让我们开始使用react.js构建出色的应用程序。 如屏幕上所示,在文本编辑器中编辑src / App.js文件。 然后在 函数App()。 您可以在此处添加要显示在主页上的内容。

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应用程序。 您可以在网络浏览器中访问applicaton。

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源应用程序生成一个生产构建。

要生成生产版本,请打开终端并更改为反应应用程序目录。 然后执行以下命令:

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创建一个很棒的用户界面。

Sidebar