Set Up React with Vite: Your First Project Step by Step

Before you write React, you need a place to write and run it. In this lesson you will install the tools, create a new project and look at what each file does. After this lesson you will have a working React app on your computer that updates the moment you save a file.

What you need

• Node.js (version 20 or newer). It lets JavaScript run on your computer, and it comes with npm, a tool that downloads packages.
• A code editor. VS Code is free and a very popular choice.
• A browser such as Chrome, Edge or Firefox.
• A terminal. On Windows you can use PowerShell or the terminal inside VS Code. On Mac and Linux use the Terminal app.

To check Node.js, open the terminal and type the commands below. Each should print a version number. If the command is not found, install Node.js from its official website and open a new terminal window.

node --version
npm --version

What is Vite?

Writing React needs a build tool. Browsers do not understand JSX, and your code is split across many files. A build tool turns your files into something the browser can run, and gives you a fast development server. Vite (say “veet”) is the tool most people use today. It starts in a second, and when you save a file the browser updates without a full reload. This is called hot reloading.

Older tutorials may tell you to use Create React App. It is no longer the best choice for new projects, so we use Vite.

Create the project

In the terminal, go to the folder where you keep your projects and run this command. It asks a few questions. Choose React as the framework and JavaScript as the language.

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

npm create vite@latest my-first-app makes a new folder with the starter files. npm install downloads the packages the project needs into a folder called node_modules. npm run dev starts the development server. The terminal shows an address such as http://localhost:5173. Open it in your browser and you will see the Vite and React starter page with a counter button.

A tour of the folders and files

Open the project in VS Code. You will see a few files and folders. This is what matters:

• `index.html`: the one page of your app. It has an empty <div id="root"> and a script tag that loads your code. React draws everything inside that div.
• `package.json`: the list of packages and the scripts like dev and build.
• `src/main.jsx`: the front door. It tells React to draw your App component inside the root div.
• `src/App.jsx`: your first component. This is where you will start writing.
• `src/App.css` and `src/index.css`: styles.
• `public/`: files that are copied as they are, such as the site icon.
• `node_modules/`: the downloaded packages. Never edit it and never put it in Git.

Here is main.jsx. It is short, and it is worth understanding line by line:

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

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

• import ... from brings code from another file or package. We bring in React tools and our own App.
• createRoot connects React to the real element with the id root in index.html.
• .render(...) tells React what to show. We show <App />.
• StrictMode is a helper that gives extra warnings while you develop. It does nothing in the final site. In development it runs some code twice on purpose, to help you find mistakes.

Make your first change

Open src/App.jsx, delete everything in it, and write this simple component instead:

function App() {
  return (
    <main>
      <h1>My first React app</h1>
      <p>I am learning React with simple steps.</p>
    </main>
  );
}

export default App;

Save the file. The browser changes at once, with no reload. Try changing the words, and watch the page follow. That quick feedback is why Vite is nice to learn with.

Notice export default App. It makes this function available to other files, and main.jsx imports it. Each component usually lives in its own file, and the file name matches the component name.

The scripts in package.json

• `npm run dev` starts the development server with hot reloading.
• `npm run build` makes the final, small, fast files in a folder called dist. You upload these when you publish your site.
• `npm run preview` serves the dist folder locally, so you can test the real build.
• `npm run lint` (if present) checks your code for common mistakes with ESLint.

Useful editor and browser tools

• React Developer Tools is a free browser extension. It adds two tabs to the browser tools: Components and Profiler. You can click a component and see its props and state. It is very useful for finding why something is not showing.
• ESLint warns you when you break a rule, for example when you forget a key in a list.
• Prettier formats your code so it looks the same every time. Many people turn on “format on save” in VS Code.

Common problems and quick fixes

• “npm is not recognised”: Node.js is not installed, or the terminal was open before you installed it. Close it and open a new one.
• Blank page: open the browser console (press F12) and read the first red error. It usually names the file and line.
• “Failed to resolve import”: the file path or the file name has a typo. Paths are case-sensitive on many systems, so app.jsx and App.jsx can be different files.
• Port already in use: Vite will choose the next free port, such as 5174, and show it in the terminal.
• Changes not showing: check that you saved the file, and that the file you edit is the one main.jsx imports.

What happens when you run npm run dev?

It helps to know what is going on behind the scenes, so the tool does not feel like magic. When you run the command, Vite starts a small web server on your computer. When your browser asks for index.html, Vite sends it. The page then asks for main.jsx. Vite turns your JSX into plain JavaScript on the fly, and sends that to the browser. It does the same for every file the browser asks for. Because it only works on the files that are needed, it starts in a moment even for big projects.

When you save a file, Vite tells the browser which module changed, and the browser swaps just that piece. This is called hot module replacement. If you keep a counter at 7 and change the colour of a heading, the counter often stays at 7. That saves a lot of time every day.

Your task

1. Create a new Vite React project and run it in the browser.
2. Replace the content of App.jsx with your own heading and a short paragraph about yourself.
3. Create a new file src/Footer.jsx that exports a Footer component, then import and use it inside App.
4. Run npm run build and look inside the dist folder.

How to check it worked

• The browser shows your own heading without a reload when you save.
• The footer text appears under your paragraph.
• npm run build ends without errors and makes a dist folder.

Summary

• Install Node.js, create a project with npm create vite@latest, run npm install, then npm run dev.
• index.html has the root div, main.jsx connects React to it, and App.jsx is your first component.
• Use npm run build to make the files you publish.
• Install React Developer Tools. It helps you see props and state.