How to Install ReactJS on Ubuntu

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

React is an open source JavaScript library that makes it painless to create interactive UIs, including simple design views for each state in your application.

For developers looking for an open source JavaScript library to build cool user interface, React should be a great place to start.

Because of its flexibility, developers can use React simple component logic to bring HTML directly into JavaScript instead of templates, and can also easily pass rich data through your app and keep state out of the DOM.

React wad developed and is managed by Facebook and open source developers.

To get started with install 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 a requirement for running React.

For this post, we’re going to be installing Node.js version 14 and npm. You can install other versions that will suite your environment.

sudo apt install curl
curl -sL  | 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 Node.js version.

v14.16.0

When that install go ahead and install Yarn package manager. That 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 either of the commands below to create project in React.

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

After a successful build, you should get 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:            
  On Your Network:  

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