Unul dintre avantajele utilizării React este că puteți crea componente UI, le puteți reutiliza în întreaga aplicație și, în cele din urmă, puteți evita pierderea codului. Cu toate acestea, este dificil să creați componente UI complet independente doar cu React. Va trebui să creați vizualizări care să afișeze aceste componente pentru a le vedea.

Aici intervine Storybook. Vă permite să creați și să testați componente UI într-un mediu de rulare independent, iar în acest tutorial veți învăța cum să le utilizați în React. Până la sfârșitul acestei postări, veți fi creat o componentă de buton și ați documentat unele dintre posibilele stări ale acesteia în React.

Ce este cartea de povești?

Cartea de povești este un instrument de dezvoltare care vă permite să rulați și să testați componentele UI fără un mediu React complet. Asta face dezvoltare condusă de componente mai ușor deoarece puteți dezvolta componentele izolat.

Cu Storybook, odată ce creați o componentă, puteți crea mai multe povești care definesc diferitele stări ale componentei. Pentru o componentă de buton, aceste stări pot include starea primară, starea secundară, starea dezactivată și așa mai departe.

instagram viewer

Deoarece Storybook vă permite să includeți cod atunci când creați poveștile, poate servi și ca instrument de documentare.

Pentru a utiliza Storybook, va trebui să aveți Node instalat pe computer și să aveți o înțelegere de bază a React.

Crearea unei aplicații React

Pentru a începe să utilizați Storybook, mai întâi vei crea un proiect React și apoi creați componente și poveștile acestora.

Rulați următoarea comandă pentru a crea o aplicație React:

npx crea-react-app btn-storybook

Acest lucru va genera un folder numit btn-storybook cu toate dependențele de care are nevoie o aplicație React.

Apoi, cu doar câțiva pași, puteți instala și rula Storybook.

Instalarea Storybook

Navigați la folderul btn-storybook și instalați storybook:

CD btn-cartea de povești
npx storybook init

Deoarece ați folosit create-react-app, aceasta este singura comandă pe care trebuie să o rulați pentru a configura Storybook. Storybook va instala toate dependențele necesare și va efectua toate configurațiile necesare. De asemenea, va crea câteva povești standard pentru a vă ajuta să începeți.

Odată ce comanda de mai sus a terminat de rulat, porniți cartea de povești folosind următorul cod.

npm rulează cartea de povești

Aceasta va deschide tabloul de bord al cărții de povești în browser. Ar trebui să arate cam așa:

Crearea componentei Buton

În folderul ./src, creați un folder numit Componente și în el creați un alt folder numit Button. Dosarul Button ar trebui să fie în această cale: ./src/Components/Button.

Acum, în acest folder, creați Button și adăugați următorul cod:

import PropTypes din "tipuri de recuzită"
Buton de funcție ({ label, backgroundColor = "#6B4EFF", culoare = "alb", borderRadius="48px", chenar="nici unul"}) {
const stil = {
 culoare de fundal,
 umplutura: "0,5 rem 1 rem",
 culoare,
 borderRadius,
 frontieră
 }
întoarcere (
<stil buton={stil}>
 {eticheta}
</button>
 )
}
Button.propTypes = {
eticheta: PropTypes.şir,
culoare de fundal: PropTypes.şir,
culoare: PropTypes.şir,
frontieră:PropTypes.string,
borderRadius: PropTypes.şir,
}
exportMod implicit Buton;

Această componentă acceptă unele Reacții de recuzită care includ eticheta butonului și stilurile acestuia. De asemenea, utilizați propTypes pentru a verifica tipurile de elemente de recuzită transmise și pentru a genera un avertisment dacă utilizați tipul greșit. Componenta returnează un element buton.

Crearea poveștilor de buton

Când ați instalat Storybook în proiectul React, a generat un folder care conține câteva exemple de povești, numite povestiri. Navigați la acel folder și ștergeți tot ce se află în el. Veți crea poveștile de la zero.

Veți crea două povești reprezentând butonul principal și butonul secundar. Fiecare dintre aceste butoane are un stil diferit care îl separă de restul. Veți putea să le vedeți pe fiecare în tabloul de bord Storybook odată ce creați poveștile.

În folderul povești, creați un fișier nou numit button.stories.js. Este important să includeți .povestiri înainte de .js, deoarece acesta este ceea ce spune Storybook care este un fișier de povești.

Importați componenta Button.

import Buton din „../Components/Button/Button”

Apoi exportați titlul componentei și componenta în sine. Rețineți că titlul este opțional.

exportMod implicit {
 titlu: "Componente/Buton",
 componenta: Buton,
}

Prima poveste pe care o vei crea este pentru butonul Primar. Deci, creați o nouă funcție numită Primar și exportați-o.

export const Primar = () =><Buton backgroundColor="#6B4EFF" etichetă="Primar"/>

Acum, dacă accesați tabloul de bord Storybook, veți putea vedea butonul redat.

Pentru a edita componenta redată live și pentru a-i schimba starea pe tabloul de bord Storybook, veți folosi args. Argumentele vă permit să transmiteți argumente către Storybook, care, atunci când sunt modificate, determină redarea din nou a componentei.

Pentru a defini argumentele povestirii butonului, creați un șablon de funcție.

const Template = args =><Butonul {...args}/>

Acest șablon acceptă argumente și le transmite ca elemente de recuzită componentei Button.

Acum puteți rescrie povestea primară folosind șablonul, așa cum se arată mai jos.

exportconst Primar = Template.bind({})
Primary.args = {
 culoare de fundal: "#6B4EFF",
 eticheta: "Primar",
}

Dacă verificați tabloul de bord Storybook, ar trebui să vedeți comenzi în partea de jos. Aceste comenzi vă permit să schimbați modul în care este afișat butonul. Puteți schimba culoarea de fundal, culoarea textului, eticheta, chenarul și raza chenarului.

Trebuie doar să modificați valorile args pentru a crea celelalte povești. De exemplu, pentru a crea un buton secundar, utilizați următorul cod.

exportconst Secundar = Template.bind({})
Secondary.args = {
 culoare de fundal: "#E7E7FF",
 culoare: "#6B4EFF",
 eticheta: "Secundar",
}

În tabloul de bord Storybook, navigați la diferite povești făcând clic pe ele în bara laterală. Veți vedea cum se redă fiecare. Puteți continua să adăugați mai multe stări la poveștile butoane după cum doriți. Încercați să adăugați o schiță sau o poveste.

Testarea componentelor UI

Acest tutorial v-a oferit o scurtă introducere în utilizarea Storybook cu componentele React UI. Ați învățat cum să adăugați Storybook la un proiect React și cum să creați o poveste de bază pentru o componentă Button cu argumente.

Poate ați observat că în timpul acestui proces, testați modul în care componenta butonului este redată în diferite stări. Este posibil să scrieți mai mult cod, dar, odată ce ați scris poveștile componentelor, veți minimiza orice erori care ar putea apărea la reutilizarea componentelor în aplicația dvs. În plus, va fi mai ușor să urmăriți eroarea dacă aceasta apare. Aceasta este frumusețea dezvoltării bazate pe componente.