konrad kwiatkowski - type of components in react/redux

/GrandParadePolandwww.grandparade.co.uk

Podział odpowiedzialności komponentów i ich dekompozycja w aplikacji React/ReduxStudium przypadków z projektu Sportech

Konrad Kwiatkowski, Senior Frontend Developer / Grand Parade

Co to za projekt?Jakie wymagania?


React i Redux z perspektywy architektury komponentów


Architektura komponentów - ReactBrak informacji na temat typów komponentów, podziału i ich architektury


Architektura komponentów - ReduxPropozycja podziału komponentów na:

- Prezentacyjne- Kontenery- Inne


Ogólny podział zastosowany w Sportech


Architektura komponentów- Prezentacyjne- Kontenery- Komponowane


Architektura komponentów - dodatkowa klasyfikacja- Atomowe- Abstrakcyjne- Bezstanowe (stateless, pure)- Stanowe (stateful, impure)- Wyższego rzędu


Dlaczego taki podział? Po co to jest i jak się do niego

zastosować?


Architektura komponentów- Czysty interfejs- Jeden komponent, jedna odpowiedzialność- Mniejsze komponenty łatwiej użyć ponownie lub się ich pozbyć


Konkretny problem, case study...


To nie jest TodoList

A funkcjonalność do tworzenia/przygotowania

zakładów


DataGrid● Komponent wyższego rzędu● Brak związku z danymi


DataGridKomponenty atomowe

wchodzące w jego skład


Komponent atomowy


Komponent komponowany


Komponent abstrakcyjny


Zachowanie stanu, kontener


Dostarczenie danych, komponent wyższego rzędu


Komponent ze stanem wewnętrznym


Dostarczenie danych, kontener


Finalne zastosowanie


Dzięki za uwagę!


konrad kwiatkowski - type of components in react/redux

Engineering