Setting up a React project with Vite
The mental model: how React renders (2)
Before you can write a single component, your code needs to go through some transformation. JSX isn't valid JavaScript — the browser can't read it. import and export statements need to be bundled into files the browser can load. Modern syntax sometimes needs to be converted for older browsers.
A build tool handles all of this for you. You write modern React code, it produces something the browser understands.
For years the standard was Create React App (CRA). You'll still find it in older tutorials and codebases. CRA is now legacy — slow to start, slow to rebuild, and no longer maintained. The current standard is Vite (French for "fast," pronounced veet).
https://www.youtube.com/watch?v=KCrXgy8qtjM
Vite gives you:
<aside> 💡
Info
Under the hood, Vite uses native ES modules in the browser during development, which is why it starts so fast. For production builds it uses Rollup. You don't need to memorize this — Vite is a friendly wrapper around those tools plus a dev server. Just know that "fast" is the point.
</aside>
Run this in your terminal:
npm create vite@latest my-first-app -- --template react-ts
cd my-first-app
npm install
npm run dev
Vite will print a local URL — usually http://localhost:5173. Open it. You should see a running React app.
<aside> ⚠️
Warning
Don't forget the cd my-first-app step before running npm install. This is the most common stumbling block — you'll install dependencies in the wrong folder and nothing will work.
</aside>
Once the project is created, this is what you'll find:
my-first-app/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── App.tsx
│ ├── App.css
│ ├── main.tsx
│ └── index.css
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── .gitignore
A quick tour of what matters:
node_modules/ — installed dependencies. Never edit these files, never commit this folder.public/ — static assets served as-is. Favicons, images that don't go through the bundler.src/ — where all your code lives. Everything you write goes in here.src/main.tsx — the entry point. This is where React attaches to the DOM.src/App.tsx — the root component. This is where your app starts.index.html — the single HTML page your app lives in.vite.config.ts — Vite configuration. You rarely need to touch this.Open index.html. You'll find exactly one meaningful element:
<div id="root"></div>
That's it. Your entire application will render inside that one <div>. The rest of the HTML is boilerplate — the script tag at the bottom tells the browser to load your bundled JavaScript.
Open src/main.tsx:
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>
);
This file connects React to the DOM. createRoot finds the <div id="root"> element and hands it to React. From that point on, React owns that node — it renders your component tree inside it and keeps the DOM up to date.
<StrictMode> is a development-only helper. It doesn't affect the production build, but in development it warns you about common mistakes and deprecated patterns. Leave it in.
<aside> 💡
Info
The ! after document.getElementById('root') is TypeScript telling the compiler "trust me, this element exists." Without it, TypeScript would warn that getElementById might return null. You'll see this pattern in a few other places — it's called a non-null assertion.
</aside>
Open package.json and look at the scripts section:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
npm run dev — starts the dev server with HMR. This is what you'll use all day while building.npm run build — creates an optimized production build in a /dist folder.npm run preview — serves the /dist folder locally so you can test the production build before deploying.<aside> ⌨️
Hands On
src/App.tsx and change some text — anything you like.Ctrl+C), run npm run build, and look inside the generated /dist folder. Those are the files you'd upload to a hosting provider.npm run preview to serve those files locally and see what your users will see.
</aside>Your project is a single HTML page with one empty <div>. React takes over that <div> and renders everything from JavaScript. The browser never navigates to a new page — React swaps components in and out as the user interacts.
This is called a Single Page Application (SPA). It's the foundation of how React apps are structured, and it's why routing (which you'll cover in week 9) has to work differently than traditional server-rendered sites.
<aside> 🎉
Celebration
You have a working React project running locally. That's your development environment sorted. From here, everything you learn goes into src/ — and Vite handles the rest.
</aside>
The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*
Built with ❤️ by the HackYourFuture community · Thank you, contributors
Found a mistake or have a suggestion? Let us know in the feedback form.