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
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 startNext 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
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.
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.
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.
