How to Install and Setup a React App on Ubuntu 18.04.1

Image is loading...

Install and Setup a React App on Ubuntu 18.04.1 LTS Bionic Beaver | React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base for the development of single-page or mobile applications. It is a powerful library to deal with complex projects in an easy manner. React Native, one of the most lovable hybrid mobile application development frameworks is also based on React. Here I am going to explain the installation and set up of a React App on Ubuntu platform.




1. INSTALL NODEJS

Since React is a JavaScript library, it requires to have Nodejs(A JavaScript runtime) installed. 10.x is the current latest version of Node. Installation of Node.js can be done using the below command.

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs

2. INSTALL NPM

NPM(Node Package Manager) is needed to create a react app and it will be installed with the Nodejs installation itself. However, you can install the latest version for npm using the below command.

sudo npm install [email protected] -g




3. INSTALL REACT

Now you can install React using npm. You don’t need to worry about the complexity of React installation. create-react-app npm package will take care of it.

npm install -g create-react-app

4. CREATE A NEW REACT PROJECT

After successful installation of React, you can create a new app using create-react-app. awesome-project is the name I choose for my project

create-react-app awesome-project
Note:-

You can also combine the steps 3 and 4 with a single command using npx ( package runner tool that comes with npm 5.2+).

npx create-react-app awesome-project

Here npx will install react and creates a new app named awesome-project.




5. CHOOSING THE CODE EDITOR

You can choose your own favorite code editor for editing your project. But in my case, I choose Visual studio Code(VS code). Using the below link, you can download VS code for Ubuntu and install.

https://code.visualstudio.com

6. DIRECTING TO YOUR PROJECT FOLDER AND EDITING

Open your new project on VS code using the below command.

cd awesome-project
code .




7. RUNNING YOUR APPLICATION

The app you created can be run using the command below.

npm start

This opens up a new tab on your browser with the URL below.

http://localhost:3000

Have a nice code!

You May Also Like

About the Author: Syamlal CM

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.