React: Czym są PropTypes

0:00Cześć! Udało nam się dotrzeć do ostatniej lekcji, w tej części kursu. Mamy już cały

0:04komponent gotowy. Nasza lista wygląda dokładnie tak, jak na projekcie. Linki działają.

0:10Wszystko jest okej. Nasz kod został nieco przerobiony,

0:14żeby wyglądał dużo lepiej, więc teraz przyszła pora na ostatni

0:18element tej układanki, w którym będą PropTypes. PropTypes jest

0:22takie narzędzie w React'cie, które pozwala nam na weryfikowanie tego, jakiego

0:26rodzaju props'y podajemy do naszego komponentu i czy aby na pewno, props,

0:30który podaliśmy, jest właśnie odpowiedniego typu. Pozwala nam to uniknąć wielu

0:34wpadek, wielu problemów związanych właśnie z innym typem danych,

0:38które moglibyśmy podać. Na przykład, jeśli podawalibyśmy string'a,

0:43to zamiast string'a, przypadkiem możemy wprowadzić liczbę i ta

0:47liczba może nam generować jakieś niepotrzebne problemy. Dlatego teraz

0:51pokażę Ci jak weryfikować te props'y i jak to robimy. I warto

0:55wiedzieć, że każdy komponent, który przyjmuje props'y powinien posiadać takie

0:59PropTypes do siebie przypisane. Więc teraz pokażę Ci, jak

1:03to zrobić. Spójrzmy sobie na nasze komponenty. Po pierwsze, mamy tutaj dwa takie główne

1:08komponenty. Jeden to jest komponent publiczny, czyli ListWrapper. Publiczny,

1:12ponieważ tak jak już mówiłem w poprzedniej lekcji jest to komponent, który może

1:16być używany przez wiele różnych komponentów. Jeśli zaszłaby taka potrzeba. Nie

1:21jest tak, że on może znajdować się tylko w jednym komponencie. Taki komponent,

1:25który znajduje tylko w jednym komponencie, to ListItem, ponieważ wykorzystywany

1:29jest tylko przez ListWrapper i ten nazywamy komponentem prywatnym. I w tym

1:33przypadku, to właśnie do niego podajemy jakiekolwiek props'y w naszej, powiedzmy,

1:37aplikacji. Chociaż to tak do końca aplikacja nie jest, no ale powiedzmy, że

1:41w naszym widoku. A props'em w tym przypadku jest item, który podajemy przy

1:45pomocy spread operator'a, tak żeby wszystkie jego elementy zostały rozprowadzane

1:50w naszym komponencie, w taki sposób, że możemy je później wyciągnąć, przy użyciu destrukturyzacji. I

1:55w tym przypadku, w tym komponencie, wielkiej filozofii nie będzie, ponieważ wszystkie

1:59props'y są string'ami. Niemniej musimy je zadeklarować, żeby uniknąć jakichś

2:04pomyłek w przyszłości, więc teraz to zrobimy. Przede wszystkim, musimy zaimportować PropTypes. Z

2:09biblioteki, która nazywa się PropTypes. Na dole

2:13komponentu stworzymy teraz ListItem.propT ypes. Zauważ, że

2:18w tym miejscu używamy małej litery, ponieważ jest to zupełnie coś innego, niż to. Tutaj

2:22mówimy o PropTypes'ach, które należą do ListItem. Są jej częścią.

2:26Natomiast teraz stworzymy

2:30z tego obiekt i w tym miejscu zadeklarujemy wszystkie

2:35te props'y, które podajemy. Czyli możemy sobie tak naprawdę skopiować

2:39i wkleić w tym miejscu. Usuniemy tylko przecinki

2:43i żeby zadeklarować PropType, o danym typie, to

2:48po prostu używany PropTypes, który zaimportowaliśmy i nazywamy

2:52typ danych, którego będziemy używać. W tym przypadku będzie to string. Moglibyśmy

2:57użyć, na przykład, number. Moglibyśmy użyć function i tutaj uwaga,

3:01bo wtedy używamy func, a nie function. Moglibyśmy użyć, na

3:05przykład, jeśli to by była tablica jakichś elementów, to byłoby to arrayOf

3:10i na przykład w środku byłaby PropType.string. Może

3:16też tak się zdarzyć, ale o tym wszystkim powiem w następnych częściach kursu. Na

3:20razie te nasze props'y są naprawdę proste, więc zostańmy przy naszym

3:24stringu. I żeby powiedzieć, że ten string,

3:28ten props, w naszym komponencie jest wymagany, że nie możemy uniknąć

3:32tego, żeby go podać - musimy podać isRequired. I

3:36w takim przypadku, nasz props zawsze będzie wymagany,

3:41jeśli go nie będzie, to dostaniemy odpowiedni błąd w konsoli. Jednak

3:45props'y nie zawsze muszą być wymagane, co więcej możemy nadać im jakąś default'ową, jakąś

3:49domyślną wartość i powiedzmy, że w naszym przypadku, description nie

3:54zawsze byłoby podane. No, nie chcielibyśmy, żeby tutaj było puste pole albo, że byśmy dostali

3:58jakiś błąd. Więc załóżmy, że nasze description nie będzie wymagane,

4:02czyli używamy isRequired, a pod PropTypes, które

4:06zadeklarowaliśmy, robimy ListItem.defaultProps. I

4:11w tym miejscu podajmy nasze description i

4:15załóżmy, że wpiszemy tutaj "One afterof the React creators". I w tym

4:19miejscu, jeśli

4:26wrócimy sobie do naszego obiektu, gdzie deklarowaliśmy

4:30wszystkie dane, czyli w folderze data i usuniemy,

4:36na przykład, Dan'owi Abramov'i description. To

4:43ten tekst powinien zostać zastąpiony przez nasz

4:47ten, taki powiedzmy, placeholder. Ten defaultProps, który zostanie wrzucony,

4:52w to samo miejsce. I wszystko działa. Może pokażę Ci

4:57teraz, jaka jest droga tego props'a. ListWrapper podejmę item i tym

5:01item'em jest, w tym przypadku, ten oto obiekt i

5:06ten obiekt zostaje podany do ListItem. ListItem

5:10destrukturyzujemy sobie wszystkie props'y. W tym nasz description, który w

5:14tym przypadku nie istnieje, a jeśli nie istnieje, to sprawdzamy

5:18czy propType został zadeklarowany i czy jest wymagany. Jeśli

5:23nie jest wymagany, to React sprawdza, czy mamy jakieś defaultProps,

5:27który zostanie przypisany do tej, do tego brakującego puzzla

5:31naszej układanki. Czy może to czymś zastąpić. I tak to właśnie działa. I to

5:35tyle, jeśli chodzi o takie podstawowe zastosowanie PropTypes'ów. W następnych

5:39częściach tego kursu, dowiesz się nich dużo więcej. Dowiesz się jak tworzyć

5:44takie bardziej zaawansowane struktury, jak nawet tworzyć pewne konkretne

5:48kształty danych, które później będziesz wykorzystywać, żeby nie pisać wiele razy

5:52tego samego, a w tej chwili to już wszystko. Bardzo Ci dziękuję za ukończenie pierwszego

5:56etapu naszego kursu. Zapraszam cię do drugiego etapu, gdzie poznasz

6:00dużo więcej, dużo bardziej zaawansowanych technik w React'cie. Już nie mogę się doczekać, żeby

6:04to wszystko Ci pokazać. Do zobaczenia w drugiej części.