🛠️ Setting Up a React Development Environment

What's in a React Environment?

A React "development environment" is really a small toolchain working together. You don't assemble each piece by hand — a scaffolding tool wires most of it up for you — but knowing what each part does turns cryptic errors into obvious fixes.

🏗️ A construction-site analogy: Node.js is the generator powering the whole site. npm is the supply chain delivering materials (libraries). The build tools are your heavy machinery. And VS Code is the site office where the plans are drawn. You wouldn't pour concrete before the power's on — so we start with Node.

Installing Node.js the Right Way

React tooling runs on Node.js, a JavaScript runtime, and ships with npm (Node Package Manager). It may feel odd to install a "server" technology for a browser app, but the build tools, dev server, and package installer all run on Node.

Use a version manager (recommended)

You could download an installer from nodejs.org and pick the LTS (Long-Term Support) build. But a version manager is better: it lets you switch Node versions per project, which matters the moment you juggle more than one codebase.

macOS / Linux — nvm

# Install nvm (check github.com/nvm-sh/nvm for the latest version)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

# Restart your terminal, then install and use the latest LTS
nvm install --lts
nvm use --lts

Windows — nvm-windows or fnm

# After installing nvm-windows (github.com/coreybutler/nvm-windows)
nvm install lts
nvm use lts

Verify the installation

node --version   # e.g. v22.11.0
npm --version    # e.g. 10.9.0

Package Managers

A package manager installs, updates, and tracks the libraries your project depends on, recording exact versions in a lock file so every machine gets identical installs. Three are common today:

npm comes free with Node and is perfect for learning — this course uses it. pnpm is a popular faster alternative that saves disk space by sharing packages between projects. Install either extra manager with a one-liner:

# Enable pnpm via Corepack (bundled with modern Node)
corepack enable
corepack prepare pnpm@latest --activate

# Or install Yarn the same way
corepack prepare yarn@stable --activate

Command cheat sheet

Setting Up VS Code

Visual Studio Code is the de-facto editor for React thanks to its JavaScript/TypeScript support and huge extension library. Download it from code.visualstudio.com.

Essential extensions

Recommended settings

Open the command palette (Ctrl/Cmd + Shift + P → "Preferences: Open User Settings (JSON)") and add:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "emmet.includeLanguages": { "javascript": "javascriptreact" },
  "javascript.updateImportsOnFileMove.enabled": "always"
}

The Build Tools Explained

Browsers can't run JSX directly, and shipping hundreds of separate files is slow. Build tools transform and package your code. You rarely configure them by hand anymore, but here's what each one does:

The compile step is what turns friendly JSX into the plain function calls a browser understands:

// What you write (JSX)
const element = <h1 className="title">Hello, world!</h1>;

// What the compiler produces (simplified)
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello, world!'
);

📚 A publishing analogy: your source code is the manuscript; Babel is the translator; the bundler is the typesetter arranging everything into the finished book; ESLint is the copy-editor catching mistakes; and Prettier is the house style guide. The production build is the printed book, ready to ship.

Scaffolding with Vite

For years the default was Create React App (CRA). It is now deprecated — the React team no longer recommends it. The modern choice for a client-side app is Vite: near-instant startup, lightning-fast hot reloading, and minimal config. (For full-stack apps with server rendering, reach for Next.js instead.)

Step 1 — create the project

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

# pnpm
pnpm create vite my-react-app --template react

# TypeScript variant
npm create vite@latest my-react-app -- --template react-ts

Step 2 — install dependencies

cd my-react-app
npm install

Step 3 — start the dev server

npm run dev

  VITE v6.0.0  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Open http://localhost:5173/ in your browser. Now edit src/App.jsx, change some text, and save — the page updates instantly without a full reload. That's Hot Module Replacement (HMR), and it's the single biggest quality-of-life feature in modern frontend work.

The Project Structure

Vite generates a clean, minimal layout. Here's what each part is for:

my-react-app/
├── node_modules/      # installed dependencies (never edit; git-ignored)
├── public/            # static assets served as-is
├── src/               # your application code lives here
│   ├── assets/        # images imported by components
│   ├── App.jsx        # the root React component
│   ├── App.css        # styles for App
│   ├── index.css      # global styles
│   └── main.jsx       # entry point — mounts React into the page
├── index.html         # the single HTML page Vite serves
├── package.json       # dependencies and npm scripts
├── vite.config.js     # Vite configuration
└── eslint.config.js   # ESLint rules

The two files that matter most

index.html holds a single mount point — an empty <div> React fills in:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

src/main.jsx is where React takes over that div and renders your App:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Hands-on Exercise

import './App.css';

function App() {
  const name = 'Ray';
  return (
    <div className="app">
      <h1>👋 Hello, {name}! Welcome to React.</h1>
      <p>My development environment is up and running.</p>
    </div>
  );
}

export default App;

Troubleshooting

Almost every beginner hits one of these. Keep this list handy:

Summary & Quiz

📚 Further Reading

• Vite — Getting Started
• react.dev — Build a React app from scratch
• Node.js downloads and LTS schedule

🚀 What's Next?

Your environment is ready and an app is running. Next we'll dig into the syntax you'll use to describe every UI in React: JSX — how it works, how it differs from HTML, and how to embed live JavaScript inside your markup.