Tworzenie komponentów React – Kurs React – cz. 2

Tworzenie komponentów - Kurs React - cz. 2

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.

Przykład podziału na komponenty Reactowe

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:

React - simple app in chrome
React – wyrenderowany komponent Heading

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

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *