Modern Web Application Engineering
Turn the completed React application into an understandable Web system by tracing each user action through state, rendering, the browser, the network, storage, build artifacts, failure, and recovery.
Components, state, and rendering models
Objective Trace one visible state transition and assign ownership to the event, transition, render, and browser effect.
Core explanation
This course begins inside the React project you already built, so the first task adds one route instead of installing another tool. A component owns one clear interface responsibility. State is the current information that may change, such as the count shown on the page. An event is a named occurrence such as a button click. A transition calculates the next state from the previous state. Rendering describes the visible interface for the current state and must not change that state. The browser host turns the returned elements into a page and delivers the click back to the event handler. The complete boundary is user intent → event → pure state transition → render → visible browser effect. Keep authoritative state in one owner and calculate derived values from it. Move work that communicates with an outside system into an event handler or an explicit effect with cleanup. The first laboratory needs only the existing loopback development command and the browser; optional diagnostic tools arrive only when a later task names and explains them.
Begin with one visible result in the project you already own
This is a systems course after React & Next.js, not another framework introduction. Reopen the completed local App Router project, create `app/system/page.tsx`, and save the complete Counter example there. `"use client"` marks the file as a Client Component because the button needs browser interaction and `useState`; the import names the Hook instead of relying on hidden global state. Start the inherited project with `npm run dev -- --hostname 127.0.0.1`, open `http://127.0.0.1:3000/system`, and expect the heading “State transition laboratory” and button text “Count: 0.” No new installation or browser developer view is part of this baseline.
Click once and expect “Count: 1.” That tiny change is useful because a learner can observe the entire boundary without a database, network request, test framework, or deployment. Stop the server with Ctrl+C when the observation is complete. If the route does not appear, check the exact path, filename, terminal error, and first browser-visible result before changing anything else. The goal is not to make many features; it is to explain one feature so precisely that its owners and evidence are unmistakable.
Name every owner in the five-step transition
User intent is what the person means to accomplish: increase the displayed count. The browser turns the physical activation into a click event. The button’s event handler owns the application response to that event. `setCount(previous => previous + 1)` describes a pure transition from the previous number to the next number; the functional form matters because React may queue updates. React then renders the component from the new state, and the browser host exposes the returned heading and button as visible HTML. The trace is user intent → event → state transition → render → visible effect.
State is authoritative information that may change and affects future rendering. Props are inputs supplied by an owner outside the component. A derived value can be calculated from existing state or props and normally should not become a second state variable. Rendering is a description, so it must not call `setCount`, write storage, start a request, or mutate a shared object. An effect is later synchronization with a system outside React, such as a subscription, timer, DOM API, or request; it needs explicit ownership and cleanup. The counter needs no effect because the click handler already owns the transition.
Use prediction, one mutation, and one fault to prove the model
Record the baseline before editing: initial text is Count: 0 and the first click produces Count: 1. Change only `previous + 1` to `previous + 2`. Predict that a fresh page still begins at 0 and the first click now produces 2, run that exact task, record the observed text, and restore `+ 1`. This mutation distinguishes initial state from transition logic: the initial value did not change, but the event’s next-state rule did.
Next remove `"use client"` while leaving `useState` in the route. Predict a framework boundary error because an interactive Hook cannot run in the default Server Component, capture the first diagnostic, restore the directive, and verify Count: 0 then Count: 1 again. As a second reasoning-only fault, imagine calling `setCount` in the component body: rendering would schedule another change, which asks for another render, so no user event bounds the loop. Restore one owner at a time and rerun the baseline; a repaired file without a final visible check is not evidence.
Expand ownership only after the first boundary is stable
Add a Reset button only after the original trace works. Both controls can share the same count state because they coordinate one concept. Increment owns the transition from the previous value to the next value; Reset owns the transition to zero. The component owns the current count and render, React owns scheduling, and the browser owns delivering events and presenting the result. Do not add a second `resetCount`, store a copied label in state, or use an effect to keep two values synchronized.
Acceptance is human-observable: the page has one heading, both buttons have clear text, keyboard focus can reach them, Increment changes 0 to 1, and Reset changes a nonzero value to 0. Record source path, start command, URL, prediction, observation, mutation, fault, repair, and cleanup. Give the file and those notes to another learner, who should reproduce the baseline and explain each arrow in the five-step trace without inspecting framework internals. Later chapters will add external data, caches, offline storage, server rendering, and recovery, but each addition must preserve this same clarity about owner, transition, visible result, and failure.