Skip to content

Unit 4 · Visual components

Real apps are built from reusable pieces. You create your own components, test them, document them with Storybook and use them in your project.

Learning outcome Hours Term
RA3 — Creates visual components, evaluating and using specific tools. 18 1st

What you will learn

  • Identify tools to design and test components
  • Create visual components
  • Define their methods and properties, with default values
  • Decide which events a component responds to and link actions to them
  • Write unit tests for your components
  • Document and package the components you create
  • Build applications whose interface uses your components

Lessons

  1. Storybook — why copy-paste does not scale, the unit's five tools, installing Storybook, and a first tokenised Button with stories
  2. Props and defaults — required and optional props, defaults taken from Figma's default variant, ...rest, JSDoc, Controls, and the undefined vs null trap
  3. Methods, snippets, events — callback props, snippets with parameters and fallbacks, exported methods with bind:this, $bindable, and how to choose between them
  4. Unit tests — Vitest, jsdom and Testing Library setup, arrange-act-assert, queries by role, vi.fn(), fake timers, and making a test fail on purpose
  5. Visual tests and docs — Playwright screenshots of stories, baseline/actual/diff, when to update snapshots, autodocs from JSDoc, MDX pages, and static Storybook
  6. Packaging with npm — the route from src/lib to a tarball, the package.json label, reading the listing, installing from a .tgz, and semantic versioning
  7. Workshop and revision — component inventory, integrating components into your app, a timed rehearsal with rubric, a revision map, and how to approach the exam