React: Tworzenie komponentu funkcyjnego

0:00Kiedy już wiemy do odnosi się JSX, że tak naprawdę pod przykrywką jest

0:04to metoda createElement wbudowana w React'a to możemy przyjść do tego, aby pozbyć

0:08się tej okropnej struktury i zrobić z tego coś normalnego, czyli taki

0:12podstawowy, funkcyjny komponent w React'cie. Nazywa się to komponent funkcyjny,

0:16ponieważ jest to najzwyklejsza funkcja w JavaScript'ie. Jak

0:20się pewnie domyślasz, komponenty nie wyglądają tak jak tutaj. Zresztą

0:25utrzymanie ich w dużym projekcie byłoby czymś naprawdę karkołomnym. Dlatego

0:29teraz usuniemy to wszystko i zrobimy dokładnie to samo co zrobiliśmy tutaj, tylko

0:33przy użyciu JSX'a. Stworzymy funkcję strzałkową, która zwracać będzie prostego

0:38div'a ze znacznikiem H1 i napisem

0:44Hello World w środku i, jak

0:48widzimy, nic się nie wydarzyło. Nic się nie pojawiło

0:52w naszym oknie przeglądarki, a wynika to faktu, że

0:56funkcje nie są prawidłowymi dziećmi w React'cie,

1:01a tutaj podaliśmy tylko nazwę funkcji, bez wywoływania jej,

1:05więc żeby ona pojawiła, żeby

1:09ta struktura pojawiła się w drzewku DOM, żeby to wszystko

1:13co zawarliśmy w tej funkcji zostało wyrenderowane w naszej aplikacji to mamy

1:18dwa wyjścia. Albo możemy wywołać te funkcje i widzimy,

1:23że to już działa. Wynika to po prostu z tego, że tak na prawdę

1:27nie zwracamy tutaj struktury HTML, o czym już wiesz, tylko

1:32zwracamy tutaj funkcję, więc jeśli w poprzednim przykładzie mieliśmy

1:36po znaku równa się, po prostu createElement i lecieliśmy

1:40dalej, a tutaj mamy funkcję, która zwraca nam dopiero

1:45te createElement. No,

1:50to musimy to jakoś wywołać, żeby to zostało zwrócone. Jednak to nie jest konwencja, której

1:55używa się na co dzień w React'cie, ponieważ żeby wyrenderować takie App

1:59do naszej aplikacji, używamy też znaczników JSX i to

2:04jest równe temu, co przed chwilą pokazałem. Warto to również wspomnieć o tym, że App

2:08jest takim wierzchnim komponentem, który jest zawsze

2:12na górze i który zawsze wrzucamy do metody render. Tak nazywa się

2:16ten komponent i to jest taka konwencja, która została na świecie przyjęta, więc

2:20zawsze kiedy renderujesz jakąś aplikację, to warto żeby zachować

2:24te konwencję i żeby właśnie nazywać ten komponent na samym wierzchu - App, ale,

2:29ale o ile mnie pamięć nie myli, to mieliśmy tutaj jeszcze drugi znacznik H2, który

2:37zawierał "Hello eduweb". Tylko,

2:42jak widzisz ta struktura naszego JSX'a robi się kompletnie zagmatwana

2:47i wystarczy, że dodałbym tu jeszcze jakiś jeden mały element i wszystko

2:51by się wysypało. Po prostu, nie połapali byśmy się co zawiera co, więc

2:55trzeba to wszystko przenieść na nową linijkę i w innych kursach można

2:59zobaczyć taki zapis. Jak

3:04widzisz wszystko działa. W naszej funkcji robimy nawiasy

3:08klamrowe i dopiero tutaj robimy return i zwracamy

3:13naszą strukturę, ale jeśli dość dobrze znasz JavaScript, a zwłaszcza składnie ES6

3:18to wiesz, że po strzałce mamy tak zwany implicit return, czyli

3:22nie musimy już używać tego keyword return, żeby cokolwiek zwrócić. Możemy

3:26po prostu zamienić te nawiasy klamrowe na zwykłe okrągłe i dzięki

3:31temu zaoszczędzimy trochę miejsca, a nasz komponent będzie jeszcze bardziej czytelny. Warto

3:36tylko pamiętać o tym, że jeśli zrobimy z tego wyrażenie blokowe, czyli takie gdzie użyjemy nawiasów klamrowych,

3:41to niestety nic tam tego nie wyjdzie, ponieważ wtedy

3:46musielibyśmy to zwrócić w tym wyrażeniu blokowym. Ostatnią

3:50rzeczą, którą należy zrobić nasze komponenty były identyczne z tym co zrobiliśmy wcześniej,

3:54to musimy dodać im odpowiednie props'y. Będzie to className, mainHeader

4:03oraz secondaryHeader. Jak

4:09zerkniemy sobie do naszego inspektora, to zobaczymy, że nasze elementy

4:13mają dokładnie te same klasy. Jak widzisz, tworzenie

4:17komponentów funkcyjnych w React'cie jest bardzo proste i na pewno

4:21łatwiejsze w utrzymaniu później jak nasza struktura aplikacji się

4:26nieco rozwinie, niż ta ogromna struktura React createElement, którą pokazywałem

4:30poprzedniej lekcji. Od przygotowania takiej podstawowej struktury aplikacji, dzieli

4:34nas tylko jeszcze jeden krok, ponieważ trzymanie tego komponentu w pliku index.js

4:39nie jest do końca rozsądne. Lepiej to przenieść do osobnego pliku, ponieważ tak

4:43działa React, że każdy komponent trzymamy zazwyczaj w osobnym pliku. To jest taka

4:47dobra praktyka, która podnosi czytelność aplikacji, więc uporządkujmy

4:51ten projekt trochę w następnej lekcji, a później przejdziemy do budowania

4:56pierwszej prawdziwej aplikacji w React'cie. Do zobaczenia w

5:00następnej lekcji.