React Essentials

Embedding live data in JSX with {expressions} — in content and in attributes.

Writing a component: a function that returns JSX, and the capital-letter rule.

Nesting components inside components: the component tree and one-job-per-brick thinking.

Showing and hiding UI: ternaries, the && shortcut, early returns — and the famous 0 gotcha.

Turning arrays of data into arrays of elements with .map(), and why every item needs a key.

No new concepts — realistic read-and-predict reps over everything from Modules 1 and 2.

Props are the inputs to your components — how to pass them, read them, and why they're read-only.

The children prop for wrapper components, and default values for optional props.

Spreading props, the prop drilling problem, and a professional note on typing your props.

onClick and friends: passing handlers, the event object, and the call-on-render trap.

Why plain variables can't update the UI, and how useState gives components reactive memory.

Why three setCount calls add 1, not 3 — stale snapshots, batching, and functional updates.

Why mutation breaks React, and the immutable update patterns for arrays and objects.

Sharing state between siblings by moving it to their closest common parent.

No new concepts — reps on events, snapshots, immutable updates, and lifted state.

What side effects are, why they can't run during render, and your first effects.

The effect's watch list: when effects re-run, the infinite-loop trap, and the missing-dependency bug.

The cleanup function: stopping timers, listeners, and subscriptions before they leak.

Persisting values across renders without re-rendering, and grabbing real DOM elements.

Caching expensive computations and function identities — and when NOT to bother.

Extracting reusable stateful logic into your own use-prefixed hooks.

Routes, Route, Link, and useNavigate — a multi-page feel without page reloads.

URL parameters — one route pattern like /users/:id serving every user page.

Shared layouts with child routes, the Outlet placeholder, and index routes.

Redirecting logged-out users with <Navigate>, the replace flag, and a reusable guard component.

fetch inside useEffect: where API calls live in React, and the res.ok gotcha.

The async-inside pattern, try/catch/finally, and tracking loading + error + data.

Skeleton screens, the forgotten empty state, retry buttons, and a note on error boundaries.

When the wrong response wins: canceling stale fetches with cleanup + AbortController.

No new concepts — reps over the full fetching discipline, bugs included.

value + onChange: making React the single source of truth for an input.

Multi-field form state, one generic handler, submitting with POST, and double-submit protection.

A validate function, per-field errors in state, blur timing — and why the server must re-check.

register, handleSubmit, and formState — plus when a library beats hand-rolling.

createContext → Provider → useContext: broadcasting data to a whole subtree.

Custom provider components, guarded useAuth-style hooks, and the consumer re-render cost.

Actions, dispatch, and pure reducers — centralizing complex state transitions.

Broadcasting state and dispatch through a provider — the mini-Redux pattern, and the full decision ladder.

No new concepts — reps over Context, providers, reducers, and the state ladder.

Requirements, component tree, and the reducer — designing the task manager before coding it.

TasksProvider with fetch-on-mount, the guarded useTasks hook, and the route table.

The list page with four UI states, toggling/deleting against the API, and the validated create form.

The complete data-flow walk, the whole course in one map, and your road from here.