React: Dodawanie propsów

0:00Cześć! W tej lekcji dokończymy stylowanie naszego komponentu. Zrobimy tak, żeby on

0:04wyglądał w końcu odpowiednio, żeby był bardzo podobny do tego, co mamy w tym miejscu - zarówno

0:09jeśli chodzi o ten pojedynczy komponent, jak i o całą naszą listę - a następnie zaimportujemy

0:14sobie w końcu odpowiednie  dane, dzięki którym wyświetlimy całą naszą listę. Nadamy teraz

0:19naszemu komponentowi mały padding. Od góry niech to będzie 50.

0:24Po bokach niech to będzie 30. Nasz

0:30obrazek niech ma flex-shrink 0, żeby nie kurczył się pod tym naszym fleksem. I margin z

0:35prawej strony -  nadamy mu 50 pikseli. Może trochę

0:41za dużo - 30. Okej. Teraz wróćmy sobie na chwilę do

0:46naszego ListWrapper i stwórzmy odpowiedni plik ListWrapper.css. Zaimportujemy go do

0:53naszego komponentu. Nadamy

1:01odpowiednią klasę naszemu wrapperowi ListWrapper

1:06i teraz stworzymy dla niego szerokość o

1:11maksymalnej szerokości 80 viewport width  i sprawimy,  żeby on

1:17był na środku naszego ekranu. I pewnie jeszcze

1:22dodam trochę originu z góry. Na dole

1:26niech do będzie 0. Okej. Nasz komponent zachowuje się całkiem

1:34fajnie. Musimy jeszcze mu nadać tylko

1:38margin-bottom, żeby

1:45mógł odpychać te elementy, które znajdą się bezpośrednio pod nim. Ostatnią

1:51kosmetyczną zmianą będzie jeszcze zmniejszenie tutaj marginu między description a name.

1:55Idealnie. I teraz jeśli sobie wyrenderujemy ten komponent

2:00kilka razy, to zobaczymy, jak on będzie się zachowywał jeden pod

2:04drugim. Świetnie.  Ta odległość między poszczególnymi komponentami może być trochę

2:09za duża, więc ją zmniejszymy. I w tej

2:14chwili nasz komponent jest ostylowany w taki sposób, że możemy przejść do pracy. Możemy w

2:19końcu zaimportować dane, dzięki którym wyświetlimy wszystkie odpowiednie postacie w

2:24naszej liście, a nie czterech Danów Abramowów,  no bo to żadna frajda

2:28przecież. Wiec teraz wrócimy do naszego ListWrapper i opowiem Ci, jak to wszystko się

2:33wydarzy. Przede wszystkim usuńmy sobie na razie te cztery komponenty. I naszym

2:39celem jest zaimportowanie tego, co mamy w folderze data, a następnie wyświetlenie tego w

2:45sposób automatyczny w naszym komponencie. I możemy to zrobić przy pomocy propsów,

2:50o których Już na początku tego kursu trochę powiedziałem.  Za chwilkę rozszerzymy sobie to pojęcie, ale pierwsze, co

2:55zrobimy, to  zaimportujemy nasze dane. Okej. Mamy Już zaimportowane dane do naszego

2:59pliku. Teraz  to, co chcielibyśmy robić, to po prostu wybierać sobie twitterAccounts. Na

3:04przykład pierwszy element z naszej listy - name. Jeśli

3:09sobie to wylogujemy, to

3:14zobaczymy, że mamy Dana Abramowa, wszystko się zgadza. I

3:18chcielibyśmy to  imię podać do naszego komponentu tak, żeby to

3:22zostało wyświetlone zamiast tej sztywnej nazwy tutaj. I możemy to

3:28zrobić za pomocą propsów. Jeśli pamiętasz, jak działa JSX, czyli, że jest to

3:33tak naprawdę cukier syntaktyczny na metodę react  client element, to

3:38pamiętasz, że propsy są dodatkowymi parametrami do naszej funkcji. Zresztą

