React Tutorial: Tic-Tac-Toe

One tic-tac-toe board, and by the end of it you understand why React works the way it does. The React team rebuilt this tutorial for react.dev and it remains the fastest honest introduction to the library — no build tooling required, since you can run the whole thing in CodeSandbox if you'd rather not install Node.

The structure is four stages: setup, an overview of components and props, completing the game, and then adding time travel. That last stage is the one that earns the tutorial its reputation.

What it teaches

• Components and JSX, and how a board decomposes into squares
• Props, and passing data down
• State with useState, and event handlers
• Lifting state up — the single most useful idea in the tutorial
• Immutability, and why you copy an array instead of mutating it
• Keys in lists, taught in context rather than as a warning
• Move history and jumping back to a previous game state

Why time travel is the point

Undo is the reason immutability is worth the bother, and this tutorial is one of very few that makes you feel it rather than just asserting it. You store each board as a snapshot, and suddenly rewinding the game is nearly free. Most beginner React material tells you not to mutate state and leaves it there; this one gives you the payoff in the same sitting.

Who it's for

Anyone with JavaScript who wants React explained through building rather than reading. React's own docs say no prior React knowledge is needed, and that's accurate. Skip it if you're new to programming — the tutorial assumes comfort with arrays, map, slice and callbacks, and it will not slow down for you. Skip it too if you prefer concepts in order; react.dev's Describing the UI path exists for exactly that reader and the docs say so.

Our take

Close to the best short tutorial in front-end teaching, with one real limitation: it is a single-file toy. There's no routing, no data fetching, no effects, no forms, no styling worth the name, and no discussion of how any of this scales past one component tree. You will finish confident and then discover that a real app's hard parts — server state, async, cache invalidation — weren't in the box. Do it, then go straight to the main Learn section rather than starting a project.