React is the core, not the whole app
React renders components. Real apps also need a project setup, routing between pages, data fetching and caching, forms, tests and a way to deploy. Here's the map of what professionals reach for.
The usual toolbox
- Starting a project: npm create vite@latest for a single-page app, or a framework like Next.js (next course!) for routing, server rendering and APIs built in.
- Routing: React Router or TanStack Router for SPAs; frameworks use file-based routing.
- Server data: TanStack Query (caching, refetching, loading states) — or framework data loading with Suspense.
- Forms: React Hook Form plus Zod for validation.
- Styling: CSS Modules, Tailwind CSS, or component libraries like shadcn/ui.
- State: useState and context first; Zustand or Redux Toolkit for large shared client state.
- Testing: Vitest + React Testing Library (test what users see and do), Playwright for end-to-end.
- TypeScript: almost every professional React codebase uses it — you already know it!
// A component test with React Testing Library (runs in Node with Vitest)
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Counter from "./Counter";
test("counts clicks", async () => {
render(<Counter />);
await userEvent.click(screen.getByRole("button", { name: "+1" }));
expect(screen.getByText("1 plates")).toBeInTheDocument();
});