3:43Już w tym komponencie, który teraz widzisz mamy dodane propsy w postaci className. Przecież nie jest to ta

3:49zwykła klasach HTML-owa, tylko jest to props reactowy, który

3:53odpowiada za nadanie klasy. I zapis każdego innego propsa

3:57w React wygląda dokładnie tak samo. Czyli nadajemy mu jakieś imię, jakąś

4:02nazwę, a następnie podajemy wartość, którą chcemy mu przekazać. Więc

4:06w tym wypadku chcielibyśmy na przykład żeby nasz komponent przyjmował propsa

4:10name. I to, co możemy tutaj

4:14zrobić, to wybrać sobie ten element z naszej tablicy twitterAccounts,

4:19dokladnie z pierwszego elementu wybieramy klucz name. Teraz

4:25Jeśli wrócimy sobie do ListItem i zadeklarujemy mu, że on

4:32będzie przyjmował jakieś propsy, uprzedzimy go o tym , to w tej

4:38chwili, jeśli zamienimy Dan Abramov na props.name, to

4:46dostaniemy dokładnie to samo. I to jest

4:54taki pierwszy magiczny moment w tym kursie, gdzie zobacz,

4:59co możemy zrobić. Możemy zmienić nazwę naszego

5:04Dana Abramowa. Czyli podsumowując: tworzymy nową nazwę propsa. On może być

5:10dowolnie nazwany. Może to być na przykład firstName.

5:14Teraz jak przyjdziemy sobie tutaj, to on też musi się

5:20nazywać firstName, więc nazwa zależy

5:24od nas. Następnie podajemy mu jakiś parametr, jakąś

5:28wartość, którą ma wykorzystać ten props. Wróćmy tutaj

5:34do name. Więc teraz naszym celem jest zastąpienie każdej

5:39sztywnej wartości w naszym komponencie dynamicznymi wartościami

5:43zaimportowanymi w rodzicu tego komponentu, czyli w ListWrapper. Oprócz

5:48oczywiście tego tutaj tekstu na buttonie, bo on w każdym komponencie

5:52wygląda dokładnie tak samo. Więc teraz wracamy sobie na chwilę do ListWraper

5:56i podamy każdego propsa. Wszystko się

6:13udało. Wszystko działa. Propsy zostały podane odpowiednio. Zauważ, że nie

6:17musimy wykorzystywać tych propsów tylko i wyłącznie w takim miejscu, bo możemy je również

6:21podać jako src. Tak naprawdę możemy je używać gdziekolwiek, ponieważ jest to po prostu

6:27JavaScript , a to nie jest HTML, wiec wszystko tutaj jest możliwe. Nawet możemy

6:32zrobić coś takiego, że jeśli nie mielibyśmy tego name, to możemy podać cokolwiek

6:38innego. I teraz jeśli tutaj usunę tego propsa, to

6:44pojawi nam się Roman. Wynika to z tego, że mamy tutaj proste działanie logiczne. Jeśli

6:48nie ma podanego propsa name, to mamy zmienić na stringa "Roman". W React robi się to

6:54Jeszcze trochę inaczej, poprzez użycie rodzaje PropTypes, ale do tego

6:58przejdziemy w dalszej części tego kursu. Na razie wrócimy sobie do tego, co mieliśmy

7:02przed chwilą. I wszystko wygląda całkiem fajnie, tylko że łamiemy

7:06tutaj jedna zasadę. Jeśli chcielibyśmy wykorzystać wszystkie  elementy z naszej

7:11tablicy, to musielibyśmy zrobić coś takiego. I faktycznie

7:20wszystkie komponenty renderują się świetnie, wygląda to prawie tak

7:24samo jak w sketchu. Jest tylko jeden problem. Łamiemy tutaj zasadę

7:29DRY,  czyli don't repeat yourself. Ale jest na to świetna metoda i

7:33pokażę Ci to w następnej lekcji, co Jeszcze bardziej dobitnie

7:37udowodni, że JSX to nie jest HTML, tylko czysty

7:41JavaScript. Do zobaczenia w następnej lekcji.