Logo
  • Ubuntu
  • CentOS
  • Debian
  • Fedora
  • RedHat

How to Install ReactJS on Ubuntu - DesignLinux

Feb 02 2021
designlinux 0 Comments

Developed by Facebook in 2011, React (also referred to as ReactJS) is a Javascript library used for creating fast and interactive user interfaces. At the time of writing, it’s the most popular Javascript library for developing user interfaces. React trounces its counterparts – Angular and Vue JS in terms of functionality and popularity.

Its popularity stems from its flexibility and simplicity and this makes it the first choice in the development of mobile apps and web applications. More than 90,000 sites use React including tech giants such as Facebook, Netflix, Instagram, Airbnb, and Twitter to list a few.

In this article, you will learn how to install ReactJS on Ubuntu 20.04 and Ubuntu 18.04.

Step 1: Installing NPM in Ubuntu

We begin the installation of React JS by installing npm – short for the node package manager, is two things. Firstly, it is a command-line tool that is used for interacting with Javascript packages, which allows users to install, update, and manage Javascript tools and libraries.

Secondly, npm is an online open-source software registry that hosts over 800,000 Node.JS packages. Npm is free and you can easily download software applications that are publicly available.

To install npm on Ubuntu Linux, login into your server as a sudo user and invoke the command below:

$ sudo apt install npm

Once the installation is complete, you can verify the version of npm installed using the command:

$ npm --version

6.14.4  [Output]

The latest version at the time of writing this is v6.14.4 as captured in the output.

The installation of npm also installs node.js and you can confirm the version of node installed using the command:

$ node --version

v10.16.0  [Output]

Step 2: Installing create-react-app Utility

create-react-app is a utility that enables you to set up all the tools required to create a React Application. It saves you a great deal of time and energy setting everything from scratch and gives you the head start needed.

To install the tool, run the following npm command:

$ sudo npm -g install create-react-app
Install Create React App Tool
Install Create React App Tool

Once installed, you can confirm the version of installed by running:

$ create-react-app --version

4.0.1  [Output]

Step 3: Create & Launch Your First React Application

Creating a React application is quite simple & straightforward. We are going to create a react app called tecmint-app as follows.

$ create-react-app tecmint-app

This takes roughly 5 minutes to install all the packages, libraries, and tools needed by the application. Some patience will come in handy.

Create React App
Create React App

If the creation of the application was successful, you will get the notification below giving the basic commands that you can run to start managing the application.

Summary of React App
Summary of React App

To run the application, navigate into the app directory

$ cd tecmint-app

Then run the command:

$ npm start

You will end up getting the output below showing you how to access the application on the browser.

Run React App
Run React App

Fire up your browser and browse your server’s IP address

http://server-ip:3000
Access React App on Browser
Access React App on Browser

This shows that the default React app is up and running. In this guide, we have successfully installed React JS and created an application in React.

Related

Tags: ReactJS, Ubuntu Tips

5 Most Notable Open Source Centralized Log Management Tools

Prev Post

How to Install Webmin System Administration Tool on RHEL 8

Next Post
Archives
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
Categories
  • AlmaLinux
  • Android
  • Ansible
  • Apache
  • Arch Linux
  • AWS
  • Backups
  • Bash Shell
  • Bodhi Linux
  • CentOS
  • CentOS Stream
  • Chef
  • Cloud Software
  • CMS
  • Commandline Tools
  • Control Panels
  • CouchDB
  • Data Recovery Tools
  • Databases
  • Debian
  • Deepin Linux
  • Desktops
  • Development Tools
  • Docker
  • Download Managers
  • Drupal
  • Editors
  • Elementary OS
  • Encryption Tools
  • Fedora
  • Firewalls
  • FreeBSD
  • FTP
  • GIMP
  • Git
  • Hadoop
  • HAProxy
  • Java
  • Jenkins
  • Joomla
  • Kali Linux
  • KDE
  • Kubernetes
  • KVM
  • Laravel
  • Let's Encrypt
  • LFCA
  • Linux Certifications
  • Linux Commands
  • Linux Desktop
  • Linux Distros
  • Linux IDE
  • Linux Mint
  • Linux Talks
  • Lubuntu
  • LXC
  • Mail Server
  • Manjaro
  • MariaDB
  • MongoDB
  • Monitoring Tools
  • MySQL
  • Network
  • Networking Commands
  • NFS
  • Nginx
  • Nodejs
  • NTP
  • Open Source
  • OpenSUSE
  • Oracle Linux
  • Package Managers
  • Pentoo
  • PHP
  • Podman
  • Postfix Mail Server
  • PostgreSQL
  • Python
  • Questions
  • RedHat
  • Redis Server
  • Rocky Linux
  • Security
  • Shell Scripting
  • SQLite
  • SSH
  • Storage
  • Suse
  • Terminals
  • Text Editors
  • Top Tools
  • Torrent Clients
  • Tutorial
  • Ubuntu
  • Udemy Courses
  • Uncategorized
  • VirtualBox
  • Virtualization
  • VMware
  • VPN
  • VSCode Editor
  • Web Browsers
  • Web Design
  • Web Hosting
  • Web Servers
  • Webmin
  • Windows
  • Windows Subsystem
  • WordPress
  • Zabbix
  • Zentyal
  • Zorin OS
Visits
  • 0
  • 710
  • 575,200

DesignLinux.com © All rights reserved

Go to mobile version