Storybook, środowisko które pokochasz używać

React storybook, czyli środowisko developerskie dla Twoich komponentów. Stworzone dla React i React Native, dzięki któremu można wizualizować stany dla tworzonych komponentów.

Cześć!

W tym poście postaram się Wam przybliżyć narzędzie a w zasadzie środowisko, dzięki któremu tworzenie komponentów reactowych staje się prostsze. Mam zamiar wykorzystać je przy tworzeniu mojej aplikacji jako główne źródło komponentów. Mówa tutaj o React Storybook. Jest to proste środowisko gotowe do uruchomienia po przejściu prostej instalacji, dlaczego prostej, popatrzcie sami 🙂

npm i -g getstorybook
cd my-react-app
getstorybook

Uruchomienie poprzez

npm run storybook

Proste prawda?

Po więcej informacji na temat instalacji, konfiguracji i bardziej szczegółowego opisu odsyłam do strony domowej i dokumentacji.

Dlaczego ja postanowiłem skorzystać z tego narzędzia? Ponieważ uważam, że daje dużo więcej niż na pierwszy rzut oka może się wydawać.

Ale od początku, pierwszy raz styczność ze storybookiem miałem parę miesięcy temu w pracy.

Najbardziej spodobała mi się możliwość podejrzenia wyglądu mojego komponentu bez konieczności umieszczania go w gotowej aplikacji.

Kolejnym atutem tego rozwiązania była możliwość zobaczenia jak zmieniają się stany komponentu oraz podejrzenie czy prawidłowo są wywoływane funkcje (handlery), z których ma korzystać komponent lub które mają reagować na zmiany stanów komponentu. Aby sprawdzić czy konkretna i prawidłowa funkcja została wywołana używamy Action loggera, który jest dostępny w oknie przeglądarki po uruchomieniu storybooka.

Rzeczy, które wymieniłem powyżej są dość oczywiste i zapewne wyczytacie je w pierwszych akapitach dokumentacji. Jednak, jak wcześniej wspomniałęm, wg mnie jest jeszcze kilka cenych walorów, które dostarcza nam użycie storybooka, a mianowicie:

  • tworzone kompnenty są znacznie prostsze i łatwiejsze do opanowania, niżeli te, które są tworzone bezpośrednio w kodzie aplikacji
  • w podejściu, które poznałem w pracy założyliśmy, że takie komponety mają być w jaknajwiększym stopniu pozbawione logiki
  • komponenty w storybooku można odseparować od zewnętrznych zasobów, tzn. wygląd tylko podstawowy, jego zmiana to tylko dostarczanie klas css(tak aby mogły zadziałać np.globalne style), funkcje zwrotne (callbacks), dostarczane z zewnątrz poprzez propsy (doumentacja)

Dzięki tym elementom dużo łatwiej stworzyć czysty komponent (pure component), oznacza to tyle, że po skończonej pracy mamy reużywalny komponent. Taki komponent możemy opublikować w naszym rejestrze npm i dzięki temu bez żadnej jego modyfikacji możemy nim zarządzać, wpływać na jego wygląd, w dowolnej liczbie miejsc w naszej aplikacji.

Może ktoś zapytać, a co jak będę potrzebował go zmienić, to przecież zmieni mi się wszędzie! Wtedy warto się zastanowić czy ten komponent powiniśmy zmieniać czy może to wykracza po za jego odpowiedzialność i powinniśmy stworzyć kolejny komponent.

W moim odczuciu im większa liczba takich komponentów, tym łatwiej zbudować aplikację, po prostu jak z klocków.

0

Zostaw komentarz