How to Install and Start Using React.js

React.js one of the most popular JavaScript libraries for building user interfaces. Developed by Facebook, it allows developers to create fast, interactive, and reusable UI components for web applications.
This guide walks you through setting up a React development environment and creating your first React app.

Introduction

React simplifies building dynamic web interfaces using a component-based architecture. Each part of your UI — such as buttons, forms, or navigation bars — can be created as a self-contained component that’s easy to reuse and maintain.

In this tutorial (react.js beginner’s guide) , you’ll learn how to:

1. Install Node.js and npm (required for React)
2. Create a new React project using Create React App
3. Run the development server
4. Understand the project structure
5. Modify your first React component

Prerequisites

Before starting, make sure you have:

• Basic knowledge of HTML, CSS, and JavaScript
• A code editor such as Visual Studio Code
• Node.js and npm installed on your system

You can check if Node.js and npm are already installed. You can learn how to install Node.js on your pc from this link :

node -v
npm -v

node -v
npm -v

If not installed, download them from the official Node.js website.

Step 1 — Install Node.js and npm

1. Visit https://nodejs.org/
2. Download the LTS (Long Term Support) version.
3. Install it following the setup instructions.
4. Verify installation:

node -v
npm -v

node -v
npm -v

Step 2 — Create a New React App

React provides a simple way to start a project using the official Create React App tool.

Run the following command in your terminal:

npx create-react-app my-react-app

npx create-react-app my-react-app

Explanation:

• npx runs commands from npm without global installation.
• create-react-app sets up a ready-to-use React project.
• my-react-app is your project name — you can change it to anything.

This will install all necessary dependencies and create the basic folder structure.

Step 3 — Navigate to the Project Folder

After installation, move into your project directory:

cd my-react-app

cd my-react-app

Step 4 — Start the Development Server

Run the following command to start your React app:

npm start

npm start

This will:

• Compile your React code.
• Start a development server.
• Open your app automatically in your browser at http://localhost:3000.

You’ll see a default React welcome page confirming that everything works correctly.

Step 5 — Explore the Project Structure

Your React app contains the following main directories and files:

my-react-app/
├── node_modules/       # Project dependencies
├── public/             # Static files (HTML, icons)
├── src/                # Main React source code
│   ├── App.js          # Root component
│   ├── index.js        # Entry point
│   └── App.css         # Component styling
├── package.json        # Project configuration
└── README.md

my-react-app/
├── node_modules/       # Project dependencies
├── public/             # Static files (HTML, icons)
├── src/                # Main React source code
│   ├── App.js          # Root component
│   ├── index.js        # Entry point
│   └── App.css         # Component styling
├── package.json        # Project configuration
└── README.md

• src/App.js — The main component file. You’ll edit this to change what appears on the screen.
• src/index.js — Renders your React app into the root HTML element.
• public/index.html — The main HTML template.

Step 6 — Modify Your First React Component

Open the src/App.js file and replace its contents with:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to your first React application.</p>
    </div>
  );
}

export default App;

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to your first React application.</p>
    </div>
  );
}

export default App;

Save the file. The browser will automatically refresh, and you’ll see your new message on the page.

Step 7 — Build for Production (Optional)

When your app is ready for deployment, you can create an optimized build:

npm run build

npm run build

This command generates a build/ directory containing minified production files ready to be uploaded to any web server.

Conclusion

You’ve successfully installed React.js, created your first project, and displayed a simple component on the screen. From here, you can start exploring React’s key features, such as:

• Components and Props
• State and Hooks
• Event Handling
• Routing (React Router)
• API Integration (fetch or Axios)

For more detailed learning, refer to:

• React Official Documentation