Setting up the development environment

In this chapter, you set up the Vite + React + TypeScript development environment.

Why Vite?

There are several options for a React development environment, and this book uses Vite.

Tool	Characteristics
Vite	Fast startup, simple configuration, modern ESM-based
Create React App	Official but deprecated (maintenance only), slow startup
Next.js	Full-stack framework, supports SSR/SSG

info

Create React App (CRA) was officially deprecated in February 2025 (it is now in maintenance mode, with only React 19 support added). For new projects, Vite or Next.js is recommended. Next.js is covered in Chapter 25.

Required tools

Node.js

We recommend Node.js 22 or later. Check your version with the following command.

node -v
# It's fine if it shows v22.x.x or v24.x.x

info

Vite 8, which this book uses, requires Node.js 20.19 or later, but Node.js 20 has already reached end of life, so for long-term study we recommend Node.js 22 or later (Node.js 22.12+ / 24.x LTS recommended).

warning

If Node.js is not installed, download the LTS version (22.x) from the official site.

Node.js version managers

If you want to use different Node.js versions for different projects, consider installing a version manager.

Tool	Characteristics
nvm	The most widely used, for macOS/Linux
fnm	Fast, written in Rust, cross-platform
Volta	Switches automatically per project
nodebrew	Simple and lightweight, for macOS/Linux

# Example with fnm
fnm install 22
fnm use 22

# Example with nodebrew (macOS)
brew install nodebrew
nodebrew setup
nodebrew install-binary v22.12.0
nodebrew use v22.12.0

Package manager

This book uses npm, but you can follow along with pnpm or yarn just as well.

Creating the project

There are two ways to create the project.

Method 1: Create from scratch (recommended)

If you want to learn by doing as you follow this book, create a new project with Vite.

npm create vite@latest react-learning -- --template react-ts

If you are asked Use rolldown-vite (Experimental)? when running the command, choose No.

info

rolldown-vite is an experimental package for using the next-generation bundler "Rolldown" ahead of time in the Vite 7 line. Since Vite 8, which this book uses, already integrates Rolldown into the core as the standard bundler, you don't need to enable this experimental package separately (even if you choose No, on Vite 8 you still get fast builds with Rolldown).

Move into the project directory and install the dependencies.

cd react-learning
npm install

Method 2: Clone the repository

If you want to learn while referring to the finished code, you can clone this book's repository.

git clone https://github.com/rasshii/react-intro-2026.git
cd react-intro-2026
git checkout start  # The starting point of Chapter 3
npm install

About the branches

This book's repository provides the code at the start and end of your study as branches.

Branch	Contents
main	The starting point of Chapter 3 (Vite default)
start	Same as main (alias)
end	The sample after completing all chapters (single integrated SPA version)

If you start studying from Chapter 3, work on the main or start branch. If you want to refer to the final form of the book, switch to the end branch with git checkout end.

Starting the development server

Start the development server with the following command.

npm run dev

When you open http://localhost:5173 in your browser, the React application is displayed.

Project structure

Let's look at the project structure that Vite generates.

react-learning/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
└── vite.config.ts

Important files

File	Role
src/main.tsx	The application's entry point
src/App.tsx	The root component
index.html	The HTML template
vite.config.ts	Vite's configuration file
tsconfig.json	TypeScript's configuration file

info

The create-vite template enables verbatimModuleSyntax: true in tsconfig.app.json. When importing types only, use import type, as in import type { ReactNode } from 'react'. If you get error TS1484 while copying the code examples in this book, this setting is the cause.

Checking main.tsx

Let's look at src/main.tsx.

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

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

• createRoot: Creates React's root DOM node
• StrictMode: A wrapper that detects potential problems during development
• App: The application's root component

What is ! (the non-null assertion)?

The ! at the end of document.getElementById('root')! is TypeScript's "non-null assertion operator."

// Tell TypeScript "this value is not null"
document.getElementById('root')!

getElementById may return null when the element is not found, but since you know that <div id="root"> always exists in index.html, the ! tells TypeScript that it is "not null."

warning

! means "the developer guarantees that this is not null." If it actually is null, you get a runtime error, so use it only when you are certain the value is not null.

Details on StrictMode

StrictMode has no effect in production, but during development it performs the following checks:

• Component purity check: Renders twice with the same props and checks that the result is the same
• Warnings for deprecated APIs: Warns if you use old lifecycle methods and the like
• Detecting side effects: Runs useEffect twice to detect side-effect problems

In particular, running useEffect twice can confuse beginners, but this is intentional behavior. *useEffect is covered in detail in Chapter 11.

Features of Vite

Hot Module Replacement (HMR)

Vite provides fast HMR. When you save a file, the browser updates automatically.

ES module-based

Vite uses native ES modules during development, so it starts quickly without bundling.

Optimized production builds

For production builds, it uses Rolldown (a bundler written in Rust) to generate an optimized bundle.

npm run build

Editor setup (VSCode recommended)

If you use VSCode, installing the following extensions improves development efficiency.

Extension	Purpose
ES7+ React/Redux/React-Native snippets	Snippets for React components
ESLint	Static analysis of code
Prettier	Code formatter
Auto Rename Tag	Automatically renames HTML tags

Recommended settings.json

Adding the following settings to .vscode/settings.json automatically formats your code on save.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Next steps

The development environment is ready. In the next chapter, you learn about JSX, the foundation of React.

info

This book is designed to be read from the top in order, but if you already know the basics of React, you can also start from Hooks in depth (Chapter 11 onward). The beginning of each chapter states the prerequisites, so read at a pace that matches your level.

What to read next

Move on to React basics. You learn the basic elements of React, such as JSX, components, Props, State, events, and forms.

• The basics of JSX