[VIDEO] Komponenty kontenerowe i prezentacyjne – Wzorce w React #1

W światowy dzień programisty dzielę się z Wami pierwszym video z serii Wzorce w React. W ramach rozgrzewki przed bardziej zaawansowaną tematyką opowiadam o wzorcach komponentów kontenerowych i prezentacyjnych.


Tematyka stosunkowo prosta i zapewne znana większości czytelników tego bloga (opisywałem ten wzorzec pokrótce w serii Pierwszy projekt w React) ale myślę, że udało mi się przekazać wszystkie kluczowe informacje w przystępnej i zwięzłej formie.

Na prostym lecz praktycznym przykładzie wyjaśniam:

  1. Jaki problem rozwiązuje ten wzorzec?
  2. Jak rozdzielić odpowiedzialność pomiędzy komponenty kontenerowe i prezentacyjne?
  3. Jakie zalety płyną z stosowania tego wzorca?
  4. Jak rozbić duży komponent prezentacyjny na mniejsze o pojedynczej odpowiedzialności?

Ponadto, na końcu materiału znajdziecie ćwiczenie, które pozwoli utrwalić przekazane przeze mnie informacje.

Odnośniki do wszystkich materiałów, o których wspominam w filmie znajdziesz w jego opisie na YT.

Będę wdzięczny za komentarze z wrażeniami :)! Na pewno są elementy, nad którymi powinienem popracować (w końcu to pierwszy mój materiał video ever). Pomóż mi je wychwycić. Oczywieżeli coś przypadło Ci do gustu, również daj znać. Motywacji przy trudnych początkach nigdy za wiele.

Bez zbędnego przedłużania, zapraszam do oglądania.


Marcin Czarkowski

Cześć! Ja nazywam się Marcin Czarkowski, a to jest AlgoSmart - blog, na którym dzielę się wiedzą o React.js, JavaScript oraz CSS.

  • Video bardzo bogate w treść. Bardzo fajnie poukładane. Widać, że masz pomysł i konsekwentnie go realizujesz! Propsy ! 🙂

    Miałbym dwie techniczne wskazówki:
    1) „Głoski dmuchane” 🙂 … „p” „b” itp. – nie wiem czy używasz pop-filtra, jeśli nie to warto w niego zainwestować – mały koszt, a poprawi jakość dźwięku (w sensie unikniesz tego efektu podmuchu)

    2) Wprowadzając podział na sub-componenty przekazujesz te same propsy w głąb…i w głąb i…w głąb 😉 To jest tzw. prop-drilling i przez niektórych uznane jest to za anti-pattern 😉 Przy takim prostym komponencie pewnie nie ma to znaczenia, ale dzięki kompozycji i polu `children` można to w bardzo łatwy sposób naprawić. Tutaj fragment kodu:

    https://gist.github.com/przemuh/be2eb9567882f6991cc6f3a0ee1db2c5

    Dzięki takiemu podejściu komponenty CharacterCard i ProfileRow nie muszą być świadome tego, jak wygląda obiekt character 😉 ({ name, image, species, gender }) i nie muszą przekazywać w głąb tych propsów 🙂

    Poza tym: SZTOS 🙂 …Za-subskrybowałem kanał i czekam na więcej 😉 Powodzenia!

    • 1. Faktycznie zabrakło pop-filtera, ale właśnie w niego zainwestowałem. Zobaczymy czy zniweluje ten defekt w kolejnym odcinku :D.
      2. Bardzo dobra sugestia. Miałem gut feeling, że można zrobić to lepiej. Rozpocznę kolejny odcinek od tej zmiany i potem polecę z kolejnym wzorcem :).

      Dzięki wielkie za świetny komentarz :)!