How to Install React on Ubuntu

React is an open-source, front-end library to develop web applications, it is JavaScript-based and led by the Facebook Team and by a community of individuals and corporations.

In this document, we will cover installation procedure of angular on Ubuntu 16.04 operating system 

Prerequisites

This guide assumes that you are using Ubuntu16.04. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.

Audience:

This document can be referred by anyone who wants to install latest nodejs on Ubuntu 16.04

System requirements

• Ubuntu 16.04
• 4 GB RAM
• 10 GB free space

Installation Procedure

To install react tooling we need nodejs and npm. First let’s understand what these are and why we need them.

What is Nodejs and Why you need for react development?

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.

What is npm and Why you need for react development?

Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install and the libraries and other tools to support react development.

Let’s start with nodejs installation post completion on nodejs we will install create-react-app command line and will create a new react project

1.Install nodejs - Setup PPA

• To get you a more recent version of Node.js installed on ubuntu is to add a PPA (personal package archive) maintained by NodeSource. Open terminal and run below commands

cd ~
curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh

• Run the downloaded script using below command

sudo bash nodesource_setup.sh

The PPA will be added to your configuration and your local package cache will be updated automatically

2.Install 

• Run sudo apt-get install nodejs -y to install 

3.Testing nodejs Installation

• On terminal run below command to test node

node -v

You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is >v10.0.0)

• On terminal run below command to test npm=

npm -v

You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is  >5 )

Install create react app

Setting up productive react development environment would need to configure tools like babel, webpack which are complex to configure for a newbie in react world. There are several tools that help to alleviate this problem out of which create react app is the easiest and finest tool with production grade configurations pre-built. The goodness of this tool is, it does not lock in and allows you to alter the configuration by ejecting the create react app.  

We will install create-react-app using npm. On terminal run the install command shown below

npm install -g create-react-app

On successful installation you should see the output like above (note your angular/cli version may be different by the time you run this install command)

Test create-react-app

To test the create-react-app, run below command

create-react-app --version

Congratulations, you have successfully installed create-react-app

Running the first Hello World application

   1. Create react application using create-react-app command line using below command

create-react-app hello-react

This command creates a new folder named hello-react and creates all the files and setups the necessary libraries within this folder and makes the react project ready to be executed without any additional configuration

   2. Once project is created change into project directory and run application using npm start command as shown below

npm start command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at http://www.localhost3000.org/ by default.

You will see a beautiful window like below one which show you the react icon and some text.

As discussed, create react app comes with great tooling, one of the productive features is webpack hot reloading, which deploys the change on live and saves developer lot of time to redeploy and reload work.

Let’s open the project and make some changes to see the experience of this great feature. We will go through the project structure to understand the importance of the file create by create react app.

Open the project which was created in previous step in any JS editor, here you see the project is open in vscode editor. On to the left in explorer section you see file explorer which shows you several folders and files which were created by create-react-app. Let’s walkthrough them

node_modules: This folder is managed by package manager (npm) and contains all the project library dependencies. Files in this folder should not be modified as the changes made are not guaranteed to be safe as updating/installing any other library can overwrite the changes made.

public: This folder contains the assets that should be served publicly without any restrictions and contains files like index.html, favicon, manifest.json

src: This is the folder that contains all your development effort. As a react developer you spent lot of time in this folder creating components and other sources of code.

Now let’s get into the files inside this folder. TO start with index.js is the starting file of this project where the execution on your code starts, this file injects App component which is exported from App.js. All the output you see in the browser is resultant on this file, lets make some change to this file, we will edit the existing code with new changes as shown in below screenshot.

Save the file and switch back to browser to see the changes deployed and loaded as discussed, this one of the features of create-react-app to tooling setup.  

With new changes your browser window should look like below

Uninstall create-react-app

You can uninstall any library or tool setup via npm install can be uninstalled using npm uninstall. Perform below step to remove create-react-app installed previously

• On command prompt run npm uninstall -g @angular/cli

Uninstall nodejs

You can uninstall any software setup via apt install can be uninstalled using apt remove. Perform below step to remove nodejs installed previously

• On terminal run below command to uninstall node

sudo apt remove nodejs