What a framework adds: data loaded before the route renders
React Router's data router running in the browser (Topic 13.5). In framework mode the same loader lives in a route module and runs on the server, and the page is server-rendered with its data.
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
loader runs for post 1
screen: Learn React