React: Refactoring komponentu

0:00Cześć! W poprzedniej lekcji pokazałem ci co możemy zrobić, żeby zmapować elementy

0:04naszej tablicy, do komponentu, żeby iterować po każdym

0:08elemencie naszej tablicy, po każdym obiekcie, który znajduje się w tej tablicy i

0:12wyciągać z niego te dane, których potrzebujemy, ale tę lekcję poświęcimy na to, żeby

0:16nasz kod stał się jeszcze lepszy, jeszcze bardziej czytelny. Właśnie teraz pokażę ci,

0:20jak możemy dokonać refaktoringu. Jednym ze sposobów, żeby na przykład ulepszyć

0:24ten komponent, byłaby destrukturyzacja props'ów, które podajemy,

0:28czyli w tym miejscu usunęlibyśmy item i wyciągnęlibyśmy

0:34te wartości, właśnie z tego item, ale przy użyciu destrukturyzacji, znanej

0:39ES6. czyli podając nasz parametr, w

0:43tym miejscu, podajemy po prostu nazwę rzeczy,

0:47które musimy wyciągnąć z tych klopsprops'ów. Okej, jak widzisz wszystko działa. Wyciągnęliśmy

0:51sobie te zmienne tutaj, do nawiasów, gdzie podajemy parametry, ale

0:55pewnie widzisz to samo, co ja, czyli że podajemy tak naprawdę te same nazwy props'ów

1:00i te same nazwy zmiennych do tych props'ów, czyli mamy name, name, description,

1:04description, image, image i właściwie różni się tylko twitterLink. Łatwo

1:08możnaby było to usprawnić, żeby nie podawać tych wszystkich rzeczy w tym miejscu, tylko

1:12podać cały obiekt, który znajduje się pod hasłem item,

1:17bo tak naprawdę item zabiera wszystkie te cztery rzeczy, więc dlaczego mielibyśmy

1:21go nie podać tutaj. I tutaj również JavaScript przychodzi nam z pomocą, bo

1:25mamy przecież tak zwany Spread Operator, który pozwala nam rozpłaszczyć,

1:30jakby rozsmarować, jakiekolwiek props'y, jakiekolwiek zmienne,

1:34jakiekolwiek rzeczy po obiekcie, czy też po tablicy,

1:38którą podajemy. Tak naprawdę, w takim czystym JavaScript'cie zazwyczaj robi się to po tablicach, ponieważ ta

1:43wersja po obiektach jeszcze nie jest do końca wspierana. Natomiast twórcy React'a uwzględnili

1:48to, że możemy użyć obiektu. Użyć spread operator, a następnie

1:52rozsmarować nasze props'y, w taki sposób. Nie wiem dlaczego zawsze

1:56w polskim używam czasownika rozsmarować, ale spread zawsze kojarzy mi z takim właśnie,

2:00rozciąganiu jakieś Nutelli po kanapce, na przykład i z tym kojarzą mi się też właśnie

2:04te props'y, które jakby rozciągamy po całym

2:08naszym komponencie, bez deklarowania konkretnych kawałków, tylko

2:12tak właśnie wszystko gładko. I teraz jak sobie wyjdziemy do tego ListItem,

2:17to mamy podobną sytuację. Mamy mnóstwo

2:21props'ów, które moglibyśmy zastąpić. Jedyna rzecz, którą teraz musimy zrobić,

2:25to zrobić tutaj twitterLink, ale

2:31zanim usprawnię ten komponent, to chcę Ci jeszcze przypomnieć, skąd się tutaj

2:35w ogóle wzięliśmy. Co tutaj się stało, bo zdaję sobie sprawę, że łatwo się w tym

2:39wszystkim pogubić. Mamy tutaj plik twitterAccounts, z którego eksportujemy

2:44sobie tablice. W tej tablicy mamy konkretne zmienne,

2:49a tak naprawdę klucze, do których przypisane mamy wartości. Mamy

