A tiny static site generator
The core of every static generator (Next.js generateStaticParams, React Router prerender, Astro): loop over the data and render each page to an HTML file at build time. Real tools also add the CSS, the client JavaScript for hydration and the routing.
A build tool like Vite turns your source into files a browser can run; a framework (Next.js, React Router framework mode, TanStack Start, Expo for mobile) adds routing, data loading, server rendering and deployment conventions; choose a framework when you need those, and plain Vite when a client-only app is enough.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Pick a stack for: (a) a company's internal admin dashboard, (b) a public recipe site with 10,000 recipes, (c) a habit-tracker phone app. One sentence each.
Write a loader-based route (any framework) that loads a user by id and shows their name.
Explain it without notes
What is the difference between a build tool and a framework?
Compare Next.js, React Router framework mode and TanStack Start.
When is a Vite SPA the right choice, and when do you need a framework?
How is React Native different from React on the web, and what is Expo?
Preview
Console
Nothing logged yet.Expected console output
dist/blog/hello-react.html 110 bytes
dist/blog/server-components.html 122 bytes
<!DOCTYPE html><html lang="en"><head><title>Hello React</title></head><body><h1>Hello React</h1></body></html>