Модуль 14 · Урок 52
React components, JSX, props і stable list keys
React UI — дерево pure components. JSX описує snapshot markup, props передають read-only data вниз, а stable domain key зберігає identity element між renders.
Від mockup до hierarchy
function BookRow({ book }: { book: Book }) { return <li><strong>{book.title}</strong></li>; }Component має одну зрозумілу responsibility, а не просто обгортає кожний DOM node. Назва починається з великої літери; render залишається pure: однакові props/state дають той самий JSX, без mutation, request або subscription.
JSX, composition і collections
JSX є syntax extension: JavaScript expression входить у {}, attributes використовують camelCase, component повертає один tree. Зберігайте semantic HTML/accessible names. Props read-only; children підтримує composition. Для reorderable list key походить зі stable domain ID, не з Math.random() і не з index.
Key не є prop
React використовує key для identity. Якщо child потребує ID, передайте його окремим prop.
Практика
Побудуйте component tree, props contract і list-key register. Перевірте reorder/filter: локальний state не має «перестрибувати» між items.
Офіційні джерела
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.