library Introduced in L3

React

The dominant JavaScript library for building component-based user interfaces. The thing your AI agent reaches for unless you tell it not to.

Mindmap

hover · click to navigate
this tech depends on / used by alternative Shipyard anchor
What it is

The plain-English version

React is a JavaScript library — released by Facebook in 2013 — for building user interfaces by composing components: small, reusable pieces of UI that describe how part of the screen should look at any moment. You write what the UI should be; React figures out what to change in the browser to make it that.

Why it exists

The problem it solves

Before React, jQuery and hand-rolled DOM manipulation made large UIs into tangled state-mutation messes. React's declarative model — describe the UI given the data, let the library handle updates — made big UIs tractable. The component model became the industry's default. Today, React is one of the most-used libraries on GitHub.

What it competes with

Alternatives

AlternativeTypeWhen it wins
Next.jsmeta-frameworkThe React meta-framework. Pages, routing, server-rendering, API routes, image optimization — the things you'd otherwise wire up yourself, bundled in.
SvelteframeworkA frontend framework that compiles components down to plain JavaScript at build time. Smaller bundles, less runtime weight, beloved by developers.
Where it shows up in Shipyard

Deep links

Vocabulary

The words you'll hear

JSX
HTML-looking syntax inside JavaScript. Compiles to function calls. <div>hi</div> becomes React.createElement("div", null, "hi").
Component
A function (or class) that returns JSX. The unit of UI.
Props
Inputs to a component. Read-only.
State
A component's internal data that can change.
Hook
A function starting with use that lets components hold state or run effects (useState, useEffect).
Virtual DOM
React's in-memory representation of the UI. Compared to the real DOM to compute the minimum set of changes.
Fragment
<>...</> — group elements without an extra wrapper.
Prompting

Bad vs. good prompt for React

✕ Bad prompt
Make a list component in React
✓ Good prompt
Build a TaskList React component (TypeScript) that takes `tasks: Task[]` as a prop and renders each as a Card. Use functional components and hooks (no classes). Empty state shows '✦ No tasks yet'. Add basic keyboard navigation (up/down arrows). Keep it under 80 lines and follow our existing component patterns in src/components.

Why it works: Specifies framework variant (TS, functional), props shape, edge cases (empty state), accessibility, size budget, and codebase convention. The agent has enough to ship something that fits.

Pitfalls

What bites real teams

⚠ Stale closures in useEffect

Forgetting a dependency in the array means the effect captures old values. The lint rule react-hooks/exhaustive-deps catches this. Don't disable it casually.

⚠ Re-rendering the world

Putting state too high in the tree triggers unnecessary re-renders. Lift only as high as you need. Memoize when measurements show a problem, not before.

⚠ Forgetting key in lists

Without keys, React's reconciliation gets confused on reorder. Always pass a stable, unique key.

References

Official docs only