Setting Up a React Project — React Tutorial

The fastest way to start a modern React project is Vite, which replaced Create React App as the standard scaffolding tool — it's faster in dev (native ES modules, no bundling on every save) and has less configuration overhead.

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

This scaffolds a minimal React project and starts a dev server, usually at http://localhost:5173, with hot module replacement so your changes show up instantly without a full page reload.

What Vite generates

my-app/
  index.html
  package.json
  vite.config.js
  src/
    main.jsx
    App.jsx
    App.css
    index.css

index.html is the real entry point — unlike older setups, it's not hidden away in a public/ folder. It contains a single <div id="root"></div> and a <script type="module" src="/src/main.jsx"> tag.

src/main.jsx is where React actually attaches to the page:

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

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

createRoot takes the DOM node from index.html and hands React control of everything inside it. From here on, <App /> and everything it renders is managed entirely by React — you generally never touch the DOM directly again.

src/App.jsx is your first real component, and the one you'll spend most of this course editing.

JSX file extensions

Files containing JSX use a .jsx extension (or .tsx for TypeScript). This isn't just convention — Vite's build tooling uses the extension to decide whether to run the JSX-to-JavaScript transform on a file, so a .js file with JSX in it will fail to build.

Where TypeScript fits

Vite also ships a react-ts template (--template react-ts) that scaffolds the same structure with TypeScript configured out of the box. Everything in this course works the same way in either — the difference is just whether props and state get type annotations.

With the project running, the next lesson looks at JSX itself: the syntax you saw in App.jsx and what it actually compiles down to.

What Vite generates

my-app/ index.html package.json vite.config.js src/ main.jsx App.jsx App.css index.css

src/main.jsx is where React actually attaches to the page:

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

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

src/App.jsx is your first real component, and the one you'll spend most of this course editing.

Where TypeScript fits

With the project running, the next lesson looks at JSX itself: the syntax you saw in App.jsx and what it actually compiles down to.