React Mastery — Learn by Reading & Building

01 · Orientation

This single‑file guide focuses on modern React with functions and hooks. Each section gives you a tight explanation and hands‑on demo.

• Understand rendering, state, and effects.
• Manage data flow with props, context, and reducers.
• Ship accessible, fast components.

02 · JSX & Rendering

function Hello({name}){
  return <h2>Hello, {name} 👋</h2>
}
// Rendered by ReactDOM in a real app

JSX compiles to React.createElement. It must return a single parent node (wrap siblings), and you can embed expressions with {…}.

03 · Components & Props

Components are just functions from props → UI. Props are read‑only.

function Badge({children, tone='blue'}){
  return <span className={`px-2 py-0.5 rounded-full bg-${tone}-500/20 text-${tone}-200 border border-${tone}-400/30 text-sm`}>{children}</span>;
}

04 · State & setState

State triggers re‑render. Treat it as immutable; use functional updates when derived from previous state.

05 · Effects (useEffect)

Effects run after paint for side‑effects (subscriptions, fetches). Cleanup to avoid leaks.

06 · Lists & Keys

Keys must be stable and unique among siblings; avoid array index when items can be reordered.

07 · Forms & Controlled Inputs

08 · Context & Reducers

Context passes data down without prop‑drilling. Combine with useReducer for predictable updates.

09 · Refs & Imperative Handles

Refs hold mutable values that don't trigger re‑renders. Use useImperativeHandle to expose methods from a component wrapped in forwardRef.

10 · Memoization (memo/useMemo)

Memo only when profiling shows bottlenecks. Premature memoization can add complexity.

11 · Custom Hooks

Extract reusable logic into hooks that start with use.

12 · Routing (Concepts)

Client routing swaps components without full page reloads. Popular option: React Router. Core idea: map URL → component tree.

13 · Data Fetching

Use fetch inside an effect with abort on cleanup. Cache where appropriate.

14 · Suspense (concept)

Suspense lets you declaratively wait for data. In frameworks like Next.js/App Router, data fetching integrates tightly with Suspense boundaries.

15 · Patterns

• Compound Components (share state via context)
• Controlled vs Uncontrolled inputs
• Render Props / Headless UI

16 · Accessibility

• Manage focus on route/dialog open; visible focus styles.
• Use semantic elements and ARIA only when necessary.
• Announce dynamic changes with aria-live where appropriate.

17 · Testing Notes

Test user‑visible behavior, not implementation details. Prefer React Testing Library queries like getByRole.

18 · Performance Tips

• Lift state minimally; split large trees; code‑split routes.
• Defer heavy work with