How to Install ReactJS on Ubuntu 20 04

Linux

Install ReactJS on ubuntu 20.04

React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

This article help you on how to install and create React Application on Ubuntu 20.04 system.

Step 1: Install nodejs

Node.js is required to create and run a React.js application. Node.js is an open-source server environment that uses JavaScript on the server.so we will add Node.js PPA to your system.

curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -

Also Read -> How to Install Apache Maven on Ubuntu 20 04

Next, install nodejs using apt command.

sudo apt install nodejs

once it is installed, you can check nodejs version.

ubuntu@ubuntu20:~$ node -v
v14.16.1

you can also verify the NPM version by running the following command.

ubuntu@ubuntu20:~$ npm -v
6.14.12

Also Read -> How to Install CouchDB on Ubuntu 20 04

Step 2: Install Reactjs

you need to install the create-react-app tool to create a new project in React.

It is a command-line utility used to create a React Application.you can install it using the NPM.

npm install -g create-react-app

sample output:

/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ create-react-app@4.0.3
added 67 packages from 25 contributors in 27.717s

Also Read -> How to Install Apache Tomcat 9 on Ubuntu 20 04

Step 3: create new project

Next, you can create new project with the following command.

create-react-app myreactapp

sample output:

Success! Created myreactapp at /root/myreactapp
Inside that directory, you can run several commands:
    npm start
    Starts the development server.
    npm run build
    Bundles the app into static files for production.
    npm test
    Starts the test runner.
    npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
  cd myreactapp
  npm start
Happy hacking!

Also Read -> How to Install Atom Text Editor on Ubuntu 20 04

Next, change the directory to myreactapp and start the application like below.

cd myreactapp
npm start

Compiled successfully!
You can now view myreactapp in the browser.
  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.123:3000
Note that the development build is not optimized.
To create a production build, use npm run build.