Nowoczesny React: Renderowanie kolekcji danych

0:00Kolejnym etapem rozwoju naszej aplikacji niech będzie przedstawienie

0:03tej listy uczestników.

0:05Zobacz, mam tu już dla Ciebie wyeksportowane People jako

0:08właśnie tablica stringów.

0:10Będziemy chcieli użyć tego właśnie do wygenerowania tego, co mamy tutaj.

0:16To jest prototyp.

0:17Natomiast w Bulmie możemy w dokumentacji znaleźć coś takiego jak komponent panel.

0:23Ten komponent posłuży nam właśnie do tego, żeby wyświetlić taką oto listę.

0:29Nie potrzebujemy go aż tak bardzo skomplikowanego, jak jest tutaj.

0:33Wykorzystamy tylko kilka fragmentów z tego, żeby przedstawić to w ten sposób.

0:38Wróćmy sobie do naszej aplikacji.

0:40I tutaj możemy sobie w AppjSx dalej rozważać.

0:45Na przykład możemy sobie tutaj zrobić główne ciało strony i klas

0:50name, które tutaj użyjemy.

0:52To będzie Container.

0:54To jest przygotowanie miejsca na naszą listę.

0:56Tutaj możemy sobie tą listę zrobić właśnie za pomocą panelu.

1:00Ja użyję taki odchudzony panel, czyli po prostu zróbmy sobie jako pożyczony ten

1:05kod, który mamy tutaj w wariancie infocopy.

1:09Jeśli go wkleimy tutaj, powinno to od razu zmienić nam klas na ClassName.

1:14I teraz to co potrzebujemy to jest panel heading.

1:17Nie jest nam potrzebny.

1:19My potrzebujemy zasadniczo tylko element, a jako panel blog, więc zostawmy

1:24to właśnie w takim formacie.

1:28I tutaj będziemy chcieli wyświetlić imię.

1:31Zobacz jak to wygląda.

1:32Mamy jedno imię.

1:34Ten Container można sobie troszeczkę odsunąć.

1:36Czyli to będzie np.

1:37Margin top wynoszący 4, a zobaczymy sobie, że to będzie delikatnie odsunięte.

1:42Przygotujemy sobie też tutaj później tytuł naszej strony, ale to

1:46w dalszej kolejności.

1:48Tutaj chcemy się skupić na tych osobach, które chcemy wyrenderować.

1:52Czyli mamy tutaj tablicę People i chcielibyśmy ich teraz sobie

1:56tutaj sprytnie przedstawić.

1:58Jak moglibyśmy sobie to zrobić?

2:00Otóż jeśli zaimportujemy people tutaj, czyli będziemy to mieli

2:04w takim formacie, Zobacz.

2:07I chcemy sobie tutaj właśnie wrzucić People.

2:10I tu będziemy mieli import people from people.

2:14Na tej zasadzie dostaniemy tablicę stringów i wiemy, że ona będzie

2:18wyrenderowana dlatego, że jest to tablica i będą to text nody, czyli jak gdyby.

2:24Ponieważ jest to tablica i jest to tablica elementów typu string, a elementy

2:28typu string mogą być w czymś zawarte.

2:31JSX rozumie też renderowanie tablicy.

2:34No to w takim układzie możemy to przedstawić w ten sposób.

2:36Natomiast my chcielibyśmy otoczyć każdy z tych elementów tak, żeby wyświetlał

2:40się nam w eleganckiej liście.

2:42Wiemy już o tym, że array możemy mapować, czyli tablica może być mapowana i tutaj

2:48możemy sobie użyć name jako wyciągnięcie jednego name, które mamy w people i

2:54przedstawienie go właśnie w takiej formie.

2:56Tutaj możemy bezpośrednio odnieść się do JSX'a, jednak żeby to ładniej wyglądało,

3:02żebyś zauważył jak to funkcjonuje, ja użyję jeszcze dodatkowych nawiasów

3:07i troszeczkę to zmodyfikujemy.

3:09Tak, żeby było widać co tu się faktycznie dzieje.

3:13I tutaj jak gdyby możemy tego najma. Sobie wrzucić.

3:16Widzimy, że to wszystko działa dlatego, że mamy tutaj.

3:18Ewa, Mark, Krysia, John, Edmund.

3:20I wszystkie te imiona są wylistowane.

3:23Natomiast mamy tutaj jeden błąd and keep top of element iteration.

3:29Czyli mamy tutaj pewien problem, ponieważ podczas iteracji Child list

3:34should have unique prop.

3:36Chodzi tutaj o coś, co możemy zauważyć w dokumentacji React A.

3:40Gdybyśmy tutaj w React dev sobie otworzyli i wpisali key,

3:44zauważysz, że mamy dokładnie ten warning, który przed chwilą nam się wyświetlał.

3:48I tutaj każdy z elementów, który sobie mapujemy musi mieć

3:52unikatowy identyfikator.

3:54Chodzi tutaj o to, że żeby React, który pod spodem używa VirtualDoma i pod spodem

4:00sam ustala co ma nam się odświeżać na widoku, a co nie.

4:04Wiedział i identyfikował jednoznacznie te elementy.

4:07Złym pomysłem, jak się okazuje, jest użycie indeksów.

4:12Nie chcemy używać indeksów jako kluczy dla tych elementów.

4:15Na szczęście każde z tych imion jest unikatowe.

4:18Tak się szczęśliwie składa, że każde z tych imion to unikat.

4:21Każde z ich imion tak samo, więc możemy teraz użyć klucza jako name.

4:26Kluczem mogą być wartości typu string.

4:28Wartości typu number.

4:30Natomiast coś czego nie chcemy robić to np.

4:32Generować tych kluczy randomowo.

4:34Chodzi o to, żeby każdy z tych elementów był jednoznacznie identyfikowany przez

4:39Reacta w momencie, gdy renderuje on te dane.

4:43W momencie, w którym rozpoznaje po prostu jaki element JSX ma

4:47wyświetlać się na ekranie.

4:48Jest to mu potrzebne, żeby optymalnie aktualizować widok.

4:54Możemy tutaj, podobnie jak w tym miejscu, dodać sobie po prostu taki list of

4:58people, czyli tytuł naszej strony.

5:01Ten tytuł to po prostu może być H3, które sobie wpiszemy.

5:05Wtedy możemy sobie tutaj dorzucić List of people.

5:08Możemy to Przenieś sobie tutaj w to miejsce.

5:11I w ten sposób zaczyna nam to coraz to, coraz bardziej przypominać

5:15już ten nasz prototyp.

5:17Możemy sobie tutaj też zrobić jakiś pudding, na przykład wynoszący cztery.

5:23Wtedy elegancko będziemy sobie to mogli wyświetlać.

5:26Czyli tutaj stosujemy klasy do tego, żeby edytować sobie sposób, w jaki

5:31wyświetlany jest nasz widok.

5:33To, co się tutaj wydarza, to people jako tablica stringów jest przemapowane na

5:39tablicę JSX, a ponieważ używamy tutaj array, JSX wie jak poradzić

5:45sobie właśnie z tablicami, no to nie powinno nas dziwić, że to wszystko

5:51nam się tutaj elegancko wyrenderuje.

5:53Więc zobacz, że takie React w odróżnieniu od frameworków, które możesz kojarzyć,

5:58znać innych frontendowych nie korzysta z żadnych dodatkowych elementów ponad to, co

6:05już możemy znać właśnie z programowania funkcyjnego.

6:08Jest to po prostu mapowanie tablicy na elementy JSX.