React: Pierwszy komponent

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się skonfigurować nasz storybook, natomiast

0:04teraz stworzymy nasze pierwsze story dla komponentu button. W tej chwili

0:08możemy już sobie wywalić ten folder stories, który nie będzie nam potrzebny, ponieważ storybook poszukuje

0:12plików ze stories w folderze components, więc tutaj w tym miejscu stworzymy

0:17sobie teraz button stories js i stworzymy

0:22nasze pierwsze story, posłużymy się oczywiście dokumentacją, mamy

0:39to akurat fajny przykład button'a, który sobie skopiujemy i zaimplementujemy to w

0:45nasz sposób. Z racji,

0:51że baton znajduje się w tym samym folderze co story, możemy po prostu zaimportować go

0:55w ten sposób, action

1:01na razie sobie wywalimy i takim podstawowym elementem story

1:06jest właśnie stories of które zawsze zaczyna każde story. W tym

1:11momencie deklarujemy co to ma być. Jest to button, który

1:15jest modułem i każdy add, to będzie osobne

1:19story, to będzie osobny punkt w tym naszym explorerze po lewej stronie będzie

1:23lista i button będzie tym zewnętrznym pierwszym elementem, a kolejnymi

1:27właśnie dziećmi jego będą kolejne podpunkty,

1:31które są reprezentowane przez ten add, więc

1:36teraz jedno i drugie sobie wywalimy i stworzymy

1:41własny. Pierwsze co podajemy tutaj, to oczywiście nazwa

1:45tego story, więc możemy powiedzieć, że to będzie primary. Kolejną

1:50rzeczą jest funkcja strzałkowa, która po prostu zwraca nam jsx i

1:54w tym miejscu będzie to nasz button, nasz button,

1:58który może mieć jakikolwiek tekst. Drugim

2:05button'em będzie secondary, który

2:09również będzie miał funkcję strzałkową i tutaj też zwrócimy button, z tym

2:16że tutaj dodamy mu props'a secondary i teraz

2:25jeśli wszystko poszło dobrze, jeśli zbudujemy sobie teraz nasz storybook,

2:32to zobaczymy w storybook'u właśnie te dwa story, okej

2:45i na pierwszy rzut oka widać, że coś jest nie tak. Przede wszystkim wam się nie załadował,

2:49a po drugie kolor się nie zgadza i kolor to jest akurat moja wina, ponieważ

2:53tutaj w komponencie button najprawdopodobniej pomyliłem kolory,

2:57teraz je sobie podmienimy, przy

3:01okazji możesz zobaczyć jak szybko odświeża się styled-component, bo

3:05już wszystko się zgadza i teraz druga rzecz, która

3:09nas może nieco bardziej zaniepokoić to fakt, że nie załadował się nam font, wynika on

3:14z tego, że co prawda on jest zadeklarowany tutaj, ale tak jak już mówiłem wyłączyłem go sobie

3:18lokalnie na moim komputerze tak, żeby nie było tak, że nie

3:22mam tego fontu, a tak, żeby nie było tak,

3:26że ten font się nie ładuje, a mój komputer i tak serwuje go z racji tego, że

3:30jest zainstalowany na tej maszynie, więc po prostu symuluje takie samo środowisko

3:35jakie będzie miał użytkownik, który po prostu nie ma tego font'u zainstalowanego, więc

3:39teraz musimy dodać globalne style dla storybook'a i dlaczego tak się

3:43dzieje, dlatego, że nasze globalne style znajdują się w views root,

3:47tutaj w tym miejscu, a storybook z tym komponentem nie ma absolutnie nic

3:51wspólnego, on sobie to renderuje na własnych warunkach, we własnym DOM'ie który

3:56jest zupełnie osobny od naszej aplikacji i to jest właśnie jego największa zaleta, ponieważ

4:00to środowisko jest po prostu odseparowane jedno od drugiego, więc

4:06teraz zróbmy mały research i sprawdźmy, co możemy zrobić żeby dodać global-styles

4:10do naszego storybook, a mamy

4:19tutaj artykuł, w którym mowa jest o takim rozwiązaniu jak backgrounds,

4:23czyli taki plugin do storybook, który pozwala nam na dodanie dekoratorów

4:28do naszego story, z tym, że my chcemy żeby to było absolutnie globalne, żebyśmy nie

4:32musieli pamiętać o tym, żeby do każdego story dodawać jakiś background w

4:36postaci custom'owych stylów, więc to co możemy zrobić to stworzyć

4:40preview head html w folderze kropka

4:45storybook i wewnątrz

4:51niego możemy robić wszystko, co w takim normalnym head'zie w html'u, możemy

4:56na przykład ładować CSS'y, ale jeśli możemy ładować CSS, to możemy

5:00też zastosować po prostu taki style, a jeśli możemy zastosować taki style

5:04to nic nie stoi na przeszkodzie żebyśmy mogli skopiować sobie teraz wszystkie nasze style

5:08globalne i po prostu wrzucić je tutaj w to miejsce i teraz

5:14jeśli przebudujemy sobie naszego storybook, a on załaduję

5:18nową konfigurację, to teoretycznie powinniśmy widzieć już normalne załadowane

5:22nowe font'y w naszym storybook'u i tak

5:26się właśnie stało nasze button'y wyglądają dokładnie tak jak powinny,

5:31więc taką pierwszą konfigurację i pierwsze komponenty w storybooku mamy już za

5:35sobą, a w następnych lekcjach pokażę ci jak możemy korzystać z tego narzędzia

5:39w nieco bardziej zaawansowany sposób.