🚀 Ultimate Step-by-Step Guide to Installing React.js in 2025 (Latest Method)

Updated: June 2025
Tags: React.js, Web Development, JavaScript, Frontend, Beginner, Node.js, Vite, Create React App

🧠 Introduction: Why Learn React in 2025?

React.js, developed by Meta, remains the dominant frontend tool in 2025. With React 19 and Vite.js now standard, the development experience is faster, modular, and more scalable than ever. This guide helps you install React.js using modern and traditional methods step-by-step.

🔧 Prerequisites

Ensure the following tools are installed:

• Node.js (LTS version – v20+)
• npm or yarn
• Code editor like VS Code
• Command-line terminal (CMD, PowerShell, or Bash)

📥 Step 1: Install Node.js and npm

Why? React requires a Node environment and a package manager like npm.

• Visit https://nodejs.org/
• Download the LTS version for your OS
• Install and verify in terminal:

node -v
npm -v

📁 Step 2: Choose a Setup Method

React supports two installation methods:

• Vite – Recommended for fast development
• Create React App (CRA) – Classic setup

⚡ Method 1: Installing React Using Vite

📍 Step 2.1: Create React App with Vite

npm create vite@latest my-react-app -- --template react

📍 Step 2.2: Navigate to Folder

cd my-react-app

📍 Step 2.3: Install Dependencies

npm install

📍 Step 2.4: Start the Dev Server

npm run dev

📁 Folder Structure Overview

my-react-app/
├── public/
├── src/
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── package.json
└── vite.config.js

🧪 Method 2: Installing React Using Create React App

📍 Step 2.1: Create React App

npx create-react-app my-react-app

📍 Step 2.2: Navigate to Folder

cd my-react-app

📍 Step 2.3: Start the Server

npm start

📁 Folder Structure Overview

my-react-app/
├── public/
├── src/
│   ├── App.css
│   ├── App.js
│   └── index.js
├── package.json
└── README.md

📦 Step 3: package.json and Dependencies

📘 Vite Project

"dependencies": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

📘 CRA Project

"dependencies": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "react-scripts": "5.0.1"
}

💡 Step 4: Customize Your React App

• Edit HTML title in index.html
• Modify src/App.jsx or App.js content

function App() {
  return (
    <div className="App">
      <h1>Hello, React 2025!</h1>
    </div>
  );
}
export default App;

📂 Step 5: Add Routing, State Management & Styling

📌 React Router

npm install react-router-dom

📌 Redux Toolkit

npm install @reduxjs/toolkit react-redux

📌 Tailwind CSS (Optional)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

🛠️ Step 6: Build and Deploy

✅ Create Build

npm run build

✅ Deployment Platforms

• Netlify
• Vercel
• GitHub Pages
• Firebase Hosting

🧠 Conclusion

React in 2025 is more powerful and beginner-friendly than ever. Whether using the modern Vite setup or traditional CRA, the process is streamlined, fast, and scalable. Once installed, build and deploy apps across platforms with ease.

✅ Summary Table

Now go build something amazing with React!