Najważniejsza rzecz w pisaniu aplikacji Reactowej to tworzenie komponentów. W tej części kursu przedstawię jak tworzyć komponenty na dwa sposoby oraz jak do nich przekazać propsy (propercje).
Komponent Reactowy
Czym jest komponent?
Komponent to funkcja, która zwraca i wyświetla nam pewną część aplikacji. Tworzenie ich to podstawowa czynność w React. Wszystko sprowadza się do podzielenia aplikacji na małe komponenty.
Widok posta na stronie można podzielić na komponenty, tak jak na powyższym obrazku. Każdy element otoczony niebieskim obramowaniem to komponent Reactowy. Natomiast cały widok posta to komponent, który opakuje mniejsze komponenty (zbierze w całość).
Po co te komponenty?
Dzielenie kodu na komponenty ułatwia pracę programiście oraz zmniejsza koszty utrzymania aplikacji. Tworząc re-używalne komponenty można wykorzystać je w innych częściach programu. Jeśli będzie potrzeba zmienić coś w danym komponencie to zmiana zostanie wykonana tylko jeden raz zamiast w X miejscach. Czas wykonania będzie krótszy, a programiście będzie łatwiej zapanować nad kodem
Tworzenie komponentu
Z pomocą funkcji
Istnieją dwa sposoby tworzenia komponentów w React. Pierwszy z nich wykorzystuje standardową funkcję JavaScriptową. Poniższy przykład komponentu zwraca HTMLa z nagłówkiem H1.
Używanie funkcyjnych komponentów jest rekomendowane przez oficjalną dokumentację (większość przykładów wykorzystuje tą składnię).
Z wykorzystaniem class
Drugim sposobem na utworzenie komponentu jest wykorzystanie klasy. Klasy zostały wprowadzone w ECMAScript 2015. Ten sam komponent nagłówka będzie prezentował się następująco:
Renderowanie komponentu
Wyświetlenie nowego komponentu w obu przypadkach będzie takie same:
Po dokonanych zmianach w aplikacji kod pliku App.js jest następujący:
Przekazywanie danych w propsach
Istotną rzeczą podczas tworzenia komponentów jest przekazywanie danych w propsach (jako parametry). Do komponentu Heading zostanie przekazana treść tytułu, żeby komponent można było wykorzystać w wielu miejscach z różną wartością.
W funkcji Heading został dodany parametr props, który jest odpowiedzialny za przekazywanie danych (propsów). W wywołaniu komponentu został dodany props title z wartością, która ma zostać wyświetlona w komponencie
Ćwiczenie
Stwórz własny komponent, który będzie otrzymywał co najmniej dwa propsy (dwie wartości przekazane do komponentu), a następnie wyrenderuj go w aplikacji.
Dodaj komentarz