Nowoczesny React: Props, przekazywanie danych do komponentu

0:00Na razie wyjmijmy to.

0:01What will be renderred?

0:03Jeśli chcesz zrobić komentarz w JSX, musisz użyć do tego takiego zapisu.

0:08Czyli generalnie robimy sobie cząsteczki.

0:10I teraz wykomentujemy What will be render?

0:14Niech to zostanie dla potrzeby naszej edukacyjnej, żeby sobie

0:18ewentualnie to wrzucić.

0:20Natomiast nie potrzebujemy tego w projekcie.

0:23Tutaj możesz poradzić sobie z tym problemem, bo jeśli End będzie narzekał,

0:26że mamy coś, czego nie używamy w kodzie.

0:29Co jest bardzo pożądane, mamy tutaj to w problems chociażby.

0:32What will be render is defined, but never used.

0:35Czyli widzimy, że mamy jakieś problemy i zgłaszającym problem jest klient.

0:39Widzimy to tutaj po lewej stronie.

0:41W takim wypadku mamy takie rozwiązanie.

0:44Na przykład nie chcemy, żeby zgłaszał nam ten błąd dla konkretnej linii.

0:49Więc tutaj możemy sobie to zakomentować w ten sposób.

0:51Sline disable nextline none used false.

0:54Jest to ciekawa opcja, jeżeli po prostu nie chcemy, żeby to było teraz zgłaszane,

0:59bo celowo chcemy na razie pożegnać ten komponent i skupić się na tak zwanym

1:05przekazywaniu danych poprzez proces.

1:07Pokażę Ci ciekawy problem.

1:09Otóż gdybyśmy chcieli teraz header powtórzyć kilka razy, czyli chcielibyśmy,

1:13żeby ten header był tutaj powtórzony, to zawsze będzie to ten sam header.

1:18Zawsze tak samo.

1:19Mamy faktycznie kilka komponentów, dokładnie pięć i te pięć komponentów

1:24zawsze będzie miało ten sam tytuł i podtytuł.

1:27No i dzieje się tak dlatego, że za hardkodowaliśmy sobie te wartości,

1:32które mamy w środku headera.

1:33Gdybyśmy jednak chcieli zrobić to troszeczkę inaczej, możemy

1:37skorzystać z tak zwanych propsów.

1:39Co by było, gdybyśmy zdefiniowali sobie teraz, że ten komponent tutaj header

1:44będzie otrzymywał coś takiego jak props i możemy to sobie zapisać od razu, a tutaj

1:49nawet skonsulogować props, żeby zobaczyć pewną rzecz.

1:53Otóż pomimo tego, że tego props jeszcze tak naprawdę nie widzimy, to zawsze

2:00jest to dostępne jako obiekt.

2:02Zobacz, Każdy komponent reaktowy dostanie coś takiego jak props.

2:07Każdy będzie miał chociażby pusty obiekt, w którym props można nazwać

2:12jako taki konfigurator.

2:14Gdybyśmy teraz wymyślili sobie propsy takie jak np.

2:17Title i wrzucili sobie tutaj Secret giver, zróbmy sobie dla odmiany secret GG, tak

2:24żebyśmy zobaczyli jakąkolwiek zmianę tutaj, to możemy ten tytuł wykorzystać.

2:29To pokazuje nam się tutaj dwa razy, dlatego, że komponent będzie wywoływany

2:35dwukrotnie, czyli jego inicjalizacja tutaj w headerze będzie wywołana dwukrotnie.

2:39Będę wyjaśniał to zjawisko, ale jest ono powiązane z React Strict modem.

2:44Gdyby ten Strict Mod po prostu sobie wyrzucić, zostawić tutaj samo UB,

2:48zauważysz, że wtedy nie mamy tego dwukrotnie.

2:51Jednak ten strict mode będzie troszeczkę nam przeszkadzał aktualnie, czyli będzie

2:57podwajał nam rzeczy, które robimy podczas developmentu.

3:00Natomiast nie ma on kompletnie wpływu na produkcyjne rozwiązanie.

3:05Natomiast jest bardzo istotne z perspektywy wyłapywania pewnych

3:08błędów charakterystycznych dla Reacta.

3:10Dlatego już teraz tłumaczę, dlaczego mamy konsologa dwukrotnie.

3:14To będzie troszeczkę dla nas uciążliwe, ale skoro wiemy, jak to działa,

3:18spodziewasz się, że ten header, który tutaj ma te propsy powinien

3:22być wyświetlany jednorazowo?

3:24Nawet jeżeli będziemy mieli jeden komponent, to po zainicjowaniu

3:27będziemy to mieli dwukrotnie.

3:30Wracając do naszych propsów możemy teraz zrobić coś takiego jak props title, żeby

3:36wyrysować sobie właśnie ten nasz tytuł, który przekazujemy, czyli SecretGG.

3:41Czyli zauważ, że w ten sposób jesteśmy w stanie konfigurować te nasze propsy,

3:45które przekazujemy tutaj w headerze.

3:47Tutaj będzie nam zgłaszał problem odnośnie Validation Props.

3:52Tutaj z kolei zastosujemy sobie akcje, żeby to nam się nie wyświetlało.

3:57Możemy to zrobić dla Disable, dla Next Line.

4:00Możemy też zrobić disable dla całego pliku.

4:03Moglibyśmy sobie przestawić troszeczkę ten komentarz.

4:06To jest linka i tutaj s disable react prop types te prop types.

4:12One będą dla nas dość istotne.

4:14Będziemy chcieli, żeby te types nam się walidowały.

4:18Natomiast później doinstalujemy sobie specjalne narzędzie, które będzie się

4:22nazywało prop types i wtedy będziemy mogli z niego korzystać, więc

4:27wrócimy sobie do tej walidacji.

4:29Żeby to nam zadziałało, potrzebujemy jeszcze takiego rodzaju komentarza, czyli

4:35musimy sobie to opakować w ten sposób.

4:37Tak działa end, jeżeli chcemy zablokować coś dla całego pliku.

4:41Więc tutaj mamy no answers dla what will be render, natomiast disable

4:48react prop types dla wszystkich prop types.

4:50Tutaj w tym komponencie z React Prop types wrócimy sobie później tak żeby sobie

4:55doinstalować odpowiedni package i walidować te types, bo w ten sposób

5:00będziemy chcieli działać w projekcie.

5:01Natomiast teraz zobaczmy sobie jak te propsy działają, czyli mamy title.

5:05Moglibyśmy też mieć subtitle.

5:07I można to zdefiniować w ten sposób.

5:10Ten subtitle to będzie exchange.

5:12Gifts your collas.

5:13Niech to tak będzie.

5:15I teraz wrzucamy to sobie analogicznie, czyli mamy props i mamy

5:19tutaj subtitle w ten sposób.

5:22Zwróć uwagę, że propsy.

5:24Definiujemy sobie camelCase.

5:26Jeżeli by były wielowyrazowe.

5:28Natomiast jeżeli zrobimy sobie jeszcze jeden header.

5:31To widzimy pewien problem.

5:33Bo teraz jak gdyby.

5:35Ani title ani subtitle nie są zdefiniowane, mają wartości undefined.

5:39Ale my już wiemy, że te undefined nie będą renderowane dlatego, że undefined po

5:43prostu nie jest renderowany w JSX.

5:45To udowodniliśmy sobie tutaj w tym miejscu.

5:48W takim układzie co zrobić, żeby mieć default values?

5:52Cóż, moglibyśmy sobie spróbować wyłuskać te propsy stosując nowoczesny zapis

5:58JavaScriptu, czyli restrukturyzacje.

6:00Jeżeli byśmy sobie zrobili restrukturyzacje i tutaj wrzucili to

6:03title, to zauważ, że moglibyśmy domyślny tytuł dać i domyślny subtitle, czyli

6:10moglibyśmy to zrobić w ten sposób.

6:11I tutaj wrzucamy sobie subtitle.

6:15W tym układzie mamy już dostępne title i mamy dostępne subtitle.

6:20I teraz mamy wartości domyślne, czyli mamy header i mamy subtitle.

6:24Można to zapisać lepiej w takim układzie.

6:28Jeżeli chcielibyśmy uprościć sobie ten zapis, to możemy zauważyć, że te propsy,

6:34które zawsze tu są przekazywane, zawsze masz pewność, że zawsze props

