ReactJs Environment Setup

To build your first React project, you’ll need to set up the right development environment.
In this React tutorial, we’ll go through all modern setup options — from using new tools like Vite, to a manual setup (without CRA or Vite) for full control and learning purposes.

Create React App (CRA) — Deprecated

For years, developers used create-react-app (CRA) as the easiest way to bootstrap new React projects. However, as of 2024–2025, the React team has officially deprecated Create React App.

Why CRA Is Being Retired

CRA served its purpose for years, but the ecosystem has evolved. Here’s why it’s no longer recommended:

  • Outdated Build Tooling – CRA still uses older Webpack configurations that are slower compared to modern bundlers.
  • Limited Flexibility – Harder to customize for advanced setups like routing, server-side rendering (SSR), or TypeScript.
  • Slow Development Server – Newer tools like Vite and Next.js compile and reload much faster.
  • Maintenance Mode – The React team announced it won’t be receiving new features or major updates.

Step 1: Install Node.js and npm

React relies on Node.js and npm (Node Package Manager) for installing and managing packages.

How to Install Node.js
  1. Visit the official Node.js site: https://nodejs.org
  2. Download the LTS (Long-Term Support) version for better stability.
  3. Follow the installation steps.
  4. Once done, verify your installation using these commands, Run this in command prompt to verify:

node -v
npm -v

You should see version numbers — meaning Node.js and npm are ready to use.

Step 2: Setup React Using Vite (Recommended)

Vite is the new standard for React development.
It’s lightning fast, uses ESBuild under the hood, and supports Hot Module Replacement (HMR) instantly.

Create a New React App with Vite

In your terminal, run:


npm create vite@latest my-react-app

Here you will be given option to choose framework / library and variant:


✔ Select a framework: › React
✔ Select a variant: › JavaScript (or TypeScript if preferred)

Then navigate into your project:


cd my-react-app
npm install
npm run dev

That’s it! Your new React app will be live at: http://localhost:5173

Folder Structure Overview


my-react-app/            
│
├── index.html             # Entry HTML file
├── package.json           # Project info and dependencies
│
├── src/                   # React code lives here
│   ├── main.jsx           # Entry point
│   ├── App.jsx            # Main component
│   └── assets/            # Static assets like images

└── vite.config.js         # Vite configuration file

Example: Editing Your First React Component

Open src/App.jsx and replace the default code with:


function App() {
  return (
    <div>
      <h1>Welcome to My React App with Vite</h1>
      <p>This project was bootstrapped using Vite – fast and modern!</p>
    </div>
  );
}

export default App;

Save it, and Vite will instantly update your browser — no refresh needed!

Setup React Manually (Without CRA or Vite)

If you’re a developer who likes to understand every piece of your stack, or you’re building something very custom, you can manually set up React using Webpack and Babel.

This method gives you complete control over your build process.

Step-by-Step Manual Setup

1️⃣ Create a New Folder and Initialize npm(use command prompt) 

mkdir react-manual-setup      # Create a new folder
cd react-manual-setup         # Move into the folder
npm init -y                   # Initialize Node.js project with default settings
2️⃣ Install React and React DOM 

npm install react react-dom
3️⃣ Install Dev Dependencies
We’ll use Webpack and Babel for bundling and transpiling JSX. 

npm install --save-dev webpack webpack-cli webpack-dev-server     # Install Webpack and dev server
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader   # Install Babel + React presets
4️⃣ Create Folder Structure 

react-manual-setup/          
│
├── public/                   # Public assets folder
│   └── index.html            # Main HTML entry file
│
├── src/                      # Source code folder
│   ├── index.js              # JavaScript entry file for Webpack
│   └── App.jsx               # Main React component
│
├── .babelrc                  # Babel configuration file
├── webpack.config.js         # Webpack configuration file
└── package.json              # Project metadata & dependencies
5️⃣ Add HTML Template (public/index.html) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Manual React Setup</title>
</head>

<body>
  <div id="root"></div>
  <script src="../dist/bundle.js"></script>
</body>

</html>
6️⃣ Configure Babel (.babelrc) 

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
7️⃣ Create Webpack Config (webpack.config.js) 

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  devServer: {
    static: path.resolve(__dirname, "public"),
    port: 3000,
    hot: true,
    open: true,
  },

  resolve: {
    extensions: [".js", ".jsx"],
  },
};
8️⃣ Create React Files
src/App.jsx 

import React from "react";

function App() {
  return (
    <div>
      <h1>Welcome to My Manual React App</h1>
      <p>This React app was set up completely from scratch!</p>
    </div>
  );
}
export default App;
src/index.js 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);

root.render(
  <App />
);
9️⃣ Add Scripts to package.json 

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}
🔟 Run Your App 

npm start

Now visit http://localhost:3000
Congratulations — your manual React setup is live!

Summary

Setting up React in todays world is faster and more flexible than ever.

  • Vite is now the officially recommended tool for most React projects.
  • Manual setup helps you truly understand what happens behind the scenes.
  • Create React App still works — but it’s officially in sunset mode and no longer the best choice.

With your environment ready, you’re now set to build your first React component and explore features like JSX, state, and hooks.