Before You Write Your First Component — The React Toolchain, Explained

You've installed Node, typed npm start, and somehow a React app appeared. But what actually happened? Let's pull back the curtain on every tool in the chain.

Layer 00 — The core problem

Before we talk about any tool, we need to understand why these tools exist in the first place.

When you write <Button onClick={handleClick} />, that's not real JavaScript. The browser would choke on it. Something needs to translate your developer-friendly code into plain HTML, CSS, and JS that browsers can actually run.

That "something" is the toolchain we're about to explore. Each tool handles one specific part of the translation. Let's go layer by layer.

Layer 01 — Node.js: JavaScript escapes the browser

JavaScript was born inside browsers in 1995. For its first 14 years, that's the only place it could run. You couldn't use JavaScript to build a server, write a script, or create a command-line tool.

In 2009, Ryan Dahl created Node.js. He took Chrome's V8 JavaScript engine — the same engine that runs JS inside your browser — and made it possible to run JavaScript directly on your computer, like Python or Java.

Why does this matter for React developers?

Because every tool you use — Webpack, Vite, your dev server, your build scripts — is a JavaScript program that runs on your computer, not in the browser. When you type npm start, you're running JavaScript on your machine via Node. Your development environment is powered by Node.

Without Node.js, the entire modern frontend toolchain wouldn't exist.

# Check if Node is installed
node --version
# → v20.11.0
 
# You can run any JS file directly
node my-script.js

Layer 02 — nvm: Switching Node versions painlessly

Here's a real scenario: your company's legacy dashboard runs on Node 16. The new project your team just started requires Node 20. Installing and uninstalling Node manually every time you switch projects is a nightmare.

nvm (Node Version Manager) solves exactly this. It lets you install multiple Node versions side by side and switch between them in one command.

# Install specific versions
nvm install 18
nvm install 20
 
# Switch instantly
nvm use 18     # → Now using Node 18
nvm use 20     # → Now using Node 20
 
# See what you have
nvm ls         # → Lists all installed versions

That's genuinely all it does. It's a small, focused utility. Many beginners overthink it — nvm is just a version switcher for Node. Nothing more.

Layer 03 — npm, yarn & pnpm: Managing your dependencies

When you build a React app, you don't write everything yourself. You install libraries — React itself, a router, a date picker, an HTTP client. Somebody needs to download, track, and manage all of those packages.

That's what a package manager does. It's essentially an app store for JavaScript libraries.

npm — the default

npm (Node Package Manager) comes pre-installed with Node. It does three key things:

First, it downloads packages from the npm registry — a massive online catalog of JavaScript libraries (over 2 million packages). Second, it records what you installed in a file called package.json. Third, it locks exact versions in package-lock.json so your teammate gets the exact same dependency versions you do.

yarn — the challenger

In 2016, Facebook created yarn because npm at the time was slow, inconsistent, and didn't guarantee reproducible installs. Yarn fixed all of that. Today, npm has caught up significantly, and the two are nearly equivalent for most developers.

pnpm — the efficient one

pnpm takes a different approach to storage. Instead of copying every package into every project's node_modules folder, it stores packages once on your disk and creates links. If you have 10 projects that all use React, React exists once on your machine, not ten times.

# They all do the same thing, different syntax:
 
# Install a package
npm install react      |  yarn add react      |  pnpm add react
 
# Install all dependencies
npm install            |  yarn                |  pnpm install
 
# Run a script
npm run dev            |  yarn dev            |  pnpm dev

Layer 04 — Bundlers: Where the real magic happens

This is the layer that confuses most beginners, so let's go slow.

Look at a typical React file:

import React from 'react'
import Button from './components/Button'
import './styles.css'
import logo from './logo.png'
 
export default function App() {
  return <Button>Click me</Button>
}

Count the things browsers cannot do here: they can't import a CSS file into JS, they can't import an image as a module, they can't read JSX like <Button>. None of this is valid browser code.

A bundler takes all of your files — JavaScript, JSX, CSS, images, fonts — and transforms, combines, and outputs files the browser can understand.

Webpack — the veteran

Webpack (released 2014) was the first bundler to dominate the React ecosystem. It's incredibly powerful and infinitely configurable. It uses a system of loaders (transform individual files) and plugins (modify the overall build) to handle any file type you throw at it.

The downside? Configuration. Even a basic setup can feel overwhelming:

module.exports = {
  module: {
    rules: [
      { test: /\.jsx?$/, use: 'babel-loader' },           // JS/JSX
      { test: /\.css$/,  use: ['style-loader', 'css-loader'] }, // CSS
      { test: /\.png$/,  use: 'file-loader' },            // images
    ]
  }
}

Webpack needs to be told explicitly how to process every single file type. It's powerful, but it's a lot of ceremony.

Vite — the modern standard

Vite (released 2020, created by Evan You — the creator of Vue.js) solves the same problem with a fundamentally different strategy. The key insight:

This is why Vite's dev server starts in milliseconds, while Webpack can take several seconds (or minutes on large projects). For production, Vite uses Rollup (another bundler) under the hood to create optimized bundles.

Other bundlers you'll hear about

• esbuild — Written in Go. Blazingly fast. Vite uses it internally for the file transformation step.
• Turbopack — Made by Vercel (the Next.js team). Written in Rust. Positioned as the successor to Webpack.
• Rollup — Great for building libraries. Also used by Vite internally for production builds.
• Parcel — Zero-config bundler. You point it at your entry file and it figures out the rest.

Layer 05 — CRA, Vite templates & Next.js: Skipping the setup

By now you can see the problem: to start a React project from scratch, you'd need to configure a bundler, set up JSX transformation, configure a dev server, set up hot reloading, configure production builds... and that's before writing a single component.

Project starters give you all of this, pre-configured, in one command.

Create React App (CRA)

Facebook's original solution. One command, working React project. It used Webpack under the hood but hid all the configuration inside a package called react-scripts.

npx create-react-app my-app
# ✅ worked great in 2018-2022
# ❌ now deprecated and unmaintained

Vite (the current recommendation)

npm create vite@latest my-app -- --template react
# Fast, modern, minimal config

Frameworks (Next.js, Remix)

If you need routing, server-side rendering, or API endpoints, frameworks like Next.js and Remix give you the bundler plus a complete application architecture. The React team's official docs now recommend starting with a framework rather than a plain bundler setup.

Layer 06 — The full picture: How it all connects

Let's trace through exactly what happens when you start a new React project from zero:

nvm use 20                                          # 1. Pick a Node version
npm create vite@latest my-app -- --template react   # 2. Scaffold the project
cd my-app
npm install                                         # 3. Download dependencies
npm run dev                                         # 4. Start dev server

When you run npm run dev, here's the chain of events:

1. npm reads package.json
2. Finds the "dev" script
3. Runs Vite (via Node)
4. Local server starts
5. Browser loads app

And when you edit a file and save? Vite detects the change, transforms just that file, and pushes the update to your browser instantly — no full page reload. That's Hot Module Replacement (HMR).

The cheat sheet

Written to teach, because teaching is the fastest way to learn.