6:37będzie tutaj i będzie obiektem.

6:40Możemy restrukturyzować od razu, czyli zamiast zapisywać to w ten sposób,

6:45przenieśmy to wszystko i zdestrukturyzujmy od razu jako parametr.

6:49Od razu ten parametr może być zrestrukturyzowany i to będzie

6:53najprzyjemniejszy sposób pisania komponentu.

6:56Czyli te propsy, które przekazujemy, będziemy przekazywać właśnie w ten sposób.

7:01I teraz w Reactcie nie będziemy mieli żadnych eventów.

7:05Jedynym sposobem, jak można się komunikować na zewnątrz, czyli

7:08jak ten header może coś przesłać.

7:10Tutaj wyżej do AP będzie callback.

7:14Czyli gdybyśmy chcieli skomunikować się tymi procesami w jedną stronę,

7:17to już widzimy jak to zrobić.

7:19Czyli po prostu załóżmy aplikacja definiuje tytuł i to jest nasz Secret Gift

7:25Giver i ten tytuł możemy sobie przekazać tutaj właśnie za pomocą tych propsów

7:31i tutaj w tytule zrobimy to w ten sposób.

7:34I widzimy Secret Gift Giwera i mamy tutaj Exchange gift with your collex.

7:39W takim wypadku nasz header jest gotowy.

7:41Mamy też defaultowe wartości tych naszych właśnie elementów, które sobie tutaj

7:46destrukturyzujemy natychmiast w tym miejscu i w ten sposób możemy

7:51sobie przekazywać to do komponentu.

7:54Gdybyśmy chcieli komunikować się w drugą stronę, musielibyśmy przesłać jakiś

7:58callback, który zdefiniowany byłby tutaj na przykład.

8:02Możemy to zrobić za pomocą const i tutaj zdefiniujemy sobie jakąś Arrowfunction

8:08i możemy to show alert przesłać sobie tutaj np.

8:12On alert.

8:14Zdefiniujmy sobie i tutaj będzie show alert.

8:16On alert może przyjąć wartość domyślną, która będzie po prostu pustą funkcją.

8:21I w tym momencie, jeżeli mielibyśmy tytuł, w którym zrobimy onclick, to możemy tak

8:26naprawdę zamiast onClick wywołać on alert.

8:30Czyli można to sobie zapisać tak albo w uproszczeniu po prostu przekazać on alert.

8:35I jeżeli teraz kliknę na tytuł, zobaczę alert hello, który jest zdefiniowany

8:41tutaj, więc tutaj, tak jak widzisz, możemy się komunikować w drugą stronę.

8:45Używając właśnie callbacka, możemy wywołać coś, co jest po tej stronie.

8:51Gdybyśmy chcieli przekazać jakąś wartość on alert, czyli to nasze hello zależałoby

8:56od wartości, która jest zdefiniowana tutaj w headerze, to możemy

9:00przekazać sobie tutaj argument.

9:02Natomiast zwróć uwagę, że będzie to parametr message w tej właśnie funkcji.

9:08Więc tutaj mamy alert message.

9:10I tutaj będzie hello from header.

9:12Jeżeli klikniemy, dostaniemy Hello from header.

9:15Tak więc wygląda komunikacja w dwie strony.

9:17Parent to child.

9:19Child to parent.

9:20Parent to child.

9:21To jest relacja, To znaczy relacja app do header.

9:25Zwróć uwagę, że ta relacja następuje dopiero jeżeli w app osadzimy header.

9:30Wtedy to jest parent, to jest child.

9:33Komunikacja z parent do Child wygląda następująco, że możemy przesłać dowolne

9:37wartości właśnie za pomocą propsów.

9:40Nie ma ograniczenia co do typu tych wartości.

9:42Zobacz, bo nie są to wartości renderowane przez JSX.

9:45Są to wartości, które mamy tutaj niczym.

9:48Funkcja ma swoje parametry i przesyłane ma argumenty.

9:52Tak, tutaj mamy komponent, który ma swoje propsy, odbiera je sobie tutaj z góry.

9:58Można powiedzieć, że tutaj przesyłamy jak gdyby argumenty, a tutaj

10:02parametry odbieramy.

10:03Czyli sparametryzowanie tego naszego komponentu jest możliwe.