Step-by-Step Guide: Installing React.js on Ubuntu

 

How to Install React.js on Ubuntu: Step-by-Step Guide for Developers

Introduction

React.js is a powerful JavaScript library used for building dynamic user interfaces. Whether you’re a beginner or an experienced developer, setting up React.js on Ubuntu is an essential step to start developing modern web applications. This guide will walk you through installing React.js on Ubuntu, configuring your development environment, and troubleshooting common issues.

Prerequisites

Before we begin, ensure you have the following:

• An Ubuntu operating system installed (Ubuntu 20.04 or later recommended)

• A stable internet connection

• Node.js and npm (Node Package Manager) installed

Check for Node.js and npm

To verify if Node.js and npm are installed, run the following commands:

node -v
npm -v

If not installed, follow the steps below.

Step 1: Install Node.js and npm on Ubuntu

To install Node.js and npm, you have two common methods:

Method 1: Using APT (Recommended for Beginners)

sudo apt update
sudo apt install nodejs npm -y

After installation, check the versions:

node -v
npm -v

Method 2: Using Node Version Manager (NVM) (Recommended for Flexibility)

Install NVM:

curl -fsSL https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc

Then, install Node.js:

nvm install --lts
nvm use --lts

Step 2: Create a New React.js Project

Navigate to the desired directory and create a new React.js project using create-react-app:

npx create-react-app my-react-app

Note: Replace my-react-app with your preferred project name.

Step 3: Navigate to the Project Directory

cd my-react-app

Step 4: Start the Development Server

npm start

This will launch the React development server, and you can access your app at:

http://localhost:3000

Step 5: Customize Your React App

Now that your React app is running, you can:

• Modify src/App.js to add custom components.

• Install additional packages using npm install <package-name>.

• Configure ESLint and Prettier for better code quality.

Troubleshooting Common Issues

1. Command 'npx' not found

Ensure npm is installed correctly:

npm install -g npx

2. Permission Errors with npm Install

Use the following command to avoid permission issues:

sudo chown -R $USER:$GROUP ~/.npm

3. Port 3000 Already in Use

Run:

kill -9 $(lsof -t -i:3000)

Or start React on a different port:

PORT=4000 npm start

Step 6: Deploy Your React App

Once your app is ready, deploy it to the web:

Deploying to GitHub Pages

npm install gh-pages --save-dev

Modify package.json:

"homepage": "https://yourusername.github.io/my-react-app",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Then deploy:

npm run deploy

Deploying to Vercel

npm install -g vercel
vercel

Follow the CLI instructions to deploy.

Conclusion

Installing React.js on Ubuntu is a straightforward process, and with the right setup, you can quickly start developing powerful web applications. Now that your React environment is ready, explore component-based development, state management with Redux, and backend integrations to build full-stack applications.