Üks Reacti kasutamise eeliseid on see, et saate luua kasutajaliidese komponente, neid kogu rakenduses uuesti kasutada ja lõpuks vältida koodilõhkumist. Siiski on Reacti abil keeruline luua täiesti sõltumatuid kasutajaliidese komponente. Nende komponentide nägemiseks peate looma vaated, mis kuvavad neid komponente.
Siin tulebki sisse Storybook. See võimaldab teil luua ja testida kasutajaliidese komponente sõltumatus käituskeskkonnas ning sellest õpetusest saate teada, kuidas seda Reactis kasutada. Selle postituse lõpuks olete loonud nupukomponendi ja dokumenteerinud mõned selle võimalikud olekud rakenduses React.
Mis on juturaamat?
Juturaamat on arendustööriist, mis võimaldab teil käitada ja testida kasutajaliidese komponente ilma täieliku Reacti keskkonnata. See teeb komponendipõhine arendus lihtsam, sest saate komponente eraldi arendada.
Lugude raamatuga saate pärast komponendi loomist luua mitu lugu, mis määratlevad komponendi erinevad olekud. Nupukomponendi puhul võivad need olekud hõlmata esmast olekut, sekundaarset olekut, keelatud olekut ja nii edasi.
Kuna Storybook võimaldab lugude loomisel koodi kaasata, võib see olla ka dokumentatsioonitööriist.
Storybooki kasutamiseks peab teil olema arvutisse installitud Node ja teil peavad olema Reacti põhiteadmised.
Reacti rakenduse loomine
Juturaamatu kasutamise alustamiseks loote esmalt Reacti projekti ning seejärel luua komponente ja nende lugusid.
Reacti rakenduse loomiseks käivitage järgmine käsk:
npx luua-react-app btn-luguderaamat
See loob kausta nimega btn-storybook kõigi sõltuvustega, mida Reacti rakendus vajab.
Järgmisena saate Storybooki installida ja käivitada vaid mõne sammuga.
Juturaamatu installimine
Liikuge kausta btn-storybook ja installige luguderaamat:
cd btn-lugude raamat
npx juturaamatu init
Kuna kasutasite rakendust create-react-app, on see ainus käsk, mida peate Storybooki seadistamiseks käivitama. Storybook installib kõik vajalikud sõltuvused ja teeb kõik vajalikud konfiguratsioonid. See loob teile alustamiseks ka mõned üldised lood.
Kui ülaltoodud käsk on töötamise lõpetanud, käivitage juturaamat järgmise koodi abil.
npm run storybook
See avab teie brauseris juturaamatu juhtpaneeli. See peaks välja nägema umbes selline:
Nupu komponendi loomine
Looge kaustas ./src kaust nimega Components ja looge selles teine kaust nimega Button. Nupukaust peaks asuma järgmisel teel: ./src/Components/Button.
Nüüd looge selles kaustas nupp ja lisage järgmine kood:
importida PropTypes alates "rekvisiiditüübid"
function Button({ silt, taustavärv = "#6B4EFF", värv = "valge", borderRadius="48 pikslit", ääris="mitte ühtegi"}) {
konst stiil = {
taustavärv,
polsterdus: "0,5rem 1rem",
värv,
piiriraadius,
piir
}
tagasi (
<nupu stiil={style}>
{label}
</button>
)
}
Button.propTypes = {
silt: PropTypes.string,
taustavärv: PropTypes.string,
värvi: PropTypes.string,
piir:PropTypes.string,
piiriraadius: PropTypes.string,
}
eksportidavaikimisi Nupp;
See komponent aktsepteerib mõnda Reageeri rekvisiidid mis sisaldavad nupu silti ja selle stiile. Samuti kasutate propTypes'i, et kontrollida edastatud rekvisiidide tüüpe ja anda hoiatus, kui kasutate vale tüüpi. Komponent tagastab nupu elemendi.
Nupulugude loomine
Kui installisite Storybooki projekti React, genereeris see kausta, mis sisaldas mõningaid lugude näiteid, nimega lugusid. Liikuge sellesse kausta ja kustutage kõik selles olev. Loote lugusid nullist.
Loote kaks lugu, mis esindavad esmast nuppu ja teisest nuppu. Kõigil neil nuppudel on erinev stiil, mis eristab seda teistest. Pärast lugude loomist näete neid kõiki lugude armatuurlaual.
Looge lugude kaustas uus fail nimega button.stories.js. Oluline on kaasata .lood enne .js-i, kuna see ütleb Storybookile, mis on lugude fail.
Importige nupu komponent.
importida Nupp alates "../Components/Button/Button"
Järgmisena eksportige komponendi pealkiri ja komponent ise. Pange tähele, et pealkiri on valikuline.
eksportidavaikimisi {
pealkiri: "Komponendid/nupp",
komponent: nupp,
}
Esimene lugu, mille loote, on nupu Esmane jaoks. Seega looge uus funktsioon nimega Esmane ja eksportige see.
ekspordi konst Esmane = () =><Nupu taustavärv="#6B4EFF" etikett="Esmane"/>
Nüüd, kui lähete Storybooki armatuurlauale, näete renderdatud nuppu.
Renderdatud komponendi reaalajas redigeerimiseks ja selle oleku muutmiseks lugude armatuurlaual kasutate args. Args võimaldab teil Storybookile edastada argumente, mille muutmine põhjustab komponendi uuesti renderdamise.
Nupuloo arg-ide määratlemiseks looge funktsioonimall.
const Mall = args =><Nupp {...args}/>
See mall aktsepteerib argesid ja edastab need nupu komponendi rekvisiididena.
Nüüd saate põhiloo ümber kirjutada, kasutades allpool näidatud malli.
eksportidakonst Esmane = Template.bind({})
Primary.args = {
taustavärv: "#6B4EFF",
silt: "Esmane",
}
Kui kontrollite Storybooki armatuurlauda, peaksite nägema allosas juhtnuppe. Need juhtnupud võimaldavad teil muuta nupu kuvamisviisi. Saate muuta taustavärvi, teksti värvi, silti, äärist ja äärise raadiust.
Teiste lugude loomiseks peate muutma ainult argsi väärtusi. Näiteks teisese nupu loomiseks kasutage järgmist koodi.
eksportidakonst Sekundaarne = Template.bind({})
Secondary.args = {
taustavärv: "#E7E7FF",
värv: "#6B4EFF",
silt: "Sekundaarne",
}
Juturaamatu armatuurlaual liikuge erinevate lugude juurde, klõpsates neil külgribal. Näete, kuidas igaüks renderdab. Saate jätkata nuppude lugudele olekute lisamist vastavalt oma soovile. Proovige lisada ülevaade või lühilugu.
Kasutajaliidese komponentide testimine
See õpetus tutvustas lühidalt Storybooki kasutamist koos Reacti kasutajaliidese komponentidega. Õppisite, kuidas lisada lugude raamatut Reacti projekti ja kuidas luua argidega nupu komponendi jaoks põhilugu.
Võib-olla olete märganud, et selle protsessi käigus katsetasite, kuidas nupukomponent erinevates olekutes renderdus. Kirjutate võib-olla rohkem koodi, kuid kui olete komponendilood kirjutanud, minimeerite kõik rakenduses komponentide taaskasutamisel tekkida võivad vead. Lisaks on vea ilmnemisel lihtsam tuvastada. See on komponentidepõhise arenduse ilu.
