February 9, 2023

How To Install React.js On Ubuntu 20.04

Abhishek Thakur


React.js is a free and open source front-end JavaScript library. Which is used used for building user interfaces based on UI components. Currently it is maintained by Meta(Facebook) and a community of individual developers. React.js flexibility and simplicity, makes it the best choice for creating mobile and web applications. Over 90,000 of websites uses React.js, including tech giants like Facebook, Netflix, Instagram, Airbnb, Twitter. In this guide we will explain how to install React.js on Ubuntu 20.04 and deploy our first React app.

Requirement

  • 99RDP VPS/Dedicated Server(Running Ubuntu 20.04)
  • Access to terminal

Steps To Install Required Packages For React.js On Ubuntu 20.04

At first let’s update the current repo and package list of the system by running the given command

# apt upgrade && apt update -y

Once the update is finished we need to install npm(node package manager) and Node.js which is the default package manager for the JavaScript runtime environment.  To do so head to the given github link, copy the command for Ubuntu and run it in the terminal.

# curl -fsSL https://deb.nodesource.com/setup_19.x | bash – &&\ apt-get install -y nodejs

Next we can verify the installation is complete by checking the node and npm version.

# node –version

# npm –version

How To Install React.js On Ubuntu 20.04

Next we are going to install the create-react-app module. create-react-app is a comfortable environment for learning React, and the best way to start creating a new single-page application in React. This module installs  development environment to use the latest JavaScript features, providing a smoother developer experience, and optimize your apps for production. To do so enter the given command in terminal.

# npm -g install create-react-app

Next verify the installation using the given command which will return the output as the installed version. For us the installed version is 5.0.1.

# create-react-app –version

Steps To Create React.js App

After all the installation is complete we can proceed toward our first React.js app. For this guide we are going to create an app named myapp. To do so run the given command in terminal.

# create-react-app myapp

This command will start installing the React.js library, with React DOM and other required packages. The output will be similar to this.

root@ubuntu20:~# create-react-app myapp

Creating a new React app in /root/myapp.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1416 packages in 1m

231 packages are looking for funding
run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
at checkExecSyncError (node:child_process:885:11)
at execSync (node:child_process:957:15)
at tryGitInit (/root/myapp/node_modules/react-scripts/scripts/init.js:46:5)
at module.exports (/root/myapp/node_modules/react-scripts/scripts/init.js:27 6:7)
at [eval]:3:14
at Script.runInThisContext (node:vm:128:12)
at Object.runInThisContext (node:vm:306:38)
at node:internal/process/execution:83:21
at [eval]-wrapper:6:24 {
status: 127,
signal: null,
output: [ null, null, null ],
pid: 31871,
stdout: null,
stderr: null
}

Installing template dependencies using npm...

added 55 packages in 10s

231 packages are looking for funding
run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1471 packages in 6s

231 packages are looking for funding
run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

Success! Created myapp at /root/myapp
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 myapp
npm start

Next head to the myapp directory using cd command. You can also check the files that are build in the creation of myapp using the dir command.

# cd myapp

Steps To Create React.js App

 

Next, to run the myapp we are going to use the given, command

# npm start

The given command will compile the myapp and publish it on the local server as a development build.

React.js App server

Now you can head to the given link http://localhost:3000(replacing localhost with your server IP). Which will show you the output for myapp. Next you can make changes to myapp source code by modifying the src/App.js file in the myapp directory.

First React APP

Conclusion

In this guide we learned how to install React.js and it required dependency, to setup a React.js development environment. We also learned how to deploy our first react app in a development environment. Thank You for your time.


Buy React.js Configured Devlopment Enviroment @ 89/m Only.

Popular Blog Posts