Aabha · Frontend foundations

React with TypeScript · Harbor Together

Worked solutions 01 · A repeatable workspace

Attempt the practice tasks first. These are explanation guides; your wording and small implementation details may differ.

A. Trace and change

The browser requests the checkpoint’s index.html, whose module script points to main.tsx. Vite transforms that source and its imports into browser-compatible modules. Checkpoint 01 calls createRoot in its entry; later checkpoints use a shared mount helper. The component supplies the heading. Node runs Vite, npm starts the named script, TypeScript checks source contracts, and React manages the rendered UI. The heading change belongs in the checkpoint component, not generated output or node_modules.

A useful evidence entry includes the actual printed local origin plus /checkpoints/01/, the edited source path, the observed heading, and npm run typecheck completing successfully. A different port is acceptable when the default is occupied.

B. Diagnose, then repair

For let title: string = 'Harbor'; title = 7;, the second assignment violates the declared string type. If the intended value is a title, use text such as ‘Harbor 7’. If it truly represents a count, use a separately named numeric variable. Changing the declaration to any removes the check rather than fixing the model. Vite transformation can succeed even when a separate type-check fails, so record both kinds of evidence. Remove the temporary faulty file after the experiment.

C. Transfer

A reproducible note says: extract the whole folder, open a terminal in the directory containing package.json, check Node against versions.html, run npm ci, run npm run dev, follow the printed URL, and open the selected checkpoint. Run npm run typecheck in a second terminal. Stop the server with Ctrl+C. If installation fails, inspect the precise message for runtime, cache-permission or network causes before changing anything. node_modules can be recreated from the manifest and lockfile; the learner’s authored files cannot.

An acceptable alternative note can include an editor’s terminal, but it must identify the working directory and not assume a paid extension or global Vite installation.