2:55image, name, description i twitterLink. Te nazwy musimy zapamiętać, ponieważ

3:00będziemy się do nich odwoływać właśnie w tym ListItem. W międzyczasie jednak

3:04zanim przejdziemy do ListItem, mamy ListWrapper, który jest rodzicem komponentu ListItem

3:09i importuje właśnie, do siebie wszystkie te obiekty z

3:14naszej tablicy, a następnie iteruje po nich, przy użyciu funkcji map. Funkcja

3:19map sprawdza, ile mamy tych obiektów, a następnie każdy z

3:23tych obiektów wypluwa nam w takiej postaci, takiego item'u, do

3:27którego mamy dostęp, ale który tym miejscu rozsmarowujemy

3:31po naszym komponencie, przy użyciu spread operator. Tak więc kiedy już

3:35wszystkie te elementy z naszego obiektu, czyli wszystko to zostanie

3:40podane w tym miejscu, możemy przejść do naszego ListItem, gdzie

3:45w końcu możemy odwołać się do tych nazw, które pierwotnie mieliśmy właśnie

3:49w twitterAccounts, czyli do image, name, description i twitterLink. Stąd

3:54wzięły się te nazwy. Natomiast props wziął się stąd, że podaliśmy

4:00tutaj cały obiekt i on jest tym props'em. I w taki

4:04sposób, odwołujemy się do niego w naszym komponencie dziecku. Podobnie

4:09jednak jak przed chwilą, możemy się pozbyć wszystkich tych props'ów w tym miejscu i zdestrukturyzować

4:18je używając klamer. Żeby

4:25jeszcze podnieść czytelność naszego kodu, to możemy zrobić coś takiego. Okej,

4:30rozbiliśmy to sobie na linijki. Elementy, które dostawały więcej niż

4:34jednego props'a, mają teraz też kilka linijek. Wtedy

4:38łatwiej czytać te wszystkie komponenty. Wszystkie elementy w naszym DOM'ie. I została

4:43taka jedna bardzo mała sprawa, ale niezwykle istotna na dalszych etapach

4:47rozwoju aplikacji, bo nie spojrzeliśmy w konsolę. A jeśli

4:52sprawdzimy konsolę, to zobaczymy, że React ostrzega nas przed jedną, bardzo

4:57ważną rzeczą. Każdy element, który mapujemy w naszej aplikacji, powinien

5:01mieć tak zwany unikalny klucz i teraz, jeśli przejdziemy sobie na naszego ListWrapper,

5:08zobaczymy, że nic tutaj takiego nie podajemy, a powinniśmy. W naszym

5:13widoku to niewiele zmienia, ponieważ jest to statyczny widok. Natomiast, jeśli sprawy przybrałyby

5:18bardziej dynamiczny charakter lub wprowadzilibyśmy tutaj jakieś zaawansowane animacje,

5:22to wtedy moglibyśmy mieć problem. Dlatego w tym

5:26miejscu musimy dodać unikalny

5:30klucz, którym może być na przykład nazwa naszego elementu. Każda

5:36nazwa elementu listy jest inna, ponieważ każda jest po prostu imieniem i nazwiskiem danego

5:40twórcy, więc mamy pewność, że one nie będą powtarzane i w tym wypadku jesteśmy już

5:44zabezpieczeni i nic nam nie pojawia. I nasza aplikacja na pewno będzie

5:48działać jak trzeba, kiedy sprawy przybiorą nieco bardziej skomplikowany charakter. I w

5:53tej lekcji to tyle. Pokazałem Ci dość dużo, jeśli chodzi o ulepszanie tych komponentów, o naprawianie

5:58ich, o sprawianie, żeby one po prostu były jeszcze bardziej czytelne. A w

6:02następnej lekcji powiem Ci jak możemy weryfikować, czy props'y, które

6:06podajemy do naszego komponentu, są faktycznie props'ami, których oczekujemy. Do

6:10zobaczenia następnej lekcji.