React & TypeScript: Default props

0:00W tej lekcji pokażę Ci w jaki sposób pracować z domyślnymi opcjami.

0:03I swoją drogą.

0:04W poprzedniej lekcji pokazałem Ci w jaki sposób pracować z opcjonalnym tip top sami

0:08i jednocześnie ustawiać ich domyślne wartości.

0:11Jak wiesz, w przypadku jak funkcjonuje coś takiego jak default,

0:14czyli generalnie właściwości funkcji przypisywana jest w przypadku komponentów

0:18funkcyjnych bądź też właściwości klasy w przypadku komponentów klasowych.

0:23Normalnie to właśnie z pomocą Default

0:24Group określiliśmy domyślne wartości dla klapsów, Natomiast w tym przypadku

0:28zdecydowanie lepiej jest zastosować sposób, który pokazałem tutaj.

0:32Czyli generalnie bezpośrednio w przypadku

0:34przekazanego obiektu ustawić domyślne wartości.

0:37Ewentualnie moglibyśmy zrobić tak, że po prostu nie podawali byśmy tutaj wszystkich

0:41właściwości, tylko zrobili po prostu w ten sposób.

0:43Dzięki temu w przypadku gdybyśmy posiadali

0:45więcej procesów, to po prostu może okazać się to nieco bardziej wygodne.

0:49Tak czy inaczej chciałbym teraz pokazać Ci w jaki sposób pracować z Default.

0:53Ze względu na to, że pomimo tego, że raczej odchodzi się od ich wykorzystywania

0:57i nawet jeżeli spojrzymy sobie teraz na Twój temat, to widzimy jasno, że domyślne

1:01właściwości obiektów przeważają w znaczącym stopniu nad default groups.

1:05To oznacza, że ich przyszłość nie jest do końca jasna.

1:07Wracając jednak do naszego kodu, zobaczmy w jaki sposób możemy sobie z nimi radzić.

1:12Przede wszystkim zróbmy tak, aby uprościć nasze komponenty user i w ten sposób

1:16rezygnujemy już z tych dodatkowych pól i w zamian umieszczamy pole active, które w

1:21tym momencie znajduje się w samym ciele komponentu.

1:23Dokładnie tutaj.

1:25Natomiast musimy dodać do niego jeszcze typ.

1:27Będzie to pole przechowujące wartość logiczną.

1:29I teraz w zależności od tego, czy użytkownik jest aktywny czy też nie,

1:32będziemy dodawać do niego odpowiednią klasę.

1:35No i tutaj jeszcze musimy zadbać o to, aby

1:37przekazać odpowiednie propsy i tak naprawdę wszystko jest tutaj w porządku.

1:40Oczywiście teraz nie jest, ponieważ pole Active nie jest opcjonalne.

1:44Natomiast jeżeliby było, to w zasadzie w tym przypadku jesteśmy w

1:47domu, bo nawet jeżeli ta wartość nie zostanie przekazana, to i tak nie będzie

1:51wartością prawdziwą i wszystko wykona się tutaj poprawnie.

1:54Zresztą jeżeli teraz znajdziemy na nią, to

1:56zobaczymy, że może to być wartość logiczna bądź wartość undefined.

2:00Jeżeli jednak chcielibyśmy dokładnie

2:02określić jej wartość, to moglibyśmy tutaj po prostu utworzyć obiekt default props,

2:07który następnie możemy przypisać do naszego użytkownika.

2:10No i teraz nasza sytuacja nie za bardzo uległa zmianie ze względu na to, że dalej

2:14mamy tutaj wartość logiczną bądź undefined, a wynika to z faktu, że musimy

2:18połączyć ten nasz interfejs, a w zasadzie musimy go zmienić teraz na alias typu

2:22i za pomocą sekcji połączyć go z naszym obiektem.

2:26W ten sposób w momencie gdy przekażemy ten typ do naszego komponentu, to nagle

2:29okazuje się, że rzeczywiście wszystko jest w porządku.

2:32Mamy tutaj wartość logiczną niezależnie od

2:34tego, czy ten zostanie podany czy też nie, ze względu na to, że w przypadku nie

2:39podania tego zostanie czytana wartość domyślne.

2:42No i teraz mam nadzieję, że w tym kontekście wszystko jest tutaj jasne.

2:46Zatem, aby dodać domyślne propsy do

2:48naszego komponentu funkcyjnego, musimy w pierwszej kolejności przypisać odpowiednią

2:52właściwość zawierającą obiekt przechowujący domyślne wartości.

2:56Następnie musimy uwzględnić jego typ w definicji props dla tego komponentu.

3:00W tym przypadku skorzystaliśmy z sekcji

3:02typu i dzięki temu uzyskaliśmy dość elastyczną strukturę.

3:06No to teraz zobaczmy w jaki sposób wygląda to w przypadku komponentów klasowych.

3:10Zatem utwórzmy sobie teraz analogiczny

3:12obiekt User 2, który będzie komponentem klasowym.

3:16I tutaj jeżeli chodzi o propsy, o tym swoją drogą będziemy jeszcze mówić.

3:19Przekazujemy je wykorzystując klasę genetyczną.

3:22Jeżeli chodzi o sam typ, to mamy tutaj.

3:24Za chwilę go sobie zdefiniujemy, a

3:26tymczasem musimy przypisać właściwość statyczną o nazwie default props.

3:30I tu jak widzisz ustawiamy wartości, które nas interesują.

3:34Natomiast aby to wszystko działało musimy zdefiniować również odpowiedni typ.

3:38I tutaj podobnie jak w poprzednim przypadku posłużymy się operatorem typeof

3:43do tego aby pobrać typ właściwości default props, która jest statyczna, więc możemy

3:47odwołać się do niej dokładnie w ten sposób, a następnie wykorzystamy sekcję

3:51typów do tego, aby połączyć tutaj obiekt zawierający typy pozostałych właściwości.

3:56Zatem efekt końcowy jest tutaj całkiem podobny.

3:59I swoją drogą mamy tutaj jeszcze jeden

4:00mały błąd wynikający z tego, że nie wykorzystałem tutaj słowa kluczowego DI.

4:06Natomiast swoją drogą chciałbym, abyś

4:07zobaczył teraz w jaki sposób IntelliJ pomaga mi z importowanie takich klas.

4:12Zwróć uwagę, że prosi mnie tutaj po prostu wciśnięcie klawisza Owszem Enter.

4:16Do tego, aby zaimportować tą klasę i

4:18faktycznie to się stało tutaj automatycznie.

4:21Mamy tutaj oczywiście błąd wynikający z ESD, więc jeżeli teraz zapiszę plik,

4:25wszystko jest w porządku i w ten sposób IntelliJ pomaga mi w codziennej pracy.

4:29Wracając już tutaj w Switchu, to mamy

4:31tutaj kompletną definicję default props natomiast.

4:35Natomiast swoją drogą nic nie stoi na

4:36przeszkodzie, abyśmy jeszcze wykorzystali tutaj nasz element DOM i w ten sposób

4:40musimy się jeszcze odwołać do odpowiednich właściwości.

4:43No i wszystko jest tutaj w porządku.

4:46Rzeczywiście, jak sobie jedziemy na

4:47właściwość Active, no to mamy tutaj wartość logiczną.

4:51Zatem jak widzisz, doszliśmy tutaj do punktu, w którym zdefiniowaliśmy wartości

4:54domyślnych procesów zarówno w przypadku komponentu funkcyjnego, jak i klasowego.

4:59I tak naprawdę to.

5:00Wszystko co musisz wiedzieć na ten temat,

5:02ale chciałbym tylko zwrócić Twoją uwagę, że wykorzystywanie default props raczej

5:06już nie jest rekomendowane i w zamian wykorzystujemy możliwość ustawienia

5:09domyślnych wartości dla obiektu dokładnie tak jak to robiliśmy tutaj.

5:13Zatem w tym momencie to już wszystko słyszymy się za chwilę w następnej lekcji.