Props czyli atrybuty w React.js

1. React.js: Wprowadzenie do kursu od podstaw
2. Poznaj React.js
3. Pierwszy komponent w React.js
4. Props czyli atrybuty w React.js
5. Podział na komponenty w React.js
6. Klasy jako komponenty React.js
7. Interakcja z komponentami React.js
8. Stan komponentów React.js
9. State w React.js 2
10. Metody cyklu życia komponentu w React.js
11. React.js w przykładach: filtrowanie statycznej listy
12. Tworzenie aplikacji React.js dzięki create-react-app
13. React.js na GitHub Pages dzięki create-react-app
14. Testowanie aplikacji React.js — podstawy Enzyme
15. Testowanie React.js w Enzyme — props, state i interakcje
16. Poprawne bindowanie funkcji w React.js
17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
18. Komunikacja pomiędzy komponentami w React.js
19. Komunikacja z API w React.js
20. Formularze w React.js — kontrolowane komponenty
21. Formularze w React.js — niekontrolowane komponenty
22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
23. TDD w React.js z pomocą react-testing-library
24. Flux i Redux: globalny store i jednokierunkowy przepływ danych
25. React + Redux — kurs: wprowadzenie i podstawy
26. React + Redux — filtrowanie listy, proste selektory
27. Projektowanie komponentów: Presentational & Container Components
28. Asynchroniczność w Redux: redux-thunk
29. Kiedy używać state, a kiedy Redux?
30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
31. Leniwe ładowanie komponentów w React dzięki import
32. Higher Order Reducers — Redux i powtarzanie kodu
33. React Hooks — wprowadzenie i motywacja
34. React Hooks: useState, czyli stan w komponentach funkcyjnych
35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
36. React Hooks: useEffect — efekty uboczne w komponencie
37. React Hooks a żądania do API
38. useReducer — przenoszenie logiki poza komponent
39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami
40. Wady React Hooks
41. React Hooks: Piszemy własne hooki!

W tej części nauczysz się parametryzować komponenty w React.js. Poznasz pojęcie „props” oraz dowiesz się do czego one (te „propsy”) służą.

To co zrobiliśmy do tej pory było spoko, ale przecież nie będziesz tworzyć nowego komponentu zawsze gdy będziesz chciał(a) wyświetlić inny tekst w aplikacji, prawda? Wyobraź sobie, że masz do zaprojektowania popup, w którym będzie wyświetlony tytuł oraz tekst. Za moment to zaimplementujemy!

Projekt

Zacznijmy od zaprojektowania kodu takiego modala. Będzie to dosłownie kilka prostych linii HTML:

<div>
  <dialog open>
    <h1>Tytuł</h1>
    <p>Treść</p>
  </dialog>
</div>

Nic skomplikowanego. dialog to element wbudowany w HTML5. Następnie zamieniamy taki kod na komponent, czyli tworzymy funkcję, która zwraca JSX:

function MojKomponent() {
  return (
    <div>
      <dialog open>
        <h1>Tytuł</h1>
        <p>Treść</p>
      </dialog>
    </div>
  );
}

Tym sposobem Twoim oczom powinien się ukazać taki oto piękny efekt:

Props w React.js

Niestety teraz aby zmienić tekst, musimy edytować kod samego komponentu, a to jest mało praktyczne. Czy można jakoś sparametryzować to co wyświetla komponent? Tak! Używając tzw. propsów 🙂

Do tej pory komponentu używaliśmy w taki sposób: <MojKomponent />. Czyli jest to tak jakby element. A czy możemy dodać tutaj jakieś atrybuty? Właśnie tak! To dokładnie będą nasze propsy. Props to atrybut. Podajmy więc tytuł i treść: <MojKomponent title="Tytuł" content="Treść" />. Czy to już? Niestety nie. Teraz musimy jeszcze jakoś się odwołać do tych propsów i wyświetlić.

Propsy to argumenty

Propsy do komponentów przekazywane są po prostu jako argumenty. A konkretnie: Jeden argument, który jest obiektem. Czy mogłoby być prościej? Chyba nie 🙂 Funkcja przybiera taką postać:

function MojKomponent({ title, content }) { … }

Wyświetlanie

Jak teraz wyświetlić zawartość takiej zmiennej w JSX? Jest to również bardzo proste. Wystarczy skorzystać ze składni {nazwa} — i to wszystko!

Ostatecznie otrzymujemy taki kod:

function MojKomponent({ title, content }) {
  return (
    <div>
      <dialog open>
        <h1>{title}</h1>
        <p>{content}</p>
      </dialog>
    </div>
  );
}

Ostateczny efekt

Teraz już nie pozostaje nic innego jak wyrenderować ten komponent. Podobnie jak dotychczas:

ReactDOM.render(
  <MojKomponent
    title="I co, duma?"
    content="To było prostsze niż by się mogło wydawać, prawda?"
  />,
  document.getElementById("app")
);

Domyślne propsy

Co się wydarzy gdy nie podasz jakiegoś propsa i spróbujesz go wyświetlić? Na szczęście nic złego. Zostanie potraktowany jak pusty string "" i nic się nie pokaże. Lepsze to niż wyświetlenie użytkownikom np. undefined, prawda? 🙂 Ale na pewno nie idealne! Właśnie dlatego możemy podać domyślne propsy.

Najprościej możesz to zrobić korzystając ze składni ES2015, z której już i tak korzystamy 🙂 Do argumentów można dopisać domyślne wartości. Po znaku = po prostu podajemy stringa, który ma się wyświetlić gdy danego atrybutu na komponencie nie ma:

function MojKomponent({ title = "Modal", content }) { // tutaj podajemy domyślne propsy
  return (
    <div>
      <dialog open>
        <h1>{title}</h1>
        <p>{content}</p>
      </dialog>
    </div>
  );
}

Teraz przy próbie wyrenderowania <MojKomponent /> zamiast tytułu pokaże się napis „Modal”, a w miejsce treści nie pokaże się nic (pusty element <p>).

Demo

See the Pen Props czyli atrybuty w React.js by Michał Miszczyszyn (@mmiszy) on CodePen.

Co dalej?

W kolejnej części nauczysz się jak dzielić aplikację na komponenty. Rozpoczniesz też budowę „prawdziwej” aplikacji! Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie śledź mnie na Facebooku i zapisz się na newsletter.

Ćwiczenie

Ćwiczenie: Zrób eksperyment z propsami. Spróbuj przekazać zamiast stringa kolejno: liczbę, obiekt, tablicę i funkcję. Co można z nimi zrobić? Czy da się przekazać tam HTML? Napisz w komentarzu!