Jedną z zalet korzystania z Reacta jest to, że możesz tworzyć komponenty interfejsu użytkownika, ponownie używać ich w całej aplikacji i ostatecznie uniknąć utraty kodu. Mimo to trudno jest stworzyć całkowicie niezależne komponenty UI za pomocą samego Reacta. Aby je zobaczyć, musisz utworzyć widoki, które wyświetlają te komponenty.

Tutaj wkracza Storybook. Pozwala tworzyć i testować komponenty UI w niezależnym środowisku uruchomieniowym, a w tym samouczku dowiesz się, jak z nich korzystać w React. Pod koniec tego postu utworzysz komponent przycisku i udokumentowasz niektóre z jego możliwych stanów w React.

Co to jest bajka?

Książka z bajkami to narzędzie programistyczne, które pozwala uruchamiać i testować komponenty interfejsu użytkownika bez pełnego środowiska React. To sprawia rozwój oparty na komponentach łatwiej, ponieważ komponenty można opracowywać oddzielnie.

Dzięki Storybook po utworzeniu komponentu możesz utworzyć wiele historii, które definiują różne stany komponentu. W przypadku komponentu przycisku stany te mogą obejmować stan podstawowy, stan wtórny, stan wyłączenia i tak dalej.

instagram viewer

Ponieważ Storybook umożliwia dołączanie kodu podczas tworzenia opowieści, może również służyć jako narzędzie dokumentacji.

Aby korzystać ze Storybook, musisz mieć zainstalowany Node na swoim komputerze i mieć podstawową wiedzę na temat Reacta.

Tworzenie aplikacji React

Aby rozpocząć korzystanie z Storybook, najpierw stworzysz projekt React a następnie tworzyć komponenty i ich historie.

Uruchom następujące polecenie, aby utworzyć aplikację React:

npx Stwórz-react-app btn-storybook

Spowoduje to wygenerowanie folderu o nazwie btn-storybook ze wszystkimi zależnościami, których potrzebuje aplikacja React.

Następnie wystarczy kilka dodatkowych kroków, aby zainstalować i uruchomić Storybook.

Instalowanie Storybook

Przejdź do folderu btn-storybook i zainstaluj storybook:

płyta CD btn-bajka
npx inicjowanie bajki

Ponieważ użyłeś create-react-app, jest to jedyne polecenie, które musisz uruchomić, aby skonfigurować Storybook. Storybook zainstaluje wszystkie potrzebne zależności i wykona całą niezbędną konfigurację. Stworzy również kilka standardowych historii, które pomogą Ci zacząć.

Po zakończeniu działania powyższego polecenia uruchom storybook za pomocą następującego kodu.

npm run storybook

Spowoduje to otwarcie pulpitu nawigacyjnego z książką w przeglądarce. Powinno to wyglądać mniej więcej tak:

Tworzenie komponentu przycisku

W folderze ./src utwórz folder o nazwie Components, a następnie utwórz w nim kolejny folder o nazwie Button. Folder Button powinien znajdować się w następującej ścieżce: ./src/Components/Button.

Teraz w tym folderze utwórz Button i dodaj następujący kod:

import Typy prop z „rodzaje rekwizytów”
function Button({ label, backgroundColor = "#6B4EFF", kolor = "biały", obramowaniePromień="48px", obramowanie="Żaden"}) {
stały styl = {
 kolor tła,
 wyściółka: "0.5rem 1rem",
 kolor,
 promień granicy,
 granica
 }
zwrócić (
<styl przycisku = {styl}>
 {etykieta}
</button>
 )
}
Button.propTypes = {
etykieta: Typy prop.strunowy,
kolor tła: Typy prop.strunowy,
kolor: Typy prop.strunowy,
granica:PropTypes.string,
granicaPromień: Typy prop.strunowy,
}
eksportdomyślna Przycisk;

Ten komponent akceptuje niektóre Reaguj rekwizyty które zawierają etykietę przycisku i jej style. Używasz również propTypes do sprawdzania typów przekazywanych właściwości i zgłaszania ostrzeżenia, jeśli użyjesz niewłaściwego typu. Komponent zwraca element przycisku.

Tworzenie historii przycisków

Kiedy zainstalowałeś Storybook w projekcie React, wygenerował folder zawierający kilka przykładów historii o nazwie historie. Przejdź do tego folderu i usuń wszystko w nim. Będziesz tworzyć historie od podstaw.

Będziesz tworzyć dwie historie reprezentujące przycisk główny i przycisk pomocniczy. Każdy z tych przycisków ma inny styl, który odróżnia go od reszty. Po utworzeniu historii będziesz mógł zobaczyć każdy z nich na pulpicie nawigacyjnym Storybook.

W folderze opowieści utwórz nowy plik o nazwie button.stories.js. Ważne jest, aby uwzględnić .historie przed .js, ponieważ to właśnie mówi Storybook, który jest plikiem opowieści.

Zaimportuj komponent Button.

import Przycisk z "../Komponenty/Przycisk/Przycisk"

Następnie wyeksportuj tytuł komponentu i sam komponent. Pamiętaj, że tytuł jest opcjonalny.

eksportdomyślna {
 tytuł: "Komponenty/przycisk",
 składnik: Przycisk,
}

Pierwsza historia, którą utworzysz, dotyczy przycisku podstawowego. Utwórz więc nową funkcję o nazwie Podstawowa i wyeksportuj ją.

eksport const Podstawowy = () =><Kolor tła przycisku="#6B4EFF" etykieta="Podstawowy"/>

Teraz, jeśli przejdziesz do pulpitu nawigacyjnego Storybook, będziesz mógł zobaczyć wyrenderowany przycisk.

Aby edytować renderowany komponent na żywo i zmienić jego stan na pulpicie nawigacyjnym Storybook, użyjesz argumentów. Args pozwalają przekazać argumenty do Storybook, które po zmianie powodują ponowne renderowanie komponentu.

Aby zdefiniować argumenty wątku przycisku, utwórz szablon funkcji.

const Szablon = argumenty =><Przycisk {...argumenty}/>

Ten szablon akceptuje argumenty i przekazuje je jako rekwizyty do komponentu Button.

Możesz teraz przepisać główną historię, korzystając z szablonu, jak pokazano poniżej.

eksportstały Podstawowy = Szablon.bind({})
Podstawowe.args = {
 kolor tła: "#6B4EFF",
 etykieta: "Podstawowy",
}

Jeśli sprawdzisz pulpit nawigacyjny Storybook, powinieneś zobaczyć elementy sterujące na dole. Te elementy sterujące umożliwiają zmianę sposobu wyświetlania przycisku. Możesz zmienić kolor tła, kolor tekstu, etykietę, obramowanie i promień obramowania.

Aby utworzyć inne historie, wystarczy zmienić wartości argumentów. Na przykład, aby utworzyć przycisk pomocniczy, użyj poniższego kodu.

eksportstały Wtórny = Szablon.bind({})
Secondary.args = {
 kolor tła: "#E7E7FF",
 kolor: "#6B4EFF",
 etykieta: "Wtórny",
}

Na pulpicie Storybook przejdź do różnych historii, klikając je na pasku bocznym. Zobaczysz, jak każdy renderuje. Możesz kontynuować dodawanie kolejnych stanów do historii przycisków, jeśli chcesz. Spróbuj dodać konspekt lub historię konspektu.

Testowanie komponentów interfejsu użytkownika

Ten samouczek dał ci krótkie wprowadzenie do używania Storybook z komponentami React UI. Dowiedziałeś się, jak dodać Storybook do projektu React i jak stworzyć podstawową historię dla komponentu Button z argumentami.

Być może zauważyłeś, że podczas tego procesu testowałeś, jak komponent przycisku renderował się w różnych stanach. Być może piszesz więcej kodu, ale po napisaniu historii komponentów zminimalizujesz wszelkie błędy, które mogą pojawić się podczas ponownego używania komponentów w Twojej aplikacji. Ponadto łatwiej będzie wyśledzić błąd, jeśli wystąpi. Na tym polega piękno rozwoju opartego na komponentach.