Setting Up React

Use Vite to scaffold a new React project locally, or jump into an online sandbox if you don't want to install anything.

4 min read Level 1/5 #react#setup#vite

What you'll learn

Scaffold a React app with Vite
Know what each generated file does
Try React without installing anything

The fastest way to start a React project today is with Vite — a tiny dev server and bundler with first-class React support.

One Command

You need Node 18 or newer. Then:

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

That gives you a running app on http://localhost:5173 with hot reload. Save a file, the browser updates.

For TypeScript, swap the template:

npm create vite@latest my-app -- --template react-ts

What Got Created

File / Folder	What it is
`index.html`	The single HTML page. React mounts into a `<div id="root">`
`src/main.jsx`	The entry point — calls `createRoot(...).render(<App />)`
`src/App.jsx`	The top-level component
`src/`	Where you’ll write your components
`package.json`	Dependencies and scripts (`dev`, `build`, `preview`)
`vite.config.js`	Vite’s config — leave it alone for now

The Entry Point

// src/main.jsx
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>
);

This is the only place you’ll touch the DOM directly. Everything else is React from here on.

No Install? Use a Sandbox

If you’d rather not install Node, paste code into one of these and press play:

Sandbox	URL
StackBlitz	`stackblitz.com/fork/react`
CodeSandbox	`codesandbox.io/s/new`
React Play	`play.react.dev`

Examples in this course are all small enough to drop into a single file.

Production Build

When you’re ready to ship:

npm run build      # writes optimized files to dist/
npm run preview    # serves the dist/ build locally

That’s it for setup. Time to write some JSX.

JSX Basics →