How to Install ReactJS on Ubuntu 20.04

How to Install ReactJS on Ubuntu 20.04

React is an open-source JavaScript library for creating web frontend and UI components. It is developed and maintained by the Facebook and a large community of developers. This is also useful for creating mobile applications.

In this tutorial you will learn to install and create React Application on a Ubuntu Linux system.

Prerequisites

You must have a running Ubuntu 20.04 system with console access.

Step 1 – Install Node.js

Node.js is required to create and run a React.js application. The following steps will install Node.js 14 on your Ubuntu system.

  1. Add the Node.js 14 (current stable version) PPA to your Ubuntu system
    curl -sL https://deb.nodesource.com/setup_14.x | sudo bash - 
    
  2. Next, run the following command to install the Node.js to your system:
    sudo apt install nodejs -y 
    
  3. Finally, check the current active version of Node.js
    node -v 
    
    v14.15.3
    
  4. Also install Yarn package manager on your system.
    npm install -g yarn 
    
    1. Step 2 – Create A New React Application

      You can create a React.js application using one of the following commands.

      yarn create react-app myreactapp 
      

      Except yarn, you can also use npx (npx create-react-app myreactapp) or npm (npm init react-app myreactapp) commands to create React.js application.

      On successful application creation, you will see a long result on screen. At the end, you will find the result like below with some useful commands.

      Create React.js application Command line

      Step 3 – Start React Application

      Once you have created your React application. This will create a folder in current directory with project name. Switch to that project and run yarn start to start application.

      cd myreactapp 
      yarn start 
      

      Output:

       
      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.
      

      The default react application start on port 3000. Access your React application using 3000 port with system IP address. For local machine use “localhost” followed by port.

      Installing React.js on Ubuntu 20.04

      Lets create an awesome user interface with React.

      Step 4 – Create React.js Production Build

      Once your application is ready for production deployment. Let’s create a production build of your React application. The Production build contains static files required to run application on production environment. You don’t need to install Node.js on production servers as they don’t contains any development files.

      Use yarn build or npm run build command to create production build of your React.js application.

      cd myreactapp 
      yarn build 
      

      On successful build, you will see the output like below:

      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.
      

      All the production files are created under the build directory. Upload all the content from build directory to production website document root.

      In case of any issue occurred on production server. First, you need to fix issue on local source code, then re-create the production build and re-deploy on server.

      Conclusion

      In this tutorial, you have learned, how to setup React.js development environment and access application in web browser. Additionally, you found instructions to create production build of your React application.

      The post How to Install ReactJS on Ubuntu 20.04 appeared first on TecAdmin.

General Articles Javascript React