UI-patronen zijn het verschil tussen een React-app die groeit en een React-app die na sprint acht alleen de oorspronkelijke maker durft aan te raken. De module UI Patronen van NLCodeCraft Frontend Academy gaat over knoppen, formulierrijen, lege staten en tokens — niet over “mooi maken”. Mark van Leeuwen traint u om een kleine component library te bouwen die een design system kan voeden, zonder dat u morgen een intern Material-kloon moet onderhouden.

Instroom: React-basis uit onze React cursus of gelijkwaardig. CSS-fundament uit het Lab of aantoonbaar in uw werk. Wij starten niet met Storybook als u nog geen button-varianten in code kunt uitleggen. Tooling volgt het patroon, niet omgekeerd.

Tokens eerst, componenten daarna, pagina’s laatst

Kleur, ruimte, typografie en radius horen in een token-laag. Daarna composities: Button, TextField, Card, Banner. Daarna pas pagina’s die die stukken gebruiken. Wie andersom werkt, kopieert hex-codes tot het merk wijzigt. Amsterdamse merken wijzigen vaker dan u denkt.

Wij koppelen deze module aan Testing voor de interactieve primitieve: een Button zonder toetsenbordtest is onaf. En aan TypeScript: variant-unies in plaats van stringly props. Zie de TypeScript-track als u die unies nog niet vloeiend schrijft.

type ButtonVariant = "primary" | "secondary" | "danger";
type ButtonProps = {
  variant?: ButtonVariant;
  children: React.ReactNode;
  type?: "button" | "submit";
} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type">;

Eindopdracht: vijf primitieve componenten plus twee patronen, met tokens en een korte governance-zin: wie mag een nieuw variant toevoegen. Mark van Leeuwen merget geen library waarin iedereen “gewoon even een prop” toevoegt. Dat is hoe design systems sterven.

Leslocatie en bereik in Amsterdam

NLCodeCraft geeft klassikale en hybride frontend-opleidingen vanaf de Wibautstraat, op de Knowledge Mile tussen Amstel en Weesperplein. Cursisten komen uit de onderstaande stadsdelen; avondgroepen starten na kantoortijd zodat u vanuit Zuid, Noord of Oud-West kunt aansluiten zonder een extra reisdag in te plannen.

• Centrum
• De Pijp
• Oud-West
• Oost
• Watergraafsmeer
• Amsterdam-Noord
• Zuid
• Westerpark