Project & Tooling

Create React App is deprecated

For years the default answer to “how do I start a React app?” was Create React App (CRA). That era is over: the React team officially deprecated CRA in 2025. Installing it now prints a warning pointing you to current options. Do not start new projects with it, and consider migrating existing ones.

The replacement is a fork in the road: a build tool for a client-side SPA, or a framework for anything that needs routing, server rendering, or Server Components.

Vite for a single-page app

For a client-rendered SPA, Vite is the standard: instant dev server, Fast Refresh, and a fast production build.

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

The react-ts template gives you React + TypeScript preconfigured. That’s the whole setup — no config to write.

A framework for routing, SSR, and RSC

The moment you need real routing, server-side rendering, data loading, or React Server Components, reach for a framework instead of assembling it yourself. The current recommendations from the React docs:

npx create-next-app@latest        # Next.js — App Router, RSC, SSR
npx create-react-router@latest    # React Router (framework mode) — routing + SSR

flowchart TB
  q{"Need routing / SSR /
Server Components?"}
  q -->|no, client SPA| vite["Vite
(build tool)"]
  q -->|yes| fw["Framework:
Next.js or React Router"]
  cra["Create React App"] -->|deprecated| x["do not use"]

Choosing how to start

The framework owns concerns a build tool leaves to you: nested routes, data fetching on the server, streaming, and the RSC boundary (covered in the React 19 module). For a dashboard-style SPA behind a login, Vite is plenty; for a content site or anything SEO- or server-data-heavy, a framework earns its weight.

The dev experience

Whatever you choose, these make React development pleasant:

React DevTools (browser extension) — inspect the component tree, props, state, and hooks; the Profiler shows why and how often components render (essential for the performance module).
Fast Refresh — edit a component and see the change instantly, preserving component state. Built into Vite and the frameworks.
The modern JSX transform — you no longer need import React from 'react' at the top of every file just to use JSX; the compiler injects the runtime import. (You still import hooks and APIs you use.)
Strict Mode — wrap your app in <StrictMode> in development to surface impure renders and effect bugs (the double-invoke you met in Foundations).