React Get Started

To start a React project, you need Node.js and a build tool. In this tutorial we use Vite.

Step 1: Install Node.js

React projects use Node.js and its package manager npm to install libraries and run the development server.

Download the LTS version from the official Node.js website and install it. Then open a terminal (Command Prompt, PowerShell or the terminal in VS Code) and check:

Example

bash

node -v
npm -v

Output

v24.11.0
11.6.1

Your version numbers may be different. Any recent LTS version is fine.

Step 2: Create a Project with Vite

Vite is a fast tool that creates and runs modern front-end projects. Run this command in the folder where you keep your projects:

Example

bash

npm create vite@latest shop-app -- --template react

This creates a folder called shop-app with a ready React project. If you like TypeScript, use --template react-ts instead.

Older tutorials use create-react-app. It is no longer recommended for new projects. Use Vite or a framework such as Next.js.

Step 3: Install and Run

Example

bash

cd shop-app
npm install
npm run dev

Output

  VITE ready in 412 ms

  ➜  Local:   http://localhost:5173/

Open http://localhost:5173/ in your browser. You will see the Vite and React starter page. Keep the terminal open: while it runs, every time you save a file the browser updates on its own.

To stop the server, press Ctrl + C in the terminal.

The Project Files

File or folder	What it is for
`index.html`	The single HTML page. It has a `<div id="root">`
`src/main.jsx`	The starting point. It puts your app inside `#root`
`src/App.jsx`	The main component. You will edit this first
`src/App.css`, `src/index.css`	Styles for the starter page
`public/`	Files copied as they are, like a favicon
`package.json`	The project name, scripts and installed libraries
`node_modules/`	Installed libraries. Never edit or upload this folder

How the App Starts

Open src/main.jsx. It looks like this:

Example

jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

createRoot connects React to the <div id="root"> in index.html
render shows the App component inside it
StrictMode adds extra checks during development to help you find mistakes

Your First Change

Replace everything in src/App.jsx with this:

Example

jsx

function App() {
  return (
    <div>
      <h1>Ali's Book Shop</h1>
      <p>Welcome! New books arrive every Monday.</p>
    </div>
  );
}

export default App;

Save the file. The browser shows:

Output

Ali's Book Shop
Welcome! New books arrive every Monday.

Building for the Web

When your app is ready to put online, run:

Example

bash

npm run build

Vite creates a dist folder with small, optimized files. You upload this folder to a hosting service.

Exercise

Which command starts the Vite development server?

npm start servernode App.jsxnpm run devnpm run build