How to Install ReactJS on Ubuntu Linux

This brief tutorial shows students and new users how to install React or ReactJS on Ubuntu 20.04 | 18.04.

ReactJS is a popular and powerful JavaScript library that allows developers to create interactive and dynamic user interfaces. It is widely used by web developers to build web applications, including single-page applications.

Ubuntu Linux is a popular operating system developers use for building and deploying web applications. By installing ReactJS on Ubuntu Linux, developers can take advantage of the power and flexibility of ReactJS to create high-quality user interfaces for their web applications.

Additionally, Ubuntu Linux provides a stable and secure environment for developing and deploying web applications, making it an ideal platform for building ReactJS applications.

To get started with installing React on Ubuntu, follow the steps below:

Install Node.js

Since React is a JavaScript library, you will want to install Node.js. Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine and is required to run React.

For this post, we will install Node.js version 14 and npm. You can install other versions that will suit your environment.

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

After running the commands above, Node.js and npm should be installed and ready to use. To verify that it’s installed, run the commands below:

node -v

That should display the Node.js version.

v14.16.0

When that is installed, go ahead and install the Yarn package manager. The commands below can install it.

sudo npm install -g yarn

Create React App

At this point, you should be able to create apps in React. Run the commands below to create your first React app called myfirstproject.

yarn create react-app myfirstproject

You can also use the commands below to create a project in React.

npx create-react-app myfirstproject
npm init react-app myfirstproject

After a successful build, you should get a similar message as below:

Success! Created myfirstproject at /home/richard/myfirstproject
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn 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 myfirstproject
  yarn start

Happy hacking!
Done in 94.57s.

Next, change into the project folder and start it.

cd myfirstproject
yarn start

After the app is started, you should get a message below:

Compiled successfully!

You can now view myfirstproject in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.2.10:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

A page should also open up to the app index.

That should start up the project so you can start working on it. When you’re done and wish to deploy to projection, use the commands below:

yarn build

All your project files should be built and uploaded to the directory index.

That should do it!

Conclusion:

This post showed you how to install ReactJs on Ubuntu 20.04 | 18.04. If you find any error above, please use the comment form below to report.