Setup and Your First App
The fastest way to start a React app today is Vite.
Vite gives you a local server, JSX support, and hot reload so saves show up instantly.
Create a project
You need Node.js installed. Then run this in a terminal.
The last command prints a local URL, usually http://localhost:5173.
Open it. You should see the Vite + React starter page.
What the files mean
index.html is the empty page with one root div
src/main.jsx mounts React into that div
src/App.jsx is your first component
package.json lists React and the scripts
createRoot is the modern React 18+ way to attach to the page.
StrictMode is a helper that warns you about unsafe patterns in development. It does not show extra UI.
Replace the starter with your own App
Open src/App.jsx and start tiny.
Save. The browser should update without a full refresh.
Next.js vs Vite
FoxSchools itself is a Next.js app. Next.js adds routing and server rendering on top of React.
Learn React with Vite first. The component skills transfer to Next.js later.
Tip: If npm create fails, update Node to a current LTS and try again.
Test yourself
Three quick questions made just for this lesson. Earn 10 XP per correct answer.