How to Install ReactJS on Ubuntu 20.04

React. js is an open-source JavaScript library that is used for creating web frontend and UI components specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. It is developed and maintained by Facebook and a large community of developers.

History of React JS

React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called “FaxJS”. It was first deployed on Facebook’s News Feed in 2011 and later on Instagram in 2012. And finally, it was open-sourced at JS Conference US in May 2013. And as a result, the Reacts first release was published in 2013.

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

View on Youtube:

Here are the major steps that you have to follow:

– Install Node.js
– Install Yarn package manager on your system
– Create A New React Application
– Start React Application
– Create React.js Production Build

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. or click here to choose your desired version.

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 -y nodejs
```
3. Check the currently active version of Node.js
```
node -v 
```
4. Also, you can check npm version using.
```
npm -v
```

Step 2–Install Yarn package manager on your system

Also install Yarn package manager on your system.

npm install -g yarn

Step 3 – Create A New React Application

And now we are move for next step to install yarn package manager, although you could use npm or npx command to install the React JS. But I am gonna use yarn to do that. And obviously, there are some reasons behind that. The key difference between npm and yarn is that the yarn is easy to manage and it can install packages simultaneously which tremendously reduces your install time. It gives Clean output compare to npm. So, there are lots of advantages using yarn.

yarn create react-app myreactapp

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

Step 4 – Start React Application

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

cd myreactapp  yarn start

The default reacts application starts on port 3000. Access your React application using 3000 port with the system IP address. For local machines use “localhost” followed by port.

Let’s create an awesome user interface with React.

Step 5 – 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 the application in the production environment. You don’t need to install Node.js on production servers as they don’t contain any development files.

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

cd myreactapp  yarn build

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

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

Conclusion

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