Your first React app with Vite

Show me: setting up the project

Vite (pronounced “veet,” French for “fast”) is a tool that prepares a ready-made React project skeleton for you. Open the terminal and move to where you want the project to live (like your Desktop):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite might ask you something – confirm with Enter. Then:

cd my-react-web
npm install
npm run dev -- --port 3901

npm install downloads everything the project needs (it takes a moment – React and its helpers get downloaded into the node_modules folder).
npm run dev -- --port 3901 starts the development server. The terminal will show the address http://localhost:3901. Open it in your browser.

Do you see a spinning logo and the heading “Vite + React”? Congratulations – your first React app is running! 🎉

💡

What is localhost? A “server” running only on your computer. Only you can see it – it’s your private testing ground. And the best part: when you change the code and save, the page refreshes itself instantly. No more endless F5!

A tour of the project

Open the my-react-web folder in VS Code (File → Open Folder). It looks like a lot of files, but only three matter to you right now:

File	What it is
`index.html`	the only HTML on the whole website – almost empty, just a `<div id="root">`
`src/main.jsx`	the starter: takes the app and inserts it into that div
`src/App.jsx`	the main component – this is where you’ll write code
`src/App.css`	styles – plain CSS, just like you know it

Ignore the rest for now (never open or delete node_modules, package.json is a list of the project’s packages).

Your first change to the code

Open src/App.jsx. Delete everything and write:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Save – and the page in the browser changed on its own. Here’s what you’re looking at:

The App component is a function that returns HTML (this notation is called JSX).
{name} – curly braces insert JavaScript into HTML. Anything: a variable, a calculation {2 + 3}, even a condition.
export default App – “I’m offering this component to other files” (main.jsx is the one that takes it).

JSX has two quirks you’ll get used to: instead of class, you write className (class is a reserved word in JavaScript), and a component must return one wrapper element (that’s why there’s a <div> around everything).

Your turn 💪

Set up the project following the guide and get it running.
Edit App.jsx: a heading with your name, a paragraph about what you’re building, and a variable age that you display in the sentence I am {age} years old.
Deliberately delete a closing tag and see what the error looks like – Vite shows it right in the browser, with the line number. Then fix it.
Stop the server (Ctrl+C in the terminal) and start it again (npm run dev -- --port 3901) – to get the whole cycle under your fingers.

✅

Check yourself: The project runs on localhost, you can stop and start it, and when you edit App.jsx and save, the browser redraws itself. The developer’s cycle is spinning!

What to take away from this lesson

npm create vite@latest sets up a project, npm install downloads packages, npm run dev starts localhost.
You write code in src/App.jsx: a component is a function that returns JSX, {} inserts JavaScript into HTML.
In JSX: className instead of class, always one wrapper element.

Your first React app with Vite

This lesson is part of a paid level

Show me: setting up the project

A tour of the project

Your first change to the code

Your turn 💪

What to take away from this lesson