Create a Local React Project

Create a local project containing React source, Vite configuration, installed packages, and commands for development.

A heading from App.jsx must appear in the browser and change after you save the file. That proves the source-to-screen connection works.

Use the JavaScript React template. It keeps the first project focused on the runtime code that produces the screen.

Four Programs Take Part

Keep the tools separate before running a command.

Vite runs through Node.js. React code runs in the browser. The same source project participates in both environments, but one JavaScript process does not perform every step.

Check Node.js Before Creating Files

Vite 8 requires Node.js 20.19+ or 22.12+. A current supported release above those minimums also works.

Ask the active terminal which Node.js version it can start.

node --version

A result begins with v.

v22.14.0

The example is not a required exact version. Compare all three numeric parts with Vite's current requirement.

Version 20.18.0 does not satisfy 20.19+. Version 22.11.0 does not satisfy 22.12+. A higher major is acceptable only when that release is supported by the current tools and dependencies.

Check npm too.

npm --version

The npm version does not need to match the Node.js version number. They are different programs with independent releases.

Handle a Missing Command

The shell can report that node or npm is not found.

zsh: command not found: node

This means the shell could not locate an executable named node through its current command search path. It does not describe a React error because the React project has not started.

Install a supported Node.js release using the official installer or a version manager approved for your environment. Close and reopen the terminal so it receives the updated path, then run both version checks again.

If several Node.js versions are installed, print the executable location.

which node

Windows PowerShell can use the following command.

Get-Command node

The location helps distinguish a system installation from a version manager or another development tool's bundled runtime.

Do not proceed while the version is below Vite's minimum. A generator may create files and fail later during installation or server startup. Repairing the runtime first removes those follow-on failures.

Choose the Parent Directory

The generator will create one new project directory. Move to the directory that should contain it.

cd ~/Code

Print the current location.

pwd

Example output follows.

/Users/reader/Code

The new project will then be created at /Users/reader/Code/reactbook-first-screen.

On Windows PowerShell, choose a parent and print its location with these commands.

cd C:\Code
Get-Location

The parent directory should not already contain a directory named reactbook-first-screen with work you need. The generator may refuse a non-empty destination. Do not delete an existing directory until you have inspected it.

Read the Creation Command

Run the following command from the chosen parent.

npm create vite@latest reactbook-first-screen -- --template react

Each segment has one job.

npm create vite@latest
reactbook-first-screen
--
--template react

npm create vite@latest asks npm to run the current published Vite project generator. reactbook-first-screen supplies the destination directory name. The separate -- tells npm to forward the following option to the generator. --template react selects the React template that uses JavaScript and JSX.

The command can ask for permission to download create-vite. Read the displayed package name before accepting.

@latest applies to the generator selected on the day you run the command. It does not pin the generated application forever. The generated package.json and lockfile record the dependencies selected for the new project.

Confirm That Generation Finished

Successful output reports the created directory and the next commands.

cd reactbook-first-screen
npm install
npm run dev

Move into the project.

cd reactbook-first-screen

Print the location again.

pwd

The final path segment should be reactbook-first-screen.

List the directory contents.

ls

Windows PowerShell can use Get-ChildItem.

The list should contain package.json, index.html, src, and Vite configuration. Exact template files can change across Vite releases, so confirm the named foundation instead of comparing every generated filename with an old screenshot.

Install the Recorded Packages

Run installation inside the project directory.

npm install

npm reads package.json, resolves the allowed package versions, downloads packages, creates node_modules, and writes or updates package-lock.json.

The command needs network access to the configured npm registry unless the required packages already exist in a usable local cache. Installation time depends on the machine, connection, and package cache.

Wait for the command prompt to return. A warning does not always mean installation failed. The process exit and the final error report determine whether npm completed.

npm ERR!

If an error appears, read the first npm error that names a package, network condition, permission failure, or unsupported runtime. Repeating the same command without changing that condition normally produces the same result.

Preserve package.json, package-lock.json, and node_modules. Do not edit installed package files by hand.

Inspect Only the Entry Files

The generated directory contains more than the first screen needs. Focus on four files.

index.html
src/main.jsx
src/App.jsx
src/index.css

index.html contains the browser document and root container. src/main.jsx creates the React root. src/App.jsx contains the application component. src/index.css supplies document-level styles.

The three entry files are enough to verify the first render. Leave generated configuration and package records unchanged.

Open the project directory in your editor. Opening only one source file can hide the directory context needed for imports and terminal commands.

Start the Development Server

Run the generated development script.

npm run dev

npm finds the dev script in the current package.json and starts the local Vite executable installed for this project.

The terminal prints a local address close to this one.

Local: http://localhost:5173/

Open the exact address printed by your terminal. Vite chooses another port when 5173 is already occupied.

localhost names the computer on which the browser is running. 5173 identifies the listening server process on that computer. A different computer cannot use its own localhost to reach this process.

Use another terminal for unrelated commands, or stop Vite with Ctrl+C when the development session ends.

Confirm the Browser Request

The generated Vite screen should appear. This proves several steps completed.

1. Vite started an HTTP server.
2. The browser reached its address.
3. index.html loaded.
4. The client module graph loaded.
5. React created visible DOM output.

Do not add application code yet. First prove that the editor changes the same project served by this terminal.

Replace the Starter Component

Open src/App.jsx and replace its contents with one component.

export default function App() {
  return <h1>My first React screen</h1>;
}

Save the file.

The browser should display the heading. The edit removes starter assets and interactions, leaving a small file whose output is easy to verify.

No manual page reload should be required. Vite observes the saved source, transforms it, and sends the development update to the browser.

Diagnose an Unchanged Screen

An unchanged browser after saving usually means one connection in the local setup is different from the one being edited.

Check the terminal first. The npm run dev process must still be running without a current transform error.

Check the browser address next. It must use the port printed by that process.

Check the current project directory.

pwd

Check the editor's full file path. It should end with the same project directory and src/App.jsx.

Make sure the editor actually saved the file. An unsaved marker beside the tab means Vite has no changed file on disk to observe.

Finally, check src/main.jsx and confirm that it imports App from ./App.jsx.

import App from "./App.jsx";

These checks establish one continuous path from edited source to browser output. Restarting every program before checking the paths can hide the actual mismatch.

Keep the Terminal Output Visible

Vite reports source transform and import failures in the terminal. The browser can also display an overlay. Keep both available while working.

A syntax failure in App.jsx means the dev server may still be running even though it cannot produce the newest module. The server process and the current source update have separate success states.

server running
latest module failed to transform

Repair the source error instead of reinstalling Node.js or creating another project.

Do not move on until the browser shows a clean heading and the terminal has no active error.

Avoid Global Tool Installation

This project does not need a global Vite command.

npm install --global vite

Skip that command. npm run dev uses the version installed in the project. A global version can differ from the project configuration and makes another machine harder to reproduce.

The project generator also runs through npm without a permanent global installation.

Do Not Start with Create React App

Create React App is deprecated for new applications. This project uses Vite to keep the HTML entry, source module graph, React root, and production build path visible.

No Create React App migration is needed because this is a new directory.

Save the Known Starting Point

src/App.jsx should contain only the heading component.

export default function App() {
  return <h1>My first React screen</h1>;
}

Keep Vite running while you inspect index.html, main.jsx, the DOM container, and the React root.

Lesson Check

Confirm each fact before continuing.

• The active Node.js version satisfies Vite 8.
• The terminal is inside reactbook-first-screen.
• npm install completed.
• npm run dev prints a reachable local URL.
• The browser shows the heading from src/App.jsx.
• Saving another heading changes the same browser page.

Every item describes an observed result. If one is missing, repair that step before adding more files.

Source Notes

• Vite documentation, Getting Started
• Vite release notes, Vite 8
• npm documentation, npm install
• React documentation, Build a React app from Scratch