如何在Ubuntu 20.04上安装ReactJS

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

在本教程中,您将学习在Ubuntu Linux系统上安装和创建React Application。

先决条件

您必须具有正在运行的具有控制台访问权限的Ubuntu 20.04系统。

步骤1 –安装Node.js

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

  1. 将Node.js 14(当前稳定版本)PPA添加到您的Ubuntu系统
    curl -sL https://deb.nodesource.com/setup_14.x | sudo bash - 
    
  2. 接下来,运行以下命令将Node.js安装到您的系统中:
    sudo apt install nodejs -y 
    
  3. 最后,检查Node.js的当前活动版本
    node -v 
    
    v14.15.3
    
  4. 同时安装 Yarn 系统上的软件包管理器。
    npm install -g yarn 
    
    1. 第2步–创建一个新的React应用程序

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

      yarn create react-app myreactapp 
      

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

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

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

      在Ubuntu 20.04上安装React.js

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

      第4步–创建React.js生产版本

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

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

      cd myreactapp 
      yarn build 
      

      成功构建后,您将看到如下输出:

      yarn run v1.22.10
      $ react-scripts build
      Creating an optimized production build...
      Compiled successfully.
      
      File sizes after gzip:
      
        41.33 KB  build/static/js/2.fefeb60f.chunk.js
        1.59 KB   build/static/js/3.63acee40.chunk.js
        1.17 KB   build/static/js/runtime-main.3da20c7a.js
        591 B     build/static/js/main.3ee865b4.chunk.js
        531 B     build/static/css/main.8c8b27cf.chunk.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 26.59s.
      

      所有生产文件都在 建造 目录。 将所有内容从构建目录上载到生产网站文档根目录。

      如果生产服务器上发生任何问题。 首先,您需要解决本地源代码上的问题,然后重新创建生产版本并在服务器上重新部署。

      结论

      在本教程中,您学习了如何设置React.js开发环境以及如何在Web浏览器中访问应用程序。 此外,您还找到了创建React应用程序生产版本的说明。

Sidebar