ReactJS is an open-source JavaScript library focused on visualization. This technology allows us to develop user interfaces simply, this is possible through interactive and reusable components. Needless to say, it is widely used around the world, and more and more are being added every day.
One of the reasons is that React provides several clear advantages over the classic way of making a web, its ease of development coupled with performance, flexibility, and code organization makes it one of the best options. For example, React avoids a lot of spaghetti code by using several libraries such as JQuery.
Therefore, React represents a solid base on which you can build almost anything with Javascript. It also makes development much easier, as it offers us many ready-made things, in which we don’t need to invest time and effort.
So, it is possible to install it on Ubuntu 20.04 with a few steps and get started.
Install ReactJS on Ubuntu 20.04
Connect to your server or open a terminal session from the main menu. First, update the Ubuntu and then install nodejs. Upgrade the npm tool and install create-react-app to complete the installation of Reactjs on Ubuntu 20.04.
Below are the installation steps in details.
1. Update Ubuntu
Make sure the system is fully up to date using the command given below.
sudo apt update
sudo apt upgrade
2. Install NodeJS
The installation of ReactJS will be done via NodeJS which is in the official Ubuntu repositories, but the version available is quite outdated. So we will install the latest stable through the NodeJS repository.
So we need to install the curl and gnupg2 packages to can add the NodeJS repository.
sudo apt-get install curl gnupg2
Now download and run the script that allows us to add the NodeJS repository.
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
If everything went well, you will get an output screen like this:
## Run `sudo apt-get install -y nodejs` to install Node.js 14.x and npm
## You may also need development tools to build native addons:
sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] https://dl.yarnpkg.com/debian stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn
Next, install NodeJS with the following command:
sudo apt install nodejs
3. Upgrade NPM
Along with NodeJS, you install which is a package manager for NodeJS. It is a good idea to have it updated so that there are no problems with the installation.
sudo npm install npm@latest -g
Output:
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js /usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js + [email protected] added 58 packages from 23 contributors, removed 241 packages and updated 194 packages in 5.207s
Now, you can check the version of NodeJS that has been installed.
node -v v14.16.1
4. Install create-react-app
With NodeJS installed, we can then install ReactJS by running the following command:
sudo npm install -g create-react-app
At the end of the process, you will see an output screen similar to this:
added 67 packages, and audited 68 packages in 3s 4 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
5. Create the application in React
And at last, you will be able to create the application in React.
create-react-app [project_name]
Success! Created example at /home/user/example
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 example
npm start
Happy hacking!
Assign the name you want to your project and it will start creating it. As a result, a new folder with the name of your project will be created.
cd [project_name]
And you can start the local server by running
npm start
Sample Output
Compiled successfully! You can now view example in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
To exit press CTRL + C and if you are using React on a virtual machine then you have to make it accessible from any host.
npm start -- --port=3000
6. Verify ReactJS
Whatever the case, open a web browser and you can verify that ReactJS is ready by going to the address http://host:3000 remember this can be the IP address of your computer, or if you installed it on your computer then it is http://localhost:3000.
This indicates that React has been installed properly.
Conclusion
ReactJS is a technology that helps a lot in creating graphical interfaces for the web. Being more and more used it has become one of the most preferred technologies by developers in the world. And as you may have noticed, it is very easy to install it on a computer running Ubuntu 20.04.
So, share this post and help us grow.