React JS Setup: Installing Node.js, Vite & Project Structure

To build modern React applications, you need a development environment configured with a runtime (Node.js), a package manager (npm, pnpm, or yarn), and a fast modern development server (Vite). In this lesson, we will configure everything from scratch step-by-step.

Step 1: Install Node.js & Verify npm

Download the latest LTS (Long-Term Support) release of Node.js from the official portal (nodejs.org). Run the installer, accept default settings, and open your command prompt (Terminal or PowerShell) to verify:

# Check Node.js runtime version
node -v
# Output should be >= v18.0.0 (e.g. v20.12.0)

# Check npm package manager version
npm -v
# Output should be >= 9.x.x

Step 2: Scaffold a React Project using Vite (Fastest Method)

Vite is the modern industry standard tooling for single-page applications. Run this one-line command in your terminal:

# 1. Create a new project folder named "my-react-app"
npm create vite@latest my-react-app -- --template react

# 2. Enter project folder
cd my-react-app

# 3. Install required node dependencies (react & react-dom)
npm install

# 4. Launch blazing-fast development server
npm run dev

Within milliseconds, Vite will start your local development server at http://localhost:5173. Open this URL in Google Chrome, Microsoft Edge, or Mozilla Firefox to see your active application.

Step 3: Understanding the Project Directory Structure

Inside your newly generated project folder, you will find a clean, organized structure:

my-react-app/
├── node_modules/         # Third-party packages installed via npm
├── public/               # Static assets (favicons, manifest, robots.txt)
│   └── vite.svg
├── src/                  # Application source code lives here!
│   ├── assets/           # Images, SVGs, and fonts
│   ├── App.css           # Styling for App component
│   ├── App.jsx           # Root React Functional Component
│   ├── index.css         # Global styles for entire application
│   └── main.jsx          # Entry point where ReactDOM renders App
├── index.html            # Main HTML document with <div id="root"></div>
├── package.json          # Project metadata, dependencies, and build scripts
└── vite.config.js        # Vite build tool configuration

How main.jsx Mounts React into index.html

Open src/main.jsx. This file is the bridge connecting React's JavaScript virtual tree to the real browser HTML:

// src/main.jsx - React 18+ Root Creation
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// Select the real HTML DOM container element
const rootElement = document.getElementById('root');

// Create a React concurrent root and render App inside
ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Alternative: Running React via CDN (Zero-Installation Option)

If you are working on a university computer lab terminal without administrator rights to install Node.js, you can run React inside a single HTML file using CDN scripts:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React CDN Starter</title>
  <!-- 1. React Core -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- 2. ReactDOM Renderer -->
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 3. Babel for in-browser JSX compilation -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    function HelloLab() {
      return <h1>Running React directly from CDN!</h1>;
    }
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<HelloLab />);
  </script>
</body>
</html>