如何在 Ubuntu 20.04 LTS 上安装 ReactJS

lichengxin • 2022-02-15 00:09 • 技术文章

ReactJS 是一个开源的基于 JavaScript 组件的库，用于创建活动和交互式用户界面，尤其适用于单页应用程序。它非常适合为 Web 和移动应用程序创建可扩展、快速和快速的前端，因为它具有高度通用性、声明性和有效性。移动或 Web 应用程序的视图层由 ReactJS 有效处理。

它使程序员能够以最少的代码和最佳的渲染性能创建引人入胜的交互式应用程序。开发人员可以使用 JavaScript 库创建实时更新数据的大型应用程序，而无需重新加载页面。

在本教程中，您将学习在 Ubuntu Linux 系统上安装和创建 React 应用程序。

先决条件

您必须有一个正在运行的具有管理权限的 Ubuntu 20.04 LTS 系统。

第 1 步 – 安装 Node.js

创建和运行 React.js 应用程序需要 Node.js。以下步骤将在您的 Ubuntu 系统上安装 Node.js 17。

A、将 Node.js 14（当前稳定版本）PPA 添加到您的 Ubuntu 系统

linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://deb.nodesource.com/setup_17.x | sudo bash –

B、接下来，运行以下命令将 Node.js 安装到您的系统：

linuxmi@linuxmi:~/www.linuxmi.com$ sudo apt install nodejs -y

C、最后，检查 Node.js 的当前活动版本

linuxmi@linuxmi:~/www.linuxmi.com$ node -v
v17.4.0

D、还要在您的系统上安装Yarn包管理器。

linuxmi@linuxmi:~/www.linuxmi.com$ npm install -g yarn

第 2 步 – 创建一个新的 React 应用程序

您可以使用以下命令之一创建 React.js 应用程序。

linuxmi@linuxmi:~/www.linuxmi.com$ yarn create react-app myreactapp

除了 yarn，您还可以使用npx ( npx create-react-app myreactapp) 或npm ( npm init react-app myreactapp) 命令来创建 React.js 应用程序。

成功创建应用程序后，您将在屏幕上看到一串很长的输出。最后，您会发现如下所示的结果以及一些有用的命令。

Success! Created myreactapp at /home/linuxmi/www.linuxmi.com/myreactapp
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myreactapp
  yarn start

或者设置创建反应应用程序所需的所有设置和工具。

linuxmi@linuxmi:~/www.linuxmi.com$ sudo npm -g install create-react-app
[sudo] linuxmi 的密码： 
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 67 packages, and audited 68 packages in 12s

4 packages are looking for funding
  run `npm fund` for details

2 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

验证其安装成功。

linuxmi@linuxmi:~/www.linuxmi.com$ create-react-app --version 
5.0.0

第 3 步 – 启动 React 应用程序

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

linuxmi@linuxmi:~/www.linuxmi.com$ cd myreactapp

linuxmi@linuxmi:~/www.linuxmi.com$ yarn start

输出：

Compiled successfully!

You can now view myreactapp in the browser.

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

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

assets by path static/ 1.49 MiB
  asset static/js/bundle.js 1.48 MiB [emitted] (name: main) 1 related asset
  asset static/js/node_modules_web-vitals_dist_web-vitals_js.chunk.js 6.93 KiB [emitted] 1 related asset
  asset static/media/logo.6ce24c58023cc2f8fd88fe9d219db6c6.svg 2.57 KiB [emitted] (auxiliary name: main)
asset index.html 1.67 KiB [emitted]
asset asset-manifest.json 546 bytes [emitted]
runtime modules 31.3 KiB 15 modules
modules by path ./node_modules/ 1.35 MiB 99 modules
modules by path ./src/ 18.1 KiB
  modules by path ./src/*.css 8.82 KiB
    ./src/index.css 2.72 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css 1.37 KiB [built] [code generated]
    ./src/App.css 2.72 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css 2 KiB [built] [code generated]
  modules by path ./src/*.js 5.69 KiB
    ./src/index.js 1.8 KiB [built] [code generated]
    ./src/App.js 2.5 KiB [built] [code generated]
    ./src/reportWebVitals.js 1.39 KiB [built] [code generated]
  ./src/logo.svg 3.61 KiB [built] [code generated]
webpack 5.67.0 compiled successfully in 26773 ms

默认的 React 应用程序在端口 3000 上启动。使用带有系统 IP 地址的 3000 端口访问您的 React 应用程序。对于本地机器，使用“localhost”后跟端口。

现在让我们用 React 创建一个很棒的用户界面。

第 4 步 – 创建 React.js 生产构建

一旦您的应用程序准备好进行生产部署。让我们为您的 React 应用程序创建一个生产版本。生产版本包含在生产环境中运行应用程序所需的静态文件。您不需要在生产服务器上安装 Node.js，因为它们不包含任何开发文件。

使用yarn build或npm run build命令创建 React.js 应用程序的生产版本。

linuxmi@linuxmi:~/www.linuxmi.com/myreactapp$ yarn build

成功构建后，您将看到如下输出：

yarn run v1.22.17
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  43.71 kB  build/static/js/main.e2ab2e02.js
  1.78 kB   build/static/js/787.16f177e3.chunk.js
  541 B     build/static/css/main.073c9b0a.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

Done in 13.35s.