Nowoczesny React: React Dev Tools

0:00Rozpatrzmy sobie następujący problem.

0:02Gdybym chciał przetestować, czy np.

0:04Isloading wyświetla się poprawnie w trakcie projektowania tej aplikacji,

0:08to oczywiście mógłbym zmienić stan.

0:10Widzimy, że to się bardzo szybko tutaj odświeża.

0:12Mogę sobie to zmienić z false na true, ale nie do końca, bo przecież ten use

0:17effect steruje tym jest loading.

0:19Co by było, gdybym chciał zobaczyć, czy faktycznie dobrze sobie tutaj kombinuję?

0:23Chciałbym zobaczyć właśnie loading people.

0:26Zauważ, że ja zastosowałem sztuczkę z trolingiem, czyli spowolniłem sobie

0:30internet tylko i wyłącznie po to, żeby zobaczyć sobie czy

0:33wszystko działa poprawnie.

0:34I to loading people zostało tutaj wyświetlone.

0:37Okazuje się jednak, że możemy do tego dojść troszeczkę inaczej.

0:40Możemy właśnie debugować sobie aplikację i podmieniać jej propsy i

0:45stan, jeśli tylko chcemy.

0:47Musimy w tym celu użyć tzw.

0:49dev tool React w swojej dokumentacji Tutaj w zakładce Learn Installation mamy

0:55coś takiego jak React Developer Tools.

0:58I to jak Developer Tools pozwala Ci zainstalować w zależności od

1:01tego jaką masz przeglądarkę.

1:02Ja mam przeglądarkę opartą na Chromium, więc dodam to sobie właśnie tutaj.

1:07Jeżeli dodam rozszerzenie, to zwróć uwagę, że będziemy mogli teraz

1:12mieć dodatkowe elementy.

1:14Czyli mamy dodany właśnie tą wtyczkę.

1:16Tą wtyczkę możemy sobie tutaj przypiąć.

1:18Zobaczmy sobie jak ona działa i zobaczmy to sobie w naszej aplikacji.

1:24Często jest tak, że musimy sobie dodatkowo odświeżyć tego taba.

1:29Widzimy, że tutaj mamy React Developer Tools ma dostęp do tej strony.

1:32Co więcej, React Developer Tools będzie miał dostęp tylko do stron,

1:35które są w fazie developmentu.

1:37Czyli w momencie gdy wybudujemy sobie produkcję to React Developer

1:41Tools już Ci nie pomoże.

1:42Natomiast zobaczmy jak one sobie działają.

1:44Gdybyśmy otworzyli sobie F12, czyli tutaj mamy zobacz nowe narzędzie

1:49Components i Profiler.

1:51Nam potrzebny jest Components i tutaj możemy bardzo podobnie jak masz taki

1:55selector, który zaznacza Ci inspektorem.

1:58Właśnie tutaj możesz sobie biegać po stronie, zaznaczać.

2:01Tak samo tutaj w Components mamy taki komponent Inspector i możemy

2:05sobie zaznaczać nasze komponenty.

2:07Ja bym chciał zobaczyć sobie to list of people na przykład.

2:10I to jest moje people page.

2:12I zobacz, że na tym People page mamy tutaj propsy, które mamy i hugs,

2:17czyli mamy nasz stan.

2:19I zobacz, że tutaj możemy sobie modyfikować stan i sprawdzać sobie

2:23na przykład tą wartość is loading.

2:25Zwróć uwagę, że teraz mogę sobie jak gdyby przestawić wartość is loading

2:30właśnie z tego state u.

2:31I tutaj jak gdyby to jest drugi element, który mi się uruchomił, czyli muszę sobie

2:35to zobaczyć w ten sposób, że tutaj jako pierwszy mam people, jako drugie jest is

2:40loading i to jest loading mam właśnie tutaj, czyli to jest state true.

2:44Zmieniam sobie to natychmiastowo. Strona false.

2:47Zobacz, że mam też dostęp do stanu, gdzie mógłbym sobie edytować pewne

2:51wartości, które tutaj są.

2:53Widzimy, że tutaj mam dostęp na przykład do Ewa.

2:57Chciałbym sobie to wykasować i na przykład Johna też likwidujemy z tego stanu.

3:02Co się stało?

3:03Oczywiście to natychmiastowo ma efekt na widoku, czyli na widoku.

3:08Mogę sobie to sprawdzić, edytować.

3:11Mógłbym też zobaczyć, co się dzieje z aplikacją.

3:13Na przykład jak zmienię search.

3:15Zobacz, że Search text jest tutaj przedostatnim z Use

3:18State u, który używamy.

3:19Spróbujmy sobie to zmodyfikować i zobaczmy jak aplikacja wtedy się zachowuje.

3:24Czyli tutaj w Components zaznaczmy sobie właśnie ten komponent.

3:29To jest moje people page.

3:32I tutaj zauważ, wrzucę sobie właśnie jakiś tekst jako test.

3:36W momencie, gdy sobie to zaktualizuję, widzimy, że nie aktualizuje mi

3:40się on tutaj na tym Searchbarze. Dlaczego?

3:43Dlatego, że zwróć uwagę, że nie korzystaliśmy tam kompletnie ze stanu.

3:47Czyli widzimy tutaj Ten prosty test pokazuje nam, że to nie jest control

3:52komponent, czyli input nie jest tutaj kontrolowany.

3:56Co za tym idzie w Searchboxie Boxie.

3:59Tutaj nie korzystamy po prostu ze stanu, który aktualizowałby tą wartość

4:04walił w inpucie, która byłaby tutaj.

4:06Nie musimy tego robić.

4:08Akurat to jest taki test tego, że filtrowanie nam działa.

4:11Czyli jeśli tutaj wpiszemy na przykład mar, powinniśmy dostać marka.

4:15Natomiast widzimy, że to filtrowanie działa niezależnie od tego,

4:19jaka tu jest wpisana wartość.

4:20Innymi słowy, możemy sobie tutaj oczywiście spróbować przetestować,

4:24skasować te rzeczy i to nasze UI działa poprawnie.

4:27Natomiast widzimy, że jak gdyby ten prosty test wykazuje, że ten input nie jest

4:32kontrolowany, czyli jego value nie zależy od tego stanu, który mamy tutaj.

4:36Żeby tak było, musielibyśmy zrobić w ten sposób coś mniej więcej takiego, że ten

4:40Searchtext musiałby być przekazywany w jakiś sposób do tego właśnie naszego

4:45Searchboxa i w drugą stronę, więc w taki sposób musielibyśmy to zrobić.

4:49Natomiast akurat w naszej aplikacji nie ma takiego wymogu, żeby tak było.

4:53Możemy to zostawić właśnie w ten sposób.

4:56Zauważ, że możemy testować również inne widoki, Czyli gdybyśmy mieli np.

5:00Ad person zobaczymy, że ten outlet nam się zmienia.

5:03Widzimy dokładnie co się dzieje i to ad page, że tutaj jest.

5:07Widzimy, że ono ma swój page layout.

5:09I tutaj dla przykładu spróbujmy sobie zmienić props.

5:12Czyli widzisz, że propsy są tutaj z nazwy wymienione.

5:14Czyli jeśli nie używamy huków, dostajemy z nazwy te elementy, które

5:18tutaj są przesłane.

5:19Mamy tutaj coś takiego jak title i możemy sobie zmienić to na przykład na Hello.

5:24To powinno nam się wtedy zaktualizować i widzimy jak to działa, jak korzystać

5:28z tego narzędzia i dlaczego.

5:29Myślę, że widzisz już potencjał w tym narzędziu.

5:32Potencjał polega na tym, że możemy sobie w ten sposób debugować pewne elementy.

5:36Może się okazać, że na przykład coś nie działa nam tak, jakbyśmy chcieli, Coś nie

5:41przekazuje się przez propsy i zamiast konsolidować te elementy, możemy sobie

5:45sprawdzić, czy dobrze sobie to zrobiliśmy, czy dobrze sobie zaprojektowaliśmy.

5:49Tutaj na przykład możemy do prototypowania użyć tego narzędzia.

5:53Załóżmy, że chcemy tutaj wpisać sobie jakiś error message, czyli tutaj mamy

5:57error, Jeśli go sobie tutaj dopiszemy, to widzimy co się dzieje.

6:01Czy ten nasz box się pojawia?

6:03Czy ten message się faktycznie pojawia w momencie, gdy mamy błąd?

6:06Widzimy również, że zniknął nam Searchbar.

6:09Czyli niezależnie od tego czy to isloading jest włączony czy nie, prawda?

6:13Znaczy jest, loading się pojawi.

6:15Natomiast jeżeli isloading jest ustawiony na false, a nasz error jest tutaj, możemy

6:20sobie sprawdzić właśnie tą wartość.

6:22Zobacz czy to działa poprawnie.

6:25Mamy error, więc searchbar nie pojawia się.

6:28Ten Searchbox nie będzie tutaj dostępny.

6:30Możemy sobie też ten error wyzerować, czyli zrobić z niego pustego stringa i

6:34widzimy, że wtedy wszystko działa ponownie.

6:37Czyli mamy tutaj hooki, mamy ich kolejność.

6:40Pamiętaj, że ta kolejność jest istotna dla Reacta i tutaj w devtoolach dostaniesz je

6:45w tej kolejności, w której zostały tutaj wywołane, więc w ten sposób możemy sobie

6:50próbować debugować tą stronę i sprawdzać, modyfikować jej wartości w zależności

6:55od tego, co jest nam potrzebne.

6:57I widzimy też ułożenie naszych komponentów.

6:59Możemy też sprawdzić wygenerowane klucze dla każdego komponentu.

7:02Zobacz, że tutaj mamy klucze, które są ID.

7:05Zainwestowaliśmy właśnie w ID, żeby te bloki miały klucze typu ID z naszego

7:11backendu i to nam faktycznie elegancko tutaj działa.

7:14Możemy sobie podejrzeć ok.

7:17Tutaj możemy sobie zauważyć na przykład na konsoli mamy ID child at least should have

7:22unique prop, czyli check render of people page, see for more information.

7:27Czyli mamy tutaj panel block, który gdzieś nam powtarza się ten sam klucz.

7:31Musielibyśmy zobaczyć, czy na przykład nie mamy powtórzeń ID w naszym DB JSON.

7:35Być może tak się złożyło, że któryś z naszych ID się tutaj powtarza,

7:40to wtedy winą obarczylibyśmy.

7:43Zobaczmy sobie to właśnie w narzędziach deweloperskich.

7:45Winą obarczylibyśmy chyba nasz JSON Server.

7:49Sprawdźmy to jeszcze w naszym DB JSON.

8:03Nie mamy tutaj Powtórzonego ID, a więc prawdopodobnie efektem tego działania jest

8:08przygotowany przez nas skeleton values, czyli to, co mamy tutaj.

8:12Tutaj musielibyśmy sobie w tym make empty person przygotowywać jakieś randomowe ID.

8:18To randomizowanie tutaj nie będzie nam przeszkadzało w momencie, w którym

8:22będziemy sobie przygotowywać skeleton values, ponieważ robimy to jednorazowo.

8:26Zwróć uwagę, że owszem, te wartości są randomizowane, ale one są zrobione

8:30jednorazowo w momencie, gdy aplikacja startuje.

8:33Więc mamy make person z ID, które są losowane, ale to losowanie jest jak gdyby

8:39tylko w momencie startu naszej aplikacji.

8:42To, czego nie możemy robić, czyli to id random, które mielibyśmy tutaj w Kluczach,

8:46nie możemy robić tu w tym miejscu. Czyli tutaj.

8:49Nie mogę tego randomizować za każdym razem, gdybym chciał

8:52sobie przypisać klucz.

8:53Znaleźliśmy więc problem, który wynika z tego, że tutaj nie dostarczyliśmy

8:58sobie ID ków do tego make and person.

9:00Zobaczmy czy teraz wszystko działa poprawnie.

9:03Zauważ, że jest to akurat problem, którego nie byliśmy w stanie wychwycić tutaj

9:07podczas sprawdzania tego components, Ale z kolei poszliśmy w drugą stronę, czyli

9:12zauważyliśmy, że tutaj każdy z tych kluczy jest unikatowy, jest prawidłowy.

9:18Sprawdziliśmy to jeszcze dodatkowo w DB JSON.

9:20Natomiast skoro tak, to ostatnim elementem, który nam pozostał do

9:24sprawdzenia jest to, że właśnie ten filtr People będzie na bazie oczywiście People.

9:31Z kolei People składamy sobie jako stan początkowy, który jest tutaj w State.

9:35I tutaj zabrakło nam po prostu ID ków.

9:39To jest nam potrzebne tylko z punktu widzenia Skeletona, ale znaleźliśmy pewien

9:42błąd i byliśmy w stanie go poprawić.

9:45Właśnie do tego typu celów używamy narzędzi dev Tools do sprawdzenia sobie

9:50widoków, do podmiany stanu i do podmiany propsów oraz debugowania aplikacji.