Setting up the environment (Node.js + Vite)

In Chapter 1 we covered what React is and where this book is headed. In this chapter we put the tools in your hands. Every example in the book runs on top of the environment built in this chapter.

There are three things to do in this chapter:

1. Install Node.js 22 LTS
2. Enable pnpm
3. Create a new React project with Vite and bring up the dev server

Picking the right tools matters. This book assumes the same tool set from start to finish. Part 4 (Next.js), Part 5 (testing / deploy), and the Part 6 fullstack capstone all flow as extensions of this same environment.

What is Node.js, and why do we need it? #

React is a JavaScript library. But the React code we write (JSX, module imports, and so on) contains syntax the browser does not understand directly. We need a build step (transpile + bundle) to turn it into executable JavaScript, and for that build tool to run we need a JavaScript runtime. That runtime is Node.js.

Node.js was originally built for server development, but today frontend developers also use Node.js-based tools (bundlers, compilers, package managers, test runners) every day. To develop with React, Node.js is mandatory.

Picking a version — LTS #

The recommended version is Node.js 22 LTS. LTS stands for Long Term Support, the version line that guarantees stability and security patches for a certain period. On nodejs.org you will see both LTS and Current versions; if you are just starting or working on a real project, take the LTS.

The code in this book is verified against Node.js 22 LTS. Higher versions work almost identically.

Installing Node.js #

The procedure differs slightly by operating system.

macOS #

The cleanest path is via Homebrew.

brew install node@22

If you do not use Homebrew, grab the .pkg installer from nodejs.org and double-click to install.

Linux #

Most distributions can install via the package manager, but the version is sometimes a bit older, so adding the NodeSource repository or using nvm is safer.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
# After opening a new terminal
nvm install 22
nvm use 22

nvm lets you pick between multiple Node.js versions on a single machine. Recommended if different projects need different Node.js versions.

Windows #

There are two paths.

Option 1. WSL2 + the Linux procedure (recommended)

For frontend development on Windows today, working inside WSL2 (Windows Subsystem for Linux 2) is essentially the standard. Just follow the nvm procedure above inside the Linux shell / file system.

If WSL is new to you, open PowerShell as administrator and:

wsl --install

Then open the Ubuntu terminal and walk through the nvm procedure. In VS Code, install the Remote - WSL extension so you can edit files inside WSL directly from the editor running on Windows.

Option 2. Native Windows install

If WSL feels heavy, you can also grab the .msi installer from nodejs.org. That said, some tools (especially OS-specific binaries inside node_modules) are slow or awkward on native Windows paths. WSL ends up with less friction in the long run.

Verify the install #

Once the installation is done, open a new terminal and check the versions.

node -v
# v22.x.x

npm -v
# 10.x.x

npm is the default package manager that ships with Node.js. That said, this book uses pnpm (the next section) as its primary.

Enabling pnpm #

This book uses pnpm as its package manager. npm / yarn use nearly the same command vocabulary and every example also works with the npm that got installed above, but the reasons to prefer pnpm are:

• Faster install speed — dependencies are shared from a global store via hard links, which also saves disk space.
• Monorepo-friendly — the Part 6 capstone uses the workspaces feature briefly.
• Strict dependency resolution — reduces the kind of accident where you accidentally import a package not declared in package.json.

pnpm is enabled simply via Corepack, which ships built into Node.js 16.13+.

corepack enable
corepack prepare pnpm@latest --activate
pnpm -v
# 10.x.x

From here on every command in this book is written using pnpm. If you use npm or yarn, knowing the following mapping is enough to follow along.

Creating a new project with Vite #

Now we create our first React project. The build tool is Vite (pronounced “veet,” French for “fast”).

Vite is a build tool for several frontend frameworks including React. It generates the initial project setup automatically and brings up a very fast dev server during development. The former standard, create-react-app, has been officially deprecated, and Vite is now the de facto standard.

Move to wherever you want to keep your project (e.g., ~/projects) and run:

pnpm create vite@latest

When you run the command you get asked a few questions.

1. Project name — the project folder name. Pick whatever you like (e.g., my-first-react).
2. Select a framework — pick React.
3. Select a variant — pick JavaScript. TypeScript shows up in earnest in Part 3 of this book.

Once you have answered, Vite creates the project folder. At the end you see a message similar to:

Done. Now run:

  cd my-first-react
  pnpm install
  pnpm dev

Follow the instructions.

cd my-first-react
pnpm install

pnpm install downloads the dependencies declared in package.json (React itself, Vite, and the rest) into the global store and links them into the node_modules folder via hard links. The first time takes a moment, but from the second project onward pnpm reuses what is already in the store, making subsequent installs much faster.

Run the dev server #

Now bring up the dev server.

pnpm dev

If you see output similar to:

  VITE v6.x.x  ready in 250 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Open a browser and go to http://localhost:5173. When you see the default screen with the spinning Vite + React logos, everything is working.

A look at the project structure #

The structure of the project folder you just opened looks like this.

my-first-react/
├── node_modules/        ← installed libraries (you do not touch this directly)
├── public/              ← static files (images, favicon, and so on)
├── src/                 ← where the code we write lives
│   ├── App.jsx          ← the first component
│   ├── main.jsx         ← the app entry point
│   ├── App.css
│   └── index.css
├── index.html           ← the HTML the app gets injected into
├── package.json         ← project info and dependency list
└── vite.config.js       ← Vite configuration

At this stage the most important file is src/App.jsx. That is where you write what shows on the screen.

First edit — feel Hot Module Replacement #

Open the project folder in VS Code (recommended editor). When you open src/App.jsx you see something like:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        {/* ... */}
      </div>
      <h1>Vite + React</h1>
      {/* ... */}
    </>
  )
}

export default App

Change the <h1>Vite + React</h1> line to:

<h1>Hello, React!</h1>

On save, without stopping the dev server or refreshing the page, the browser updates immediately. This feature is HMR (Hot Module Replacement). It swaps only the changed modules in real time and reflects them on the screen. It significantly speeds up development, and you will see it often from here on.

Exercises #

1. Follow the steps in this chapter to create my-first-react and bring up the dev server, then change the <h1> text in src/App.jsx to a greeting with your own name in it. Confirm that the browser refreshes the moment you save.
2. Inside src/App.jsx, add a new line <p>Today is my first day with React.</p> below the <h1>. After saving, confirm that both lines show on screen.
3. Add the dayjs library with pnpm (pnpm add dayjs), import it in App.jsx with import dayjs from 'dayjs', and show today’s date with a single line <p>Today is {dayjs().format('YYYY-MM-DD')}.</p>. Also confirm that dayjs got added to dependencies in package.json.

In one line: This book sets Node.js 22 LTS + pnpm + Vite as the standard. Creating a project with pnpm create vite@latest, installing dependencies with pnpm install, and bringing up the dev server with pnpm dev — those three steps are the whole daily flow. Thanks to HMR, the browser refreshes the moment you save.

Next chapter #

In the next chapter, Chapter 3: The essence of JSX, we look at exactly what code like <h1>Hello, React!</h1> from this chapter actually is and how it gets transformed into JavaScript. The rules around expressions / attributes / children all come together in one place.