React: React Router - pierwsze kroki

0:00Cześć. Skoro mamy już przygotowaną naszą strukturę aplikacji, nasz

0:04folder jest gotowy do dalszej pracy, więc teraz stworzymy nasze podstrony

0:08i tylko powiem jaki jest cel w ogóle tego, co teraz będziemy robić. Stworzymy trzy

0:13podstrony, czyli TwittersView, ArticlesView i NotesView. TwittersView

0:20będzie tą naszą podstawową stroną, tą stroną główną, więc ona będzie

0:24się wyświetlać pod takim adresem, jak mamy tutaj. Drugim adresem będzie

0:28articles, a trzecim adresem będzie notes. To jest nasz

0:32cel i do tego będziemy dążyć w implementacji naszego React Router'a, ale

0:36zacznijmy od początku, czyli nowy folder views. TwittersView, to

0:43nasz pierwszy widok. Kolejnym będzie ArticlesView

0:48i kolejnym NotesView.

0:52Zauważ, że każdy widok kończy się na View, żeby

0:56po było wiadomo, co importujemy i że to importujemy jest widokiem.

1:01Chciałbym właśnie stosować taką strukturę. Uważam, że to jest bardzo

1:05fajne, kiedy patrzymy później na górę pliku i widzimy importy i widzimy,

1:09że coś się nazywa View, to nie będziemy tego mylić na przykład z komponentem, który

1:13może być reużywalny, więc teraz w każdym tych folderów stworzymy odpowiedni

1:17plik ArticlesView.js.  Oczywiście, NotesView.js i TwittersView.js. Stwórzmy

1:36sobie zupełnie podstawowy komponent. Zaimportujemy React'a,

1:41stworzymy prostą funkcje ArticlesView. Funkcja

1:48strzałkowa, zwracamy po prostu informację,

1:52że "This is an Articles View". Wyeksportujemy

1:59to. Skopiujemy

2:04to wszystko, bo będziemy podmieniać tylko nazwę. Tutaj zrobimy NotesView. Tutaj

2:12również. Robimy to po to, żeby użyć

2:18naszego React Router DOM i React Router, o którym powiem ci za

2:22chwilę i żebyśmy widzieli, co robimy, kiedy zmieniamy nasze

2:26ścieżki. Okej,

2:34to już mamy. Teraz zaimportujemy sobie wszystkie te trzy ścieżki i

2:38na razie nie będziemy ich używać w

2:42naszym JSX'ie. Z tym sobie poczekamy. Teraz to, co musimy zrobić, to

2:46zainstalować React Router i React Router Dom. Żeby to zrobić musimy

2:50odpalić naszą konsolę i wpisać yarn add react-router

2:55i react-router-dom

2:59i kiedy

3:03mamy już zainstalowane nasze dwie paczki, możemy teraz zaimportować to, co potrzebujemy

3:07w naszym widoku, a będzie się to nazywać BrowserRouter

3:11oraz Route i uwaga importujemy

3:16to z react-router-dom. W

3:21tym miejscu, teraz użyjemy komponentu

3:26BrowserRouter. To

3:31jest taki komponent router'a, który odpowiada za prawidłowe

3:35nawigowanie po naszej aplikacji, właśnie w przeglądarce. Stąd

3:39jego nazwa i to, co jest istotne dla BrowserRouter'a to to, żeby on miał tylko

3:44jedno dziecko, więc teraz zapakujemy to wszystko we fragment, żeby on

3:48w trakcie budowania naszej aplikacji, nie zaczął mieć żadnych problemów

3:52z nami i teraz, żeby wskazać, że mamy

3:56kilka ścieżek naszej aplikacji, musimy użyć komponentu drugiego,

4:00który zaimportowaliśmy, czyli Route. Użycie

4:04Route'ów jest naprawdę bardzo proste i Route przyjmuje props'a, który nazywa

4:08się path, gdzie podajemy jako string ścieżkę. Może

4:13być to string, może być to zmienna. Przy bardziej skomplikowanych rzeczach, ale u

4:18nas jest to zwykły string i w tym przypadku mówimy, oczywiście,

4:22o ścieżce głównej, czyli tej,

4:26którą mamy teraz, bez żadnego elementu po naszym

4:31slash'u i drugim props'em, który przyjmuje Route, jest komponent,

4:35więc wygląda to ten sposób, że podajemy

4:42tutaj nazwę komponentu, który zaimportowaliśmy na górze

4:46i działa to w następujący sposób. Jeśli jesteśmy na

4:50ścieżce głównej i spełniamy ten warunek, to wyświetlamy TwittersView,

4:56czyli komponent, który zaimportowaliśmy. Jeśli

5:01jesteśmy na ścieżce articles, to

5:05wyświetlimy ArticlesView. Jeśli

5:11jesteśmy na ścieżce notes, to wyświetlimy oczywiście

5:16NotesView. Póki co, wszystko się

5:21zgadza, ale popatrz co zdarzy się, kiedy wpiszę notes. W

5:25tym momencie nasza ścieżka spełnia dwa warunki, ponieważ jesteśmy

5:29nadal na ścieżce, która wygląda w ten sposób, ale jesteśmy

5:33też na ścieżce, która ma coś po naszym slash'u i może wydawać się to kontrintuicyjne,

5:38ale tak właśnie działa ReactRouter. Jest to zamierzony efekt, ponieważ

5:43możemy mieć kilka komponentów na jednej ścieżce, na przykład

5:47jakiś sidebar albo coś takiego, jakiś modal, o czym opowiem

5:51ci później i dlatego twórcy ReactRouter'a wymyślili

5:56to właśnie w ten sposób. Jeśli chcielibyśmy, żeby ta ścieżka była

6:00tylko i wyłącznie na stronie głównej, czyli nie

6:04pojawiła w żadnej innych ścieżek, to musimy tutaj dodać specjalnego propsa,

6:08który nazywa exact i w tym

6:12momencie, jeśli wpiszemy sobie na przykład articles albo

6:17notes, to pojawia już się nam tylko jeden komponent. Na

6:23to wszystko jest jeszcze jeden sposób, który ja uważam, że jest jeszcze bezpieczniejszy, ale o

6:27tym opowiem ci już w następnej lekcji.