Setting Up a React Project

Before you can write a single component, you need a project scaffold: a folder structure, a build tool that turns JSX into browser-runnable JavaScript, and a local dev server with fast reload. For years the default answer was Create React App (CRA), but CRA is no longer actively maintained and is slow compared to modern alternatives. Today, Vite is the recommended way to start a new React project, and it is what you'll see in current documentation, tutorials, and most new codebases.

Why it matters

React code cannot run in a browser as written: JSX has to be compiled and the modules bundled. A build tool does that, and Vite is the standard choice for new projects. Being able to create a project, start the development server and find your way around the generated files is the first step of every React job.

Vite vs. Create React App

Vite uses native ES modules during development, so it starts a dev server almost instantly and updates the browser via Hot Module Replacement (HMR) in milliseconds, even in fairly large projects. Create React App, by contrast, bundles the entire app with Webpack before it can serve anything, which becomes noticeably slower to start and to reload as a project grows. CRA also stopped receiving meaningful updates, while Vite is actively developed and now the approach recommended in React's own documentation.

Creating a New Project with Vite

Run npm create vite@latest my-app -- --template react (or the TypeScript variant react-ts) in a terminal, then cd my-app, npm install, and npm run dev. This produces a working React app with a dev server running, typically at http://localhost:5173.

The Resulting Project Structure

A fresh Vite + React project includes a small, easy-to-read set of files and folders rather than the deeply nested configuration CRA used to generate.

• index.html — the single real HTML file, at the project root, containing a <div id="root"></div> that React mounts into.
• src/main.jsx — the entry point that renders your root <App /> component into that div.
• src/App.jsx — the starting component you edit first.
• package.json — lists dependencies and defines scripts like dev, build, and preview.

Example

# Terminal
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

# Output in terminal:
#   VITE v5.x.x  ready in 320 ms
#   ➜  Local:   http://localhost:5173/

A dev server starts in a few hundred milliseconds. Opening http://localhost:5173 in a browser shows the default Vite + React starter page with a spinning logo and a counter button. Editing src/App.jsx and saving updates the page in the browser almost instantly, without a full reload.

Exercise

In a terminal, with Node.js installed, write the commands to create a new React project named my-app with Vite, install its dependencies and start the development server. Then replace the contents of src/App.jsx with a component that shows a heading.

Expected result: the browser shows the heading "Hello from React" at the local address printed by the dev server, and the page updates when the file is saved.

# TODO: create the project with Vite's react template

# TODO: go into the folder and install the dependencies

# TODO: start the development server

// src/App.jsx
// TODO: export a component that renders an h1

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

// src/App.jsx
export default function App() {
  return <h1>Hello from React</h1>;
}

Quick quiz

Interview questions