React: Dodawanie react router

16.8.x

0:00Cześć, skoro komponent karty już mamy za sobą to teraz możemy przejść do tworzenia

0:05kolejnego dość poważnego komponentu w naszej aplikacji, a mianowicie do sidebar'a. Sidebar

0:11jest o tyle ciekawym komponentem, że zawsze znajduje się w tym samym miejscu, ma taką samą szerokość

0:15i wysokość i takie same elementy. Jedyne co się będzie zmieniać

0:19to jego kolor w trakcie tak jak będziemy nawigować po naszej aplikacji, więc

0:24teraz sobie do tego przejdziemy już teraz widzimy, że będzie on się składał z logo, trzech

0:28ikon nawigacyjnych i ikony do wylogowania, później

0:33sobie przejdziemy do tego ekranu, w którym będziemy się logować lub rejestrować,

0:38ale to w dalszej części rozwoju naszej aplikacji na razie tym się

0:42zupełnie nie przejmujemy, więc i ta ikona ten link będzie póki

0:46co nieaktywny. Zanim jednak przejdziemy do

0:50tworzenia naszego komponentu musimy zrobić mały porządek w naszym widoku root'owym,

0:55bo w tym w tej chwili, bo

0:59w tej chwili jeśli zaczniemy sobie tutaj jeszcze wrzucać router to będzie tego naprawdę

1:03sporo i zrobi nam się mały śmietnik, więc nie bez powodu tutaj

1:07pojawił się folder templates, do którego teraz wrzucimy

1:12sobie pierwszy template, który będzie właściwie jednym z

1:16głównych, a może i jedynym zobaczymy który będzie zawierał właśnie

1:20całą naszą struktura aplikacji, czyli ten sidebar, później jeszcze model

1:25do dodawania notatek i tak dalej, więc teraz stwórzmy sobie po prostu tutaj main

1:31template, możemy

1:37sobie skopiować zawartość naszego root'owego widoku, ponieważ to

1:43co się zmieni to children,

1:47który wrzucimy tutaj w to miejsce. Zmienimy

2:01też nazwę, żeby

2:07wyrzucić niepotrzebne importy i tutaj

2:11dostajemy ostrzeżenie, że children nie jest weryfikowane przez prop types,

2:16więc sobie to szybko naprawimy i z

2:23racji, że children jest dość specyficznym elementem, właściwie props'em

2:27to to co możemy zrobić to dodać tutaj prop type, który się nazywa element

2:31i mówić że on jest potrzebny, on jest wymagany i w ten sposób właśnie

2:35tym elementem będzie coś co jest podawane tutaj w tym

2:39miejscu, to będzie tylko jedno dziecko, to znaczy, że

2:43nawet jeśli będziemy wrzucać tutaj kilka rzeczy to musimy je opleść we

2:47fragment, czyli w te puste tagi, w taki sposób i

2:52dzięki temu ten protect nam będzie to przepuszczał, więc teraz

2:56wróćmy sobie naszego root'owego widoku na szybko, wywalę theme provider

3:00global style theme, zaimportujemy

3:04sobie main template i tak jak mówiłem możemy

3:10to wrzucić w taki sposób, teoretycznie nasza

3:14aplikacja w tym momencie powinna działać, okej,

3:19nasza aplikacja się włącza i wszystko wygląda na to, że jest w porządku. Style się

3:23włączają tak jak powinny, więc mamy tutaj trochę większy porządek teraz

3:27z naszym root'owym widoku i możemy przejść do implementowania React Router'a,

3:32który pozwoli nam na stworzenie sidebar'a, więc pierwsze co będziemy potrzebować do tego

3:36żeby nasz sidebar działał to React Router DOM. Możemy

3:40go teraz sobie zainstalować. Okej,

3:46skoro nasza paczka została zainstalowane to teraz możemy sobie wyciągnąć

3:50z tej paczki coś co będzie na pewno potrzebne,

3:55czyli browser router jest to jeden z router'ów dostępnych właśnie

4:01w React Router DOM, podamy

4:10teraz nasz browser router jako dziecko naszego main template i to tutaj

4:14właśnie będą się znajdować wszystkie nasze ścieżki, czyli

4:18notes twitters i articles. Za

4:27chwilkę sobie przejdziemy do implementacji tego, ale żeby to zrobić

4:31to musimy mieć gotowe te widoki dlatego teraz sobie w naszym folderze views stworzymy

4:36jeszcze te trzy pozostałe widoki, wydaje mi się że na razie nie musimy

4:40zagnieżdżać każdego widoku w folderze o tej samej nazwie. Mam

4:44wrażenie, że nasza aplikacja nie ulegnie aż takiemu rozrostowi, żeby było to konieczne,

4:49ponieważ w tych folderach zazwyczaj znajdują się jakieś dodatkowe pliki związane

4:53z konkretnym widokiem, na przykład związane ze stylami albo

4:57z jakimiś dodatkowymi rzeczami. Natomiast tutaj raczej te widoki nie będą aż tak skomplikowane, więc

5:01zrobimy sobie jeszcze twitters, notes

5:06i articles. Na

5:10razie to tyle. Teraz stwórzmy sobie takie podstawowe widoki i

5:14zaimportujemy

5:21je sobie teraz do naszego rootowego widoku, mimo

5:31że znajdują się w tym samym folderze to wydaje mi się, że możemy tutaj utrzymać tę konwencję

5:35importów absolutnych, w naszym

5:40index js musimy jeszcze poprawić tutaj ten import, ponieważ

5:44wywaliliśmy foldery root, żeby to się nie przestało ładować i

5:48teraz z naszego React Route'a musimy

5:52zaimportować sobie jeszcze dwa komponenty switch i route i teraz

5:58jeszcze takie małe pod przypomnienie z poprzedniego kursu, komponent switch pozwala nam

6:02na wyświetlanie tych route'ów, które spełniają props'a path,

6:06to znaczy, że jeśli mamy props'a path z taką ścieżkę i

6:10on ma wyświetlać komponent, który

6:15się nazywa nodes, ponieważ to będzie nasz główny komponent, nasz domyślny, który właśnie

6:19będzie takim domowym komponentem, to

6:26jeśli wejdziemy sobie na adres nasza apka, bez

6:30żadnego po ukośniku adresu, to wejdziemy właśnie w tą notes pod

6:35warunkiem, że dodamy tutaj exact z tego względu, że mamy jeszcze tutaj articles

6:40i twitters i teraz

6:44ten adres i ten adres zawierają

6:48slash, czyli teoretycznie zawierają ten adres, więc

6:53ten props exact pozwala nam na to, że wyłącznie jeśli

6:57taki adres jest wpisany to ten komponent się wyświetli. Jeśli

7:01by tego exact nie było to adresy articles i twitters

7:06wyświetlały by również ten komponent nodes, okej i

7:18teraz jeśli przejdziemy sobie na naszej aplikacji to

7:23widzimy, że jesteśmy na notes view, bo jesteśmy na tym adresie domowym, jak sobie

7:27wpiszemy articles, to jesteśmy na articles. Jak wpiszemy sobie twitters, to

7:35jesteśmy na twitters i to na tyle w tej lekcji, a w następnej

7:39zajmiemy się już tworzeniem naszego sidebar'a, który pozwoli nam na nawigowanie

7:43pomiędzy tymi widokami.