Install React JS

Introduction

React JS is one of the most popular JavaScript libraries used for building modern web applications and user interfaces. Installing React JS is simple, but beginners often get confused about tools like Node.js, npm, Vite, and Create React App.

What is React JS Installation?

Installing React JS means setting up the required tools and packages needed to build and run React applications on your computer.

React itself is a JavaScript library, but it requires additional tools such as:

• Node.js
• npm (Node Package Manager)
• Code Editor
• React project setup tool

These tools help developers create, run, and manage React applications efficiently.

Requirements Before Installing React JS

Before installing React JS, you should have:

1. Basic JavaScript Knowledge

Understanding:

• Variables
• Functions
• Arrays
• Objects
• ES6 concepts

is helpful before learning React.

2. Node.js Installed

React requires Node.js because npm comes with it.

Node.js helps manage packages and run development tools.

3. Code Editor

Popular code editors:

• Visual Studio Code
• Sublime Text
• WebStorm

VS Code is most commonly used for React development.

Install Reactjs

There are many steps to install Reactjs.

Step 1: Install Node.js

React requires Node.js to manage dependencies and run the development server.

How to Download Node.js

Visit the official Node.js website:

Node.js Official Website

Download the:

LTS (Recommended) version

Install it like normal software.

Verify Node.js Installation

After installation, open:

• Command Prompt
• Terminal

Run:

node -v

Output Example:

Verify npm Installation

Run:

npm -v

Output Example

10.5.0

What is npm?

npm stands for Node Package Manager.

It is used to:

• Install libraries
• Manage dependencies
• Update packages
• Create React projects

Step 2: Create React App

There are multiple ways to create a React application.

Popular methods:

1. Create React App (CRA)
2. Vite

Modern React developers mostly prefer Vite because it is faster.

Method 1: Install React Using Vite (Recommended)

Vite is a modern build tool for faster React development.

Command to Create React App with Vite

Run:

npm create vite@latest

Setup Process

After running the command:

1. Enter project name
2. Select framework → React
3. Select variant → JavaScript

Navigate to Project Folder

cd my-react-app

Install Dependencies

npm install

Start React Development Server

npm run dev

Output Example

Method 2: Install React Using Create React App

Create React App is an older but beginner-friendly method.

Command

npx create-react-app my-app

Move into Project Folder

cd my-app

Start React App

npm start

Output:

The app opens in the browser automatically.

Understanding React Project Structure

After installation, React creates several folders and files.

Important React Folders

Example of Simple React App

Open App.jsx and write:

function App() {
 return (
    <h1>Hello React JS</h1>
 );
}
export default App;

Output:

How React Application Works

When you start the React server:

1. React compiles code
2. Browser loads the application
3. React updates UI dynamically
4. Virtual DOM improves performance

Real-Life Example of React Installation

Suppose a company wants to build:

• E-commerce website
• Social media platform
• Dashboard application

Developers first install React to set up the project environment before creating components and features.

Advantages of Installing React JS

1. Fast Development

React setup tools provide:

• Hot Reloading
• Fast Refresh
• Development server

2. Modern Tooling

React setup includes:

• Build optimization
• Dependency management
• Modern JavaScript support

3. Organized Project Structure

React automatically creates a scalable project structure.

4. Easy Package Management

npm allows easy installation of libraries.

Example:

npm install axios

Difference Between npm and npx

Common Mistakes While Installing React JS

1. Node.js Not Installed

React commands will not work without Node.js.

Wrong:

npm start

Error:

2. Wrong Folder Navigation

Developers sometimes run commands outside the project folder.

Correct:

cd my-react-app

3. Forgetting npm install

Without installing dependencies, the app will not run.

Correct:

npm install

4. Using Old Node.js Version

Old Node.js versions may cause compatibility issues.

Always use the latest LTS version.

5. Typing Incorrect Commands

Wrong:

npm run start

Correct in Vite:

npm run dev

React Installation Using CDN

React can also be used without installation using CDN links.

Example:

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

However, this method is not recommended for large applications.

Best Practices After Installing React

• Organize folders properly
• Use functional components
• Install only necessary packages
• Keep dependencies updated
• Use ESLint and formatting tools
• Use Vite for modern projects

Why Developers Prefer Vite Over Create React App

How to install ReactJS – Interview Questions

How to install ReactJS – Objective Questions (MCQs)

Conclusion

Installing React JS is the first step toward building modern web applications. By setting up Node.js, npm, and tools like Vite or Create React App, developers can create fast and scalable React projects efficiently.

Today, Vite is the recommended method because of its speed and modern tooling. Understanding the React installation process helps beginners avoid setup issues and build applications more confidently.

Continue Learning React