React: Instalacja narzędzi developerskich

16.8.x

0:00Cześć, w poprzedniej lekcji natknęliśmy się na kilka błędów, które musieliśmy debugować

0:04i okazało się to nie do końca przyjemne, ponieważ musieliśmy korzystać z kilku console log'ów

0:09i po prostu domyślać się co tam się dzieje. Przy okazji akurat w

0:13tym kodzie, który miałem obecnie w tamtej lekcji okazało się, że niektóre

0:17props'y były źle podane przez co mieliśmy turbo dużo

0:21błędów, tak jak teraz. Przy okazji dodałem tutaj taki prop type,

0:25którego jeszcze możesz nie znać, nazywa się shape, tylko zapomniałem o jednej rzeczy, twitters to

0:30jest tablica, która składa się z takich obiektów, które zawierają dopiero

0:34te klucze, więc musimy tutaj dodać jeszcze prop types array of i

0:41takim właśnie prop type'em określamy konkretnie

0:46jak ma wyglądać obiekt, który znajduje się w tablicy twitters. To jest o tyle

0:50fajne, że unikamy właśnie wielu błędów albo mamy ich zbyt wiele. Jeśli na

0:54przykład źle podajemy niektóre props'y. No, ale lepiej w tę stronę niż jeśli mielibyśmy

0:58nie wiedzieć o jakimś błędzie, który gdzieś tam w naszej aplikacji się pojawił. Generalnie

1:03jeśli zauważysz gdzieś podczas tworzenia tej aplikacji, że pojawił się błąd związany

1:07z prop type'ami, to wiedz że poprawianie prop types'ów to jest chleb powszedni i

1:11po prostu trzeba się tym zająć, żeby był zawsze porządek. One mają nam

1:15pomagać, nie przeszkadzać. No, ale są takie momenty kiedy po prostu musimy

1:20zrobić z nimi to co trzeba, więc jeśli widzisz jakiś błąd to śmiało możesz

1:24go naprawić, to też jest praktyka. Pozwoli ci to lepiej zrozumieć jak działają

1:28props'y w React'cie, a teraz już dosyć gadania i zainstalujemy dwa pluginy

1:32do naszej przeglądarki, które bardzo pomogą nam w debugowaniu naszej aplikacji. Pierwsze

1:36to React Dev Tools, możemy to pobrać z Chrome Web Store. Jeśli

1:41używasz innej przeglądarki, to śmiało sprawdź, powinien

1:45ten plugin być dostępny na wszystkie współczesne przeglądarki. Dodajemy

1:49sobie to do Chrome'a i zanim pokażę

1:55ci jak to wszystko działa to zainstalujemy sobie jeszcze drugi plugin od razu relax

2:00devtools. Również

2:04bardzo przydatny plugin, który pozwala nam lepiej zrozumieć jak działa nasz stoee

2:08i kiedy wrócimy sobie do naszej aplikacji to zauważymy,

2:12że nasz plugin zapalił się na czerwono. Mówi, że używamy Development

2:16Build of React, czyli właśnie tego którego potrzebujemy, ponieważ to on ma dostęp

2:21do rzeczy, które są w naszej zakładce React, to ona się pojawiła

2:25tutaj w naszym panelu devtools'owym. Jeśli

2:30sobie otworzymy ten panel, to zauważymy, że mamy tutaj dostęp

2:34do root'a, do providera, do browser router'a. Generalnie

2:38do wszystkich komponentów, które pojawiły się w naszej aplikacji i co

2:43lepsze, mamy dostęp na przykład do props'ów, które są podawane do tych komponentów,

2:47więc na przykład jeśli otworzymy sobie nasz button. On jest opleciony component

2:52link, który zawiera a i możesz

2:56zauważyć, że nasze komponenty oplecione są w

3:00Context Consumer. To jest związane z tym, że podajemy theme provider przez

3:04nasze styled-components, więc mamy dostęp do wszystkich tych rzeczy, które w theme'ie są

3:08podane, więc ten Context Consumer możemy ignorować jeśli chodzi o props'y,

3:14które są na niego podawane. Natomiast to co nas interesuje, to właśnie wszystko w tych tagach. To

3:19czego nie ma zakładka elements, a to czym dysponuje React, to

3:23właśnie bardzo czytelny dostęp do props'ów, które są podawane do komponentów,

3:27więc na przykład jeśli chcemy sprawdzić co jest podawane do naszego

3:31widoku twitters, to wystarczy, że znajdziemy sobie component twitters tutaj

3:35w tym drzewku. Wiem, że ona jest dość mocno zagnieżdżone, no,

3:40ale trzeba nauczyć się z niego korzystać po prostu. Możemy też znaleźć je

3:44w taki sposób, podając tutaj nazwę i wtedy trochę łatwiej jest

3:48nam znaleźć ten komponent, bez konieczności zagnieżdżenia się w 10 000

3:52różnych node'ów, więc jeśli teraz sobie zobaczymy tutaj na props'y

3:56to możemy zobaczyć, że podajemy tutaj twitters, które

4:01zawierają nasze notatki i w ten sposób

4:05jesteśmy dużo łatwiej w stanie debugować nasze aplikacje bez

4:09korzystania z console logów w każdym momencie, ponieważ zamiast logować, to bez

4:13sensu do naszej konsoli, możemy po prostu odpalić sobie react devtools. Zobaczyć,

4:18co mamy w środku u danego komponentu i po prostu łatwiej to zmieniać. Poza

4:23tym to, co jest jeszcze fajne to to, że możemy tutaj edytować bezpośrednio

4:27nasze props'y, więc jeśli tutaj wpisze na przykład Hello Kitty, to

4:34będzie to miało odzwierciedlenie w naszej aplikacji, oczywiście do momentu kiedy nie

4:38odświeżymy sobie naszej aplikacji. Na

4:42pewno jeszcze raz zajrzymy tutaj do tej zakładki, w trakcie budowania

4:46naszej aplikacji, a jeśli chodzi o redux devtools, to

4:51musimy je dodatkowo skonfigurować. Tutaj mamy link do instrukcji jak sobie wejdziemy, to

4:55zobaczymy co musimy zrobić. W naszej funkcji creator store musimy dodać

4:59taki drugi argument, który

5:04pozwoli devtools'om na dostęp do naszego store'a, więc teraz tutaj

5:08mamy create store. Podajemy redecer, jego nazwy nie

5:12zmieniamy i po przecinku podajemy ten komentarz razem

5:17z tą długą nazwą. Tu

5:21gdzie jeszcze jeden plus niepotrzebny i nasz ESlint ma do nas pretensje,

5:25że używamy podkreślników i tutaj nawet autorzy to przewidzieli,

5:29po prostu musimy wyłączyć na chwilę ESlinta, możemy skopiować

5:33sobie nawet te komentarze, te komendy po prostu wyłączają z ESlint'a

5:39w danym fragmencie kodu. To jest akurat wyjątek, na który możemy sobie

5:43pozwolić. Tu mamy jeszcze jeden problem, ESlint nie wie czym

5:47jest window, więc teraz szybciutko to naprawimy. To jest bardzo proste, musimy tutaj obok

5:52document dodać kolejny global i jest to window. Jest

5:56to po prostu kolejna zmienna globalna, z której korzystamy w naszym projekcie i teraz

6:00window nam zniknęło, więc to akurat było proste. Wrócimy sobie do naszego, okej

6:06i mamy tutaj już nasz store i teraz

6:11redux devtools będzie naprawdę świetnym narzędziem, kiedy będziemy

6:15wykonywać jakieś akcje na naszym storze. Natomiast teraz jedyne

6:19co możemy zrobić to podejrzeć sobie aktualny stan naszego store'a i

6:23mamy takie na przykład fajne grafy, które nam pokazują jakie

6:28elementy mamy w jakim obiekcie w naszym storze, mamy też

6:32drzewko, możemy sobie to rozwinąć, generalnie jest to naprawdę świetny plugin. Bardzo

6:36nam ułatwi życie jeśli chodzi o trakowanie tego, co będzie się działo po

6:41kolei w naszym storze, więc to na tyle jeśli chodzi o konfigurację naszych narzędzi deweloperskich

6:45i widzimy się w następnej lekcji.