React UI-build bank
React components to build end to end: a typeahead, a data table, infinite scroll, an uploader, accessible widgets, forms, toasts and nested comments.
10 lessons
Data and async UIs
- 1UI build: typeahead with debounce and race handlingEvery write belongs to the newest request, and focus never leaves the input: the list moves under it, not into it.
- 2UI build: sortable, filterable, paginated data tableThe rows on screen are derived on every render from the given rows and three pieces of view state; the given rows never move.
- 3UI build: infinite scroll with a virtualized listThe window is arithmetic on scrollTop; the loader is a flag, a cursor and a stop: one request per page, none after the last.
- 4UI build: file uploader with progress and cancelCheck before sending, read the status when it ends, abort the right request, and never let a late event reopen a finished file.
Accessible widgets
- 5UI build: accessible modal with a focus trapA modal is a promise you test with keys: in, round, out, back, and named. A backdrop alone keeps no one in.
- 6UI build: accessible tabs and accordionTabs are one stop with arrows inside; an accordion is a row of stops. Wire both ways, and step over what is disabled.
- 7UI build: accessible star ratingFive radios, one name, one stop; arrows commit, the pointer only previews.
App patterns
- 8UI build: a form with React 19 Actions and validationEverything the form shows after a submit comes from the state the action returns, because React resets each field to its default.
- 9UI build: toast notification systemOne toast per id, the oldest on screen, the next up on dismiss, regions already there, and no timer running while someone reads.
- 10UI build: nested commentsIndex first, then link; keep orphans; key each mapped element; count the whole subtree; copy only the path.