React Application Development

Component Thinking: Breaking a UI into Pieces

Before any JSX or syntax, the actual skill React rewards: decomposing an interface into small, single-purpose, reusable pieces.

JSX and Rendering: UI as an Expression

JSX is not magic markup — it's syntax sugar for plain function calls. Understanding the function calls it compiles to demystifies almost everything that confuses beginners about it.

Props: Passing Data Down, One Way

Props are how a parent configures a child — read-only, one direction, always. Understanding why that constraint exists prevents an entire category of confusing bugs.

Handling Events in React

How a click becomes a function call: passing handler functions as props, and the difference between calling a function and passing a reference to one.

State: Giving Components Memory

Why a plain variable doesn't survive a re-render, and what useState actually does underneath — built by hand, once, so it stops feeling like magic.

Conditional Rendering, Lists, and Stable Keys

Rendering different UI based on a condition, rendering a list from an array, and the one rule about list keys that prevents real, hard-to-diagnose bugs.

Controlled Forms and Validation

A controlled input keeps React's state as the single source of truth for form data. Build a real, validated signup form locally, with a genuine React project running on your own machine.

Loading, Empty, Error, and Success States

Every piece of asynchronous UI has at least four states. Designing for all four from the start — not just the happy path — is what separates a real component from a demo.

Effects: Synchronizing with the Outside World

useEffect exists to synchronize a component with something outside React — not as a general-purpose "run this after render" hook. The dependency array is the exact algorithm behind when it re-runs.

Fetching Data: Races, Stale Responses, and Cleanup

The most common real bug in data-fetching components: a slower, earlier request's response arriving after a faster, later one, silently overwriting the correct data. Build a real fetch-driven component locally.

Composition and Custom Hooks

Two ways to reuse logic in React: composing components together, and extracting stateful logic into a custom hook. Knowing which tool fits which problem.

Context, State Ownership, and Project Organization

Where should a piece of state live? Context solves prop drilling for genuinely shared state — but reaching for it as a default answer creates its own maintenance problems.

Accessibility and Testing React Components

Two disciplines every production component needs: making sure everyone can actually use it, and proving it works with more than a manual click-through.

Performance, Error Handling, and Maintainable Architecture

Memoization, error boundaries, and refactoring an oversized component into a maintainable structure — brought together in a real local refactor of a growing project.