How to Install ReactJS on Ubuntu

ReactJS is a powerful JavaScript library for building interactive user interfaces. Its modular design and reusable components make it a popular choice for developers. If you’re on Ubuntu and looking to set up ReactJS, this guide will walk you through the installation process step-by-step.

Prerequisites

Before you begin, ensure that your system meets the following requirements:

Ubuntu Installed: The steps outlined here apply to Ubuntu 20.04 or later.
Node.js Installed: ReactJS requires Node.js, as it provides the runtime for building and running React applications.
NPM or Yarn: These package managers are needed for managing React dependencies.

Step 1: Update Your System

Start by updating your system’s package list to ensure all software is up-to-date:

sudo apt update && sudo apt upgrade -y

Step 2: Install Node.js and npm

Node.js is essential for React development. Install it using the following commands:

Add the NodeSource repository:
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
Install Node.js:
sudo apt install -y nodejs

Verify installation:
node -v

npm -v

If both Node.js and npm versions are displayed, the installation was successful.

Step 3: Install Yarn (Optional)

Yarn is an alternative package manager to npm. To install it:

Add the Yarn repository:
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
Install Yarn:
sudo apt update && sudo apt install -y yarn
Verify installation:
yarn -v

Step 4: Create a React Application

React offers a tool called Create React App, which simplifies the process of setting up a new application.

Use npx (comes with npm) to create a new React app:
npx create-react-app my-app
Replace my-app with your desired project name.
Navigate to your project directory:
cd my-app
Start the development server:
npm start
Open your web browser and visit http://localhost:3000. You should see the default React app running.

Step 5: Customize Your React Project

With React installed, you can start building your application by editing the src/App.js file. Add your components, style your application, and integrate APIs to create a dynamic user experience.

Step 6: Deploying ReactJS on a Production Server

While this guide focuses on setting up ReactJS on Ubuntu for development, deploying ReactJS in a production environment typically involves additional steps such as:

Building for Production: Use the npm run build command to optimize your app for production.
Serving the App: Deploy your app using a web server like Nginx or Apache.
Securing Your Server: Implement HTTPS and other security measures to protect your application.