React & TypeScript: Render props

0:00Tą lekcją dochodzimy już do końca

0:01typowania psów i zostały nam do omówienia owce.

0:05Zobaczmy więc jak wygląda typowanie

0:08psów i w tym celu utworzymy sobie następującą strukturę.

0:12Całość oprzemy tutaj o wykorzystanie dwóch komponentów.

0:15Będzie to komponent Mysz wędrujący nam

0:17Kopa, a konkretnie obrazek z kotem podążający za wskaźnikiem naszej myszy.

0:22Na ten moment wygląda to tak, że

0:23rzeczywiście wykorzystujemy tutaj render props, ponieważ przekazujemy funkcję.

0:28No to teraz musimy w pierwszej kolejności zadbać o to, aby utworzyć te komponenty.

0:32Zatem w pierwszej kolejności utworzymy

0:34sobie kota, czyli nasz komponent funkcyjny.

0:37Ten na razie nie będzie nam nic zwracał.

0:39Następnie utworzymy sobie mysz, która w

0:41tym przypadku będzie komponentem klasowym i zrobię to ze względu na to, że będziemy

0:45wykorzystywać tutaj stan i jednocześnie nie chcę już sięgać po huki.

0:49Mam nadzieję, że to rozumiesz.

0:50A ja w międzyczasie dodam tu jeszcze konstruktor i metoda render.

0:54No to teraz musimy zająć się tym, aby

0:55dodać tutaj odpowiednie type i w tym celu jak zwykle wykorzystamy interfejsy.

1:00Pierwszym z nich będzie interfejs @ Space

1:02zawierający właściwości X oraz Y, czyli pozycję naszej myszy.

1:06A drugim interfejsem będą Propsy dla naszego kota.

1:09I jeszcze tutaj zmienię tylko nazwę poprzedzając ją wielką literą I.

1:13I zwróćcie uwagę, że wykorzystaliśmy tutaj typ @ State pochodzi również z jak ta.

1:18I tutaj oczywiście musimy zmienić jeszcze nazwę w tym miejscu.

1:21No to teraz mamy nasze interfejsy, więc

1:23wystarczy, że przypiszemy je do naszych komponentów.

1:26Jeżeli chodzi o komponenty klasowe i ich

1:29stan oraz propsy, to będziemy sobie jeszcze o tym mówić, ale

1:32przekazujemy je w tym miejscu w następującej kolejności.

1:35Na początek znajdują się tutaj propsy apa tutaj Typy stanu.

1:39W naszym przypadku stanem będzie utworzony wcześniej interfejs.

1:42A jeżeli chodzi o propsy naszej myszy, to musimy je tutaj utworzyć.

1:46Jeżeli się nad tym zastanowimy to wiemy, że mysz będzie posiadać propsy render,

1:51która będzie przyjmować jako parametr aktualny stan naszej myszy, a jako

1:55zwracana wartość będziemy mieć tutaj element g sex.

1:58Z tego powodu i nasz interfejs będzie wyglądał w następujący sposób.

2:02Mamy tutaj właściwość render, do której przekazujemy nasz stan posiadający

2:06oczywiście odpowiedni typ, no i zwracający element g sex.

2:10Zatem wygląda na to, że propsy naszej myszy są już tutaj gotowe i aby upewnić

2:14się, że wszystko jest tutaj w porządku, musimy je przekazać również w tym miejscu.

2:18O tym, dlaczego tak się dzieje, będziemy sobie jeszcze mówić, a tymczasem

2:21uzupełnimy sobie zwracane przez te komponenty wartości.

2:24Konkretnie jeżeli chodzi o naszego kota,

2:26to będziemy zwracać tutaj obrazek zawierający obrazek kota oraz na bieżąco

2:31będziemy aktualizować jego pozycję względem okna przeglądarki.

2:35Z kolei jeżeli chodzi o samą mysz, będzie tutaj nieco bardziej skomplikowanie,

2:38ponieważ będziemy musieli obsłużyć samą pozycję myszy.

2:41W związku z tym tworzymy sobie tutaj

2:43elementy posiadające rozmiar pełnego okna przeglądarki, a następnie będziemy

2:47nasłuchiwać zdarzenia przesuwania myszy i odpowiednio reagować metodą smooth.

2:53Za chwilę ją sobie utworzymy, a tymczasem musimy zająć się również tym, aby

2:56wyrenderować przekazanego klapsa i przekazać do niego aktualny stan.

3:00Zatem sytuacja wygląda teraz tak, że wystarczy, że utworzymy teraz tą metodę.

3:05Do tej metody zostaje przekazany event, a

3:08jeżeli chodzi o jego typ to oczywiście będzie to Math Event.

3:11Przy czym nie chodzi nam konkretnie o

3:13Massive, tylko Max Event pochodzący z bezpośrednio zwierzaka.

3:17W tym momencie zniknęły nam tutaj błędy i wszystko jest w porządku.

3:20A jeżeli chodzi o typowanie eventów, to będziemy sobie o tym jeszcze mówić.

3:23W związku z tym nie zatrzymuję się tutaj zbyt długo.

3:26No to teraz wewnątrz tej metody musimy zadbać o zaktualizowanie stanu naszego

3:30komponentu, który w tym miejscu będzie przekazany do naszego kota.

3:34W praktyce po prostu sięgamy po metodę set

3:36state i przekazujemy nowy stan naszego obiektu.

3:39No to teraz wygląda na to, że wszystkie

3:41nasze typy zostały tutaj odpowiednio dodane.

3:44No to teraz już ostatnim krokiem, aby to

3:46wszystko nam działało będzie ustawienie domyślnego stanu naszego komponentu.

3:49I tutaj oczywiście musimy zamienić naszą metodę Smooth na funkcję strzałki.

3:54W ten sposób nie utracimy tutaj dostępu do dysku i będziemy mogli ustawić stan.

3:59No to teraz jeżeli przejdziemy do przeglądarki, to okaże się, że

4:02rzeczywiście mamy tutaj losowego kota podążającego za naszą myszą.

4:06Zatem jak widzisz w przypadku render procesów typowanie jest dość złożone, ale

4:11jednocześnie nie jest to nic, czego nie bylibyśmy w stanie obsłużyć.

4:14Oczywiście dodałem tutaj elementy

4:16dotyczące obsługi komponentów klasowych i typowania w ich przypadku stanu.

4:21Natomiast tak jak powiedziałem, jeżeli coś tutaj nie jest jasne, to nie przejmuj się

4:24tym, proszę, ponieważ będziemy o tym mówić w jednej z kolejnych lekcji.

4:28W każdym razie najważniejsze jest tutaj

4:29to, abyś rozumiał to, w jaki sposób możemy typować poszczególne elementy naszych

4:34komponentów do tego, aby odwzorować wszystko to, co robimy w tej akcji.

4:39Jeżeli chodzi o temat render to psów i tym

4:41samym w ogóle psów uważam go za zakończone, aczkolwiek oczywiście jeszcze

4:45na przestrzeni kolejnych lekcji będziemy do niego wracać.

4:48Tymczasem dzięki za uwagę i zapraszam Cię do kolejnych lekcji tego kursu.