React Basics #2: Setting Up the Development Environment (Node.js + Vite)

Last time we looked at what React is and what its strengths are. This time we’ll set up the development environment so we can start writing real code, and create our first React project.

Three tasks for this post:

1. Install Node.js
2. Create a new React project with Vite
3. Run the dev server and check it in the browser

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

React is a JavaScript library. The React code we write (JSX, module imports, etc.) contains syntax the browser can’t understand directly, so it has to be converted into runnable JavaScript. To perform that conversion (and the other build steps), we need a JavaScript runtime on our machine — and that runtime is Node.js.

Node.js was originally created for server development, but today frontend developers also use Node.js-based tools (bundlers, compilers, package managers, etc.) to write and build their code. In other words, Node.js is essential for React development.

Installing Node.js #

You can download Node.js installers for your operating system from the official site, nodejs.org.

The recommended version is the LTS (Long Term Support) version. LTS means long-term support — a version with stability and security patches guaranteed for a set period. On the site you’ll see both LTS and Current versions; if you’re starting out, grab the LTS one.

Windows #

1. Go to nodejs.org
2. Click the LTS button to download the .msi installer
3. Run the installer and follow the prompts (Next, Next, Install)
4. Once installation finishes, open a fresh Command Prompt (CMD) or PowerShell (any already-open windows won’t pick up the PATH change)

Mac #

1. Go to nodejs.org
2. Click the LTS button to download the .pkg installer
3. Run the installer and follow the prompts
4. Open a fresh terminal window

On Mac you can also install via Homebrew, a package manager.

brew install node

Verifying the install #

Once installed, run these two commands in your terminal or Command Prompt. If version numbers print, the install succeeded.

node -v
npm -v

node -v prints the Node.js version, and npm -v prints the version of npm (Node Package Manager) — the package manager that’s installed automatically alongside Node.js. npm is the tool you use to install React and countless other JavaScript libraries into your project.

Creating a new project with Vite #

Now let’s create our first React project. We’ll use a tool called Vite (French for “fast,” pronounced “veet”).

Vite is a build tool for React and other frontend frameworks. It scaffolds an initial project setup automatically and provides a very fast dev server during development. The previous standard was create-react-app, but Vite has effectively replaced it as the de facto standard — it’s faster and lighter.

Move into your preferred directory (e.g., ~/projects or Desktop) and run the following command in your terminal.

npm create vite@latest

Running this command will prompt you with a few questions:

1. Project name: The project folder name. Enter whatever you like (e.g., my-first-react).
2. Select a framework: Pick React.
3. Select a variant: Pick JavaScript. (You can try TypeScript later, once you’re comfortable.)

After your selections, Vite creates the project folder. At the end you’ll see a message similar to this:

Done. Now run:

  cd my-first-react
  npm install
  npm run dev

Follow the instructions:

cd my-first-react
npm install

npm install downloads the libraries your project depends on (React itself, Vite, other tools) from the internet and installs them into a node_modules folder. The first time can take a while.

Running the dev server #

Now let’s start the dev server.

npm run dev

If you see output similar to the following, you’re good:

  VITE v5.x.x  ready in 250 ms

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

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

Walking through the project structure #

Open the project folder and you’ll see a structure like this:

my-first-react/
├── node_modules/        ← installed libraries (don't touch)
├── public/              ← static files (images, favicon, etc.)
├── src/                 ← where your code goes
│   ├── App.jsx          ← the first component
│   ├── main.jsx         ← app entry point
│   ├── App.css
│   └── index.css
├── index.html           ← HTML the app gets injected into
├── package.json         ← project info and dependency list
└── vite.config.js       ← Vite config

At this stage the most important file is src/App.jsx — the place where you write the content that appears on screen.

Your first edit — experiencing Hot Module Replacement #

Open the project folder in your favorite editor (VS Code recommended). Open src/App.jsx and you’ll see code like this:

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>

Save the file. Without stopping the dev server or pressing refresh, the browser screen updates instantly. This magic feature is HMR (Hot Module Replacement) — Vite’s ability to swap only the changed module and reflect it on screen in real time. It dramatically boosts development speed, and you’ll see it constantly from here on out.

Wrapping up #

In this post we installed Node.js, created our first React project with Vite, ran the dev server, and confirmed that code changes are reflected on screen instantly. You’re now ready to write real React code.

In the next post, “React Basics #3: What Is JSX?”, we’ll dive into JSX — the special syntax used when writing React components.