React: Mapowanie tablicy

0:00Cześć. W poprzedniej lekcji pokazałem Ci, jak podawać

0:04props'y do komponentów. Teraz już wiesz - możesz podawać w taki sposób, że

0:08tworzymy nazwy, a następnie podaj mi jakąś wartość. Tutaj akurat podawaliśmy

0:12coś, co za zaimportowaliśmy sobie z zewnętrznego pliku. Natomiast mogłoby się

0:16tu znaleźć dosłownie wszystko. Moglibyśmy tutaj podać string'a, moglibyśmy

0:20tutaj podać liczbę, a nawet boolean,

0:25która akurat teraz się nie pojawi, no bo on jest traktowany faktycznie

0:29jako boolean, więc musiałby robić coś związanego z logiką wewnątrz tego

0:33komponentu, ale o tym też porozmawiamy sobie później. Jeśli

0:38jednak przyjrzymy się naszemu plikowi z danymi to zauważymy, że zapomnieliśmy

0:43o jednej rzeczy, a mianowicie od Twitter linku i teraz sobie go podamy. Wrócimy

0:49sobie do naszego ListWrapper'a i w

0:53każdym miejscu podamy

0:58Twitter link. Może zrobimy po prostu tutaj link, a tutaj

1:03zrobimy twitterAccount. Okej, zrobiłem literówkę, twitterAccounts. Okej,

1:14teraz jak wejdziemy sobie do naszego ListItem, to zobaczymy jeszcze jedną

1:18rzecz, że button jest button'em, a nie linkiem, więc teoretycznie powinien

1:23to być a, który będzie miał href,

1:27do którego podamy nasz props link. Zmieni

1:33nam się tylko wygląd naszego button'a ale to szybko możemy ostylować. Zrobimy mu

1:37mniejszy font-size, powiedzmy na 10 pikseli i text-decoration

1:42wywalimy, tak żeby to faktycznie wyglądało jak button. Teraz,

1:46jak klikniemy sobie na nasze button'y, to one faktycznie przekierowują nas do

1:50odpowiedniej strony. Jeśli spojrzymy sobie na naszej konsoli, to

1:54zobaczymy kilka ostrzeżeń I to jest właśnie bardzo fajne Create React App,

1:58że on opowiada nam, co tak naprawdę zrobiliśmy źle w naszej

2:02aplikacji i tutaj widzimy dwie rzeczy. Przede wszystkim mamy tutaj nie używany

2:07import, ponieważ już dłużej nie używamy go w tym komponencie. Możemy go spokojnie usunąć

2:11i dodatkowo mamy jeszcze ostrzeżenie o tym, że nie mamy

2:15parametru alt w naszym obrazku, więc

2:19teraz zrobimy tak, że rozwalimy to sobie na kilka linijek.

2:23I dodamy

2:28jeszcze parametr alt, który w tym wypadku zrobimy

2:32sobie jako imię naszego bohatera, czyli tutaj będzie po

2:36prostu props.name. Okej, nie

2:40mamy żadnych ostrzeżeń, możemy sobie to zamknąć i nasza lista jest już skończona.

2:45Dan Abramov nam się coś zbuntował,

2:49bo

2:55nie usunąłem string'a tym miejscu. Tak, teraz wszystko działa i tak

3:00jak obiecałem, teraz pokażę ci jak zrobić, żeby tutaj bo tylko

3:04jeden komponent i który automatycznie będzie przyjmował tyle props'ów,

3:09ile będzie w naszym zaimportowanym pliku. Zrobimy to przy użyciu

3:13funkcji map. Jest to jedna najprzydatniejszych rzeczy, jeśli

3:17chodzi pisanie komponentów w React'cie, bo dzięki funkcji map możemy, po prostu, importować

3:22sobie jakieś zewnętrzne dane i później, nie licząc ile jest tych

3:26elementów wewnątrz tego pliku, po prostu je wszystkie wyregulować, więc

3:31teraz usuniemy sobie wszystkie pozostałe komponenty i

3:35żeby wewnątrz JSX'a zastosować jakiekolwiek wyrażenie JavaScript'u, to

3:40musimy po prostu wewnątrz naszego komponentu otworzyć wąsy i zacząć

3:45pisać naszą funkcję. Będzie to twitterAccounts.map(). Jeden

3:51item zwróci nam to, co mamy tutaj. Różnica

3:57jest tylko taka, że w tym miejscu nie będziemy się odwoływać do naszego twitterAccounts,

4:02zaimportowanego, tylko do item, ponieważ to item jest tym elementem, po

4:07którym aktualnie funkcja map sobie iteruje. To jest jeden z elementów

4:11naszej tablicy, więc każde twitterAccount zero,

4:16zamienimy sobie item. I teraz

4:22wszystko powinno działać. Uwaga, chwila prawdy. Świetnie,

4:26wszystko jest tak jak należy. Linki działają? Działają,

4:31świetnie. I popatrz, że z bardzo długiego

4:35komponentu, zrobiliśmy bardzo krótki, który zawiera w sobie sprytną funkcje, która literujeiteruje

4:40nam po całej tablicy zaimportowanej do pliku, a następnie renderuje

4:44nam w bardzo inteligentny sposób to, co w tej tablicy się znajduje, a właściwie w

4:48każdym obiekcie, zawartym w tej tablicy. Obiektów mamy 4 i te

4:53obiekty mają różne parametry, tak jak name, description, link, avatar i tak dalej. I

4:57wszystko to podajemy właśnie w tym miejscu. Mam nadzieję, że cieszysz

5:01się równie mocno jak ja, że nasz komponent działa. Jednak nie byłbym sobą, gdybym nie

5:05wspomniał tutaj o ulepszaniu naszego kodu. O tym co możemy zrobić, żeby

5:09ten komponent wyglądał jeszcze lepiej. A powiem ci w tajemnicy, że z tego

5:14możemy zrobić jedną linijkę, ale o tym wszystkim dowiesz się już w następnej lekcji, którą poświęcę

5:18właśnie na refaktoring, czyli na ulepszaniu naszego kodu. Do

5:22zobaczenia w następnej lekcji.