React Installation Guide: Step-by-Step Tutorial for Beginners

We will learn how to install React, set up your development environment, create your first React app, and understand the essential tools required for React development.

Prerequisites for Installing React

Before installing React, make sure your system has the following:

1. Basic Knowledge of JavaScript

You should understand:

  1. Variables
  2. Functions
  3. Arrays
  4. ES6 syntax
  5. Arrow functions

2. Install Node.js

React requires Node.js and npm (Node Package Manager).

You can download Node.js from: Node.js Official Website

Installing Node.js and npm

Step 1: Download Node.js

Visit the official Node.js website and download the LTS (Long Term Support) version.

Step 2: Install Node.js

Run the installer and follow the installation instructions.

Step 3: Verify Installation

Open your terminal or command prompt and run:

node -v

You should see the installed Node.js version.

Now check npm:

npm -v

If both commands work, your environment is ready.

Best Ways to Install React

There are two common methods to install React:

  1. Vite (Recommended)
  2. Create React App (CRA)

Modern developers prefer Vite because it is faster and more optimized.

Install React Using Vite (Recommended)

Step 1: Create a React Project

Open your terminal and run:

npm create vite@latest my-react-app

Step 2: Select Framework

Choose

  1. Framework: React
  2. Variant: JavaScript or TypeScript

Step 3: Navigate to Project Folder

cd my-react-app

Step 4: Install Dependencies

npm install

Step 5: Start Development Server

npm run dev

You will see a local development URL such as:

http://localhost:5173

Open it in your browser to see your React app running.

Install React Using Create React App

Although Vite is recommended, Create React App is still widely used.

Step 1: Create App

npx create-react-app my-app

Step 2: Move Into Project Folder

cd my-app

Step 3: Start Application

npm start

Your React app will open at:

http://localhost:3000

Understanding React Project Structure

After installation, your React project contains several important folders and files.

Important Folders

  1. src - Contains application source code.
  2. public - Contains static files.
  3. node_modules - Stores installed packages and dependencies.

Important Files

  1. package.json - Manages project dependencies and scripts.
  2. App.jsx - Main React component.
  3. main.jsx - Entry point of the React application.

Running Your React Application

To run your React app

npm run dev

or

npm start

depending on your setup.

Installing React Extensions and Tools

To improve development productivity, install these tools:

1. Visual Studio Code

Popular code editor for React development. Visual Studio Code

2. React Developer Tools

Browser extension for debugging React applications.

Chrome Extension - React Developer Tools Chrome Extension

3. ESLint

Improves code quality and detects errors.

Install ESLint

npm install eslint --save-dev

Conclusion

Installing React is simple once you have Node.js and npm installed. Modern tools like Vite make React development faster, lighter, and more efficient than ever before.

Whether you are a beginner or an experienced developer, React provides an excellent ecosystem for building powerful web applications.

By following this React installation tutorial, you can quickly set up your development environment and begin building modern interactive user interfaces today.

Next Article ❯

Related Posts