Environment and Create React Project

Introduction

React apps rely on Node.js for tooling—the Vite dev server, TypeScript, and production bundles. This chapter installs Node, scaffolds a project with Vite’s React template, explains the folder layout, and configures VS Code for productive editing.

Prerequisites

What Is React
Terminal access on Windows, macOS, or Linux
Helpful: Running JavaScript

Install Node.js

Download Node.js LTS from nodejs.org or use a version manager (nvm, fnm).

Verify:

bash

node -v
npm -v

Code explanation:

LTS is the stable line for most teams
npm ships with Node; pnpm and yarn work too—examples use npm

Create a React Project

Official Vite scaffold:

bash

npm create vite@latest

Prompts (recommended for this track):

Question	Suggestion
Project name	`hello-react`
Framework	React
Variant	TypeScript

Then install and run:

bash

cd hello-react
npm install
npm run dev

Open the URL shown (usually http://localhost:5173).

Code explanation:

Vite replaces Create React App for new projects
Dev port 5173 differs from Flask 5000 and FastAPI 8000

The TypeScript + Vite chapter uses the same template with extra detail on tsc vs Vite—read it if you want a deeper Vite primer.

Project Layout

text

public/: static files copied as-is to build output (favicon, robots.txt).

Key Scripts

From package.json:

Script	Command	Purpose
`dev`	`vite`	Dev server + HMR
`build`	`tsc -b && vite build`	Type-check + production bundle
`preview`	`vite preview`	Serve `dist/` locally
`lint`	`eslint .`	Lint (if ESLint configured)

Preview production build:

bash

npm run build
npm run preview

Add ESLint (Recommended)

Vite’s minimal template may omit ESLint. Add when ready:

bash

npm install -D eslint @eslint/js eslint-plugin-react-hooks eslint-plugin-react-refresh typescript-eslint

Enable eslint-plugin-react-hooks—it enforces the Rules of Hooks.

VS Code Setup

Extension	Purpose
ES7+ React/Redux/React-Native snippets	JSX shortcuts (optional)
ESLint	Inline lint errors
Prettier	Format on save (optional)

Install React Developer Tools in Chrome or Firefox to inspect component trees and state.

Path Aliases (Optional)

vite.config.ts:

typescript

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "node:path";
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Match tsconfig.app.json:

json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

See TypeScript path aliases.

Dev Server Proxy (Preview)

When you connect to a backend API later, avoid CORS in dev:

typescript

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": "http://127.0.0.1:8000",
    },
  },
});

Full setup in Fetching API and CORS.

Compare With create-vue

	Vite + React	create-vue
Scaffold	`npm create vite@latest`	`npm create vue@latest`
Entry	`main.tsx` + `App.tsx`	`main.ts` + `App.vue`
UI format	JSX in `.tsx`	SFC `.vue`
Router in scaffold	Add manually	Optional in prompts

FAQ

npm vs pnpm vs yarn?

Any works. Teams pick one and commit lockfiles—package-lock.json for npm.

Wrong Node version?

Use Node 20+ LTS for current Vite and React 18.

Port 5173 in use?

bash

npm run dev -- --port 3000

Or set server.port in vite.config.ts.

TypeScript errors but dev runs?

Vite transpiles without full type-checking. Run npm run build or tsc --noEmit to catch type errors.

Where is React Router?

Not in the default Vite template—you add it in React Router Basics.

Next step?

First React Application and JSX.