It is developed and maintained by the Facebook and a large community of developers. This is also useful for creating mobile applications.
In this tutorial you will learn to install and create ReactJS Application on a Ubuntu 22.04 OS.
Step 1: Update Operating System
Update your Ubuntu 22.04 operating system to make sure all existing packages are up to date:
$ sudo apt update && sudo apt upgrade -y
Step 2: Install Node.js
Node.js is required to create and run a ReactJS application.
The Node.js version included in the default Ubuntu 22.04 repositories is
v12.22.9 which is an older TLS version.
We’ll install Node.js version
18.x (current stable version) on our Ubuntu OS.
Run the following command to download and execute the NodeSource installation script:
$ curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -
Next, run the following command to install the Node.js and npm to your system:
$ sudo apt install nodejs
The nodejs package includes both the
Once done, verify the installation by running:
Step 3: Install ReactJS package
After installing the node and npm, you will need to install
create-react-app in your system. It is a command-line utility used to create a ReactJS Application.
Run the following npm command to install the create-react-app utility:
$ sudo npm install -g create-react-app
Verify the installed version of
create-react-app with the following command:
You should see the following output:
Step 4: Create A New ReactJS Application
You can create a ReactJS application with the following command:
$ sudo create-react-app myreactapp
On successful application creation, you should see the following output:
Success! Created myreactapp at /home/react/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!
Step 5: Start ReactJS Application
Once you have created your application switch to that project and run
npm start to start application.
Once the application has started successfully, you should get the following output:
Compiled successfully! You can now view myreactapp in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.100:3000 Note that the development build is not optimized. To create a production build, use npm run build.
The default ReactJS application start on port
Step 6: Create a Systemd service
Next, it is a good idea to create a systemd service file to handle the ReactJS service. You can create it with the following command:
$ sudo nano /lib/systemd/system/react.service
Add the following lines:
[Unit] After=network.target [Service] Type=simple User=root WorkingDirectory=/home/react/myreactapp ExecStart=/usr/bin/npm start Restart=on-failure [Install] WantedBy=multi-user.target
Save and close the file and then reload the systemd daemon with the following command:
$ sudo systemctl daemon-reload
Then start the ReactJS service and activate it at system startup with the following command:
$ sudo systemctl start react $ sudo systemctl enable react
Then check the status of the ReactJS app with the following command:
$sudo systemctl status react
You should get the following output:
● react.service Loaded: loaded (/lib/systemd/system/react.service; enabled; vendor preset: enabled) Active: active (running) Main PID: 2101 (npm start) Tasks: 30 (limit: 2200) Memory: 140.0M CPU: 2.937s CGroup: /system.slice/react.service ├─2101 npm ├─2112 sh -c "react-scripts start" ├─2113 node /home/react/myreactapp/node_modules/.bin/react-scripts start └─2120 /usr/bin/node /home/react/myreactapp/node_modules/react-scripts/scripts/start.js
Step 7: Accessing ReactJS Web Interface
Once successfully installed, open your web browser using the URL
http://your-ip-address:3000. You should see the React default page:
In this tutorial, you have learned, how to install ReactJS on your Ubuntu 22.04 system. You can now start developing your ReactJS application.
For additional information, you can check the official ReactJS website.