React: Stworzenie sidebara

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się z sukcesem zaimportować i

0:04zaimplementować browser router,czyli komponent znajdujący

0:08się w React Router DOM w bibliotece, która pozwala nam na nawigowanie pomiędzy

0:13stronami naszej aplikacji, a teraz już przechodzimy do tworzenia sidebar'a, który

0:17pozwoli nam no właśnie na przechodzenie za pomocą takich przycisków

0:21nawigacyjnych po naszych widokach, więc czym będzie

0:25sidebar, moim zdaniem będzie to organizm, ponieważ jest to bardzo

0:29poważny spory komponent składający się z wielu elementów. Dlatego

0:34teraz w folderze organizm sobie stworzymy sidebar, a

0:39wewnątrz niego oczywiście sidebar js

0:43oraz sidebar, stories js. Tutaj

0:50jeśli chodzi o pokazywanie jak działa router wewnątrz storybook'a

0:54to będzie bardzo ciekawy case, ale to sobie opowiemy za chwilę, na razie

0:58stworzymy sobie sidebar'a. Zanim

1:07przejdziemy do stylowania naszych komponentów za pomocą styled-components

1:12to spróbujmy sobie rozrysować w takim zwykłym JSX'ie strukturę

1:16tego, mamy tutaj logo, mamy trzy button'y i mamy

1:20jeszcze ten button do wylogowywania, więc

1:26na pewno musimy zaimportować sobie tutaj button icon i teraz jeśli

1:34na brudno mielibyśmy to napisać to tutaj mamy logo, tutaj mamy div'a, który zawiera trzy razy

1:40button icon i button icon

1:46przyjmuje props'a icon. Te

1:53ikony znajdziemy w naszej kasetach w tym miejscu, więc możemy je

1:57sobie teraz zaimportować, wydaje

2:02mi się że nawet mamy to w naszym story

2:06tutaj, o nie musimy ich importować, możemy po prostu

2:10je skopiować stąd, plus

2:23na razie możemy sobie wywalić, kolejność

2:27jest taka ołówek twitter'y żarówka

2:32i logout wyeksportujemy

2:37sobie nasz sidebar i przejdziemy do naszego stories,

2:41żebyśmy mogli podejrzeć czy to w ogóle wygląda jakoś. Okej

2:55mamy nasze pierwsze proste story napisane, storybook

3:03nam ciągle działa w tle, więc teraz musimy tylko wejść sobie na jego

3:08adres, okej nasz sidebar

3:21się pojawił i wygląda chyba całkiem okej, to

3:25znaczy po prostu się nie wywalił bo oczywiście w żaden sposób nie wygląda

3:29na razie jak sidebar, natomiast to co widzisz i możliwe, że nie

3:33mówiłem o tym wcześniej to pojawiły się tutaj foldery. Foldery

3:37w storybook'u to jest o tyle fajna rzecz, że możemy to sobie właśnie pogrupować w taki sposób i od

3:41razu wiemy do jakiej grupy należy dany komponent, jak stworzyć taki folder,

3:46nie ma nic prostrzego, po prostu trzeba zrobić nazwę ze

3:50slashem przed nazwą naszego komponentu, więc jeśli robimy story dla sidebar'a

3:54to mówimy organisms sidebar i storybook automatycznie doda

3:58do takiego folderu organism, a teraz

4:05wróćmy sobie naszego sidebar'a, ponieważ nasze button icon, to tak naprawdę będą

4:09linki z React Router i moglibyśmy to

4:13zrobić w taki sposób, że po prostu wrzucamy w linki nasze

4:17button icon, ale to nie będzie do końca poprawne, dlatego musimy zrobić to

4:22nieco inaczej. Najpierw sobie zaimportujmy komponent link z naszego

4:26react-router-dom, a

4:33teraz nasze styled-components możemy

4:37użyć jako inny komponent poprzez

4:41props as w taki sposób i wtedy

4:48możemy też mu powiedzieć do jakiej ścieżki ma prowadzić, w

4:52tym przypadku notatki będzie to ścieżka

4:56główna, to

5:02będzie twitters, a tu

5:06będzie articles. Przycisk

5:22do wylogowywania również ustawimy na ścieżkę główną i teraz

5:28problem się pojawia w momencie kiedy chcemy wrócić sobie do storybook'a

5:32a on mówi nie możemy używać linków poza routerem, więc to

5:36co musimy zrobić to zaimplementować nowy dekorator w naszym storybook'u,

5:40który pozwoli nam na używanie linków i podglądanie czy one faktycznie działają. Istnieje

6:00do tego specjalna paczka, która się nazywa storybook react router i teraz ją

6:04sobie zainstalujemy naszym projekcie. W czasie jak

6:17się instaluje podejrzymy sobie jak ona działa, teoretycznie jedyne co musimy zrobić to zaimportować

6:22story router i dodać go jako dekorator w tym miejscu, więc

6:26teraz przejdźmy sobie do naszego kodu zaimportujmy

6:31sobie stary router, który zainstalowaliśmy, dodamy

6:38tutaj dekorator, w którym zainicjujemy sobie nasz story router i teraz

6:43jeśli odpalimy storybook'a

6:48to nasz rauter powinien

6:52zacząć działać. Okej,

7:06poznikały nam nasze linki, więc coś chyba jednak poszło nie tak, sprawdźmy

7:14czy to jest wina naszego button icon

7:18czy może czegoś innego. Jeśli sobie wrzucimy

7:22tutaj link, okej.

7:28Chyba wiem czy czy co będzie przyczyną. Link

7:33jest normalnie komponentem a, tag'iem a, a

7:37tag a domyślnie jest inline'nowy, a

7:41nasz button icon ma szerokość i wysokość czego

7:46komponenty inline'owe nie rozumiemy, więc musimy tutaj dodać Display

7:50Block i to powinno nam naprawić dokładnie i to nam

7:54naprawiło całą sytuację i teraz

7:59jak widzisz nasze actions logują

8:04nam co się dzieje podczas klikania w poszczególne button'y. W

8:09ten sposób widzimy, że nasz router działa i skoro

8:13z tym już się uporaliśmy to teraz czas na ostylowanie tego sidebar'a,

8:18ale to zostawiam Tobie jako zadanie domowe jako zadanie do wykonania,

8:22ponieważ już wiesz dosyć o styled-components i wydaje mi się, że będzie

8:26to po prostu dla ciebie przyjemne, żeby taki sidebar sobie samodzielnie ostylować,

8:30ja tylko przejdę tutaj do design'ów, one również są dostępne jako załącznik do tego

8:35kursu, natomiast jeszcze tutaj pokażemy, że sidebar

8:39ma 153 piksele szerokości. Możemy też użyć do

8:43tego jakiejś relatywnej względem naszego viewportu szerokości, natomiast moim

8:48zdaniem on nie powinien się zmieniać w zależności od tego jaka będzie szerokość

8:52naszego ekranu. Sidebary raczej powinny mieć jakąś statyczną

8:56szerokość. No i oczywiście jest całą rozpiętość naszej,

9:00naszego ekranu jeśli chodzi o wysokość. Jestem ciekaw jak ci to pójdzie, w następnej

9:05lekcji sobie to podsumujemy i przejdziemy dalej do development'u naszej aplikacji.