Chapter 4: Installation

Core Idea

React was designed for gradual adoption — you can try it with zero install (Sandpack/CodeSandbox/a single HTML file), then graduate to a full framework, a from-scratch build, or drop it into an existing non-React page, depending on how much of your stack you want it to own.

Key Concepts

• Try React: no install needed — online sandboxes (CodeSandbox, StackBlitz, CodePen) or a single downloadable HTML file cover exploration.
• Creating a React App: the recommended path for new apps — use a full-stack framework (Next.js, React Router v7, Expo).
• Build a React App from Scratch: for constraints frameworks don't serve — pick your own build tool, router, data-fetching, and code-splitting story.
• Add React to an existing project: incremental adoption into a non-React app or website, including React Native into an existing native mobile app.
• Create React App is deprecated. Don't recommend it; the ecosystem has moved to Vite/framework-based setups.

Code Examples

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return <Greeting name="world" />
}

• What it demonstrates: the minimal shape of a React component — this is literally the "try it in a sandbox" starter snippet from the docs.

Key Takeaways

1. This page is a router, not a tutorial — it exists to send you to one of three next chapters based on your situation (new app → framework; special constraints → from scratch; existing non-React app → incremental adoption).
2. Node.js is required for any real local development, even though zero-install sandboxes exist for trying React itself.
3. Never suggest Create React App for a new project — it's officially sunset.

Connects To

• Ch 5 (Add React to an Existing Project): the incremental-adoption path.
• Ch 6 (Build a React App from Scratch): the DIY-framework path.
• Ch 7 (Creating a React App): the recommended-framework path.