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 
   

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.



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.



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.