19. Kompozycja komponentów — children i render props

Kompozycja — budowanie z klocków

React preferuje kompozycję nad dziedziczeniem. Zamiast rozszerzać klasy bazowe, komponenty przyjmują inne komponenty przez children prop lub render props. Wzorzec children pozwala tworzyć elastyczne “kontenery” (Card, Modal, Layout) których zawartość jest dowolna.

Kompozycja to fundament React. Każdy <div> to kontener dla children. Card, Modal, Dialog, Layout — wszystkie używają tego wzorca. Zrozumienie kompozycji to klucz do tworzenia elastycznych, reużywalnych komponentów.

1. Wyjaśnić children prop i jak React przekazuje zawartość JSX
2. Opisać wzorzec “slot” — named children przez props
3. Omówić render props — funkcja jako prop zwracająca JSX
4. Porównać z dziedziczeniem OOP — dlaczego React wybiera kompozycję

1. children prop — jak JSX między tagiem otwierającym a zamykającym staje się props.children
2. Komponent kontener — Card, Modal z dowolną zawartością
3. Named slots — header, footer, sidebar jako oddzielne props
4. Render props — funkcja jako prop, dostęp do danych komponentu
5. React.Children — iteracja po children, count, map

• Struktura minimalna

1. Wstęp — kompozycja vs dziedziczenie w OOP
2. Rozdział 1: children prop — jak działa, przykłady kontenerów
3. Rozdział 2: Named slots — elastyczne layouty
4. Rozdział 3: Render props
5. Podsumowanie
6. Bibliografia

Buduj z klocków, nie z monolitów!

Pokaż że każda aplikacja React to kompozycja mniejszych komponentów. Card, Button, Modal — każdy przyjmuje children. To filozofia React.