Vienas iš „React“ naudojimo pranašumų yra tai, kad galite sukurti vartotojo sąsajos komponentus, pakartotinai juos naudoti visoje programoje ir galiausiai išvengti kodo keitimo. Vis dėlto sunku sukurti visiškai nepriklausomus vartotojo sąsajos komponentus naudojant vien „React“. Norėdami pamatyti šiuos komponentus, turėsite sukurti rodinius, kuriuose būtų rodomi šie komponentai.
Čia atsiranda pasakojimų knyga. Tai leidžia kurti ir išbandyti vartotojo sąsajos komponentus nepriklausomoje vykdymo aplinkoje, o šiame vadove sužinosite, kaip jį naudoti React. Šio įrašo pabaigoje būsite sukūrę mygtuko komponentą ir dokumentuodami kai kurias galimas jo būsenas „React“.
Kas yra pasakojimų knyga?
Pasakų knyga yra kūrimo įrankis, leidžiantis paleisti ir išbandyti vartotojo sąsajos komponentus be visos React aplinkos. Tai daro komponentais pagrįsta plėtra lengviau, nes komponentus galite kurti atskirai.
Su Storybook sukūrę komponentą galite sukurti kelias istorijas, kurios apibrėžia įvairias komponento būsenas. Mygtuko komponento atveju šios būsenos gali apimti pirminę būseną, antrinę būseną, išjungtą būseną ir pan.
Kadangi Storybook leidžia įtraukti kodą kuriant istorijas, ji taip pat gali būti naudojama kaip dokumentacijos įrankis.
Jei norite naudoti Storybook, kompiuteryje turėsite įdiegti „Node“ ir turėti pagrindinius „React“ supratimus.
„React“ programos kūrimas
Norėdami pradėti naudotis pasakojimais, pirmiausia sukursite React projektą tada sukurkite komponentus ir jų istorijas.
Norėdami sukurti „React“ programą, paleiskite šią komandą:
npx sukurti-react-app btn-storijų knyga
Tai sugeneruos aplanką, pavadintą btn-storybook su visomis priklausomybėmis, kurių reikia React programai.
Tada atlikę tik kelis veiksmus galite įdiegti ir paleisti Storybook.
Istorijų knygos diegimas
Eikite į btn-storybook aplanką ir įdiekite pasakojimų knygą:
cd btn pasakojimų knyga
npx istorijų knygos pradžia
Kadangi naudojote „create-react-app“, tai yra vienintelė komanda, kurią turite paleisti, kad nustatytumėte „Storybook“. Storybook įdiegs visas reikalingas priklausomybes ir atliks visą reikiamą konfigūraciją. Taip pat bus sukurta keletas pagrindinių istorijų, kad galėtumėte pradėti.
Baigę vykdyti aukščiau pateiktą komandą, paleiskite pasakų knygą naudodami šį kodą.
npm paleisti istorijų knygą
Naršyklėje bus atidaryta istorijų knygos prietaisų skydelis. Tai turėtų atrodyti maždaug taip:
Mygtuko komponento kūrimas
Aplanke ./src sukurkite aplanką Komponentai ir jame sukurkite kitą aplanką pavadinimu Mygtukas. Mygtukų aplankas turėtų būti šiame kelyje: ./src/Components/Button.
Dabar šiame aplanke sukurkite mygtuką ir pridėkite šį kodą:
importuoti PropTypes iš "rekvizito tipai"
Funkcijos mygtukas ({ etiketė, fono spalva = "#6B4EFF", spalva = "baltas", borderSpindulys="48 pikseliai", kraštinė ="nė vienas"}) {
konst stilius = {
fono spalva,
pamušalas: "0.5rem 1rem",
spalva,
sienos spindulys,
siena
}
grąžinti (
<mygtukas style={style}>
{label}
</button>
)
}
Button.propTypes = {
etiketė: PropTypes.styga,
fono spalva: PropTypes.styga,
spalva: PropTypes.styga,
siena:PropTypes.string,
ribinis spindulys: PropTypes.styga,
}
eksportuotinumatytas Mygtukas;
Šis komponentas priima kai kuriuos Reaguoti rekvizitai kurios apima mygtuko etiketę ir jos stilius. Taip pat naudojate propTypes, kad patikrintumėte pateiktų rekvizitų tipus ir pateiktumėte įspėjimą, jei naudojate netinkamą tipą. Komponentas grąžina mygtuko elementą.
Mygtukų istorijų kūrimas
Kai įdiegėte Storybook projekte „React“, jis sugeneravo aplanką, kuriame yra keletas istorijų pavyzdžių, pavadintų istorijos. Eikite į tą aplanką ir ištrinkite viską, kas jame yra. Kursite istorijas nuo nulio.
Sukursite dvi istorijas, vaizduojančias pagrindinį ir antrinį mygtuką. Kiekvienas iš šių mygtukų turi skirtingą stilių, kuris išskiria jį nuo kitų. Sukūrę istorijas galėsite pamatyti kiekvieną iš jų Istorijų knygos prietaisų skydelyje.
Istorijų aplanke sukurkite naują failą pavadinimu button.stories.js. Svarbu įtraukti .istorijos prieš .js, nes tai pasakoja Storybook, kuris yra istorijų failas.
Importuokite mygtuko komponentą.
importuoti Mygtukas iš "../Components/Button/Button"
Tada eksportuokite komponento pavadinimą ir patį komponentą. Atminkite, kad pavadinimas yra neprivalomas.
eksportuotinumatytas {
pavadinimas: "Komponentai / mygtukas",
komponentas: mygtukas,
}
Pirmoji istorija, kurią sukursite, skirta mygtukui „Pagrindinis“. Taigi sukurkite naują funkciją, pavadintą Pirminė, ir eksportuokite ją.
eksportuoti const Pirminis = () =><Mygtuko fonasSpalva="#6B4EFF" etiketė ="Pirminis"/>
Dabar, jei eisite į Storybook prietaisų skydelį, galėsite pamatyti pateiktą mygtuką.
Norėdami redaguoti pateiktą komponentą ir pakeisti jo būseną Storybook prietaisų skydelyje, naudosite args. Args leidžia perduoti argumentus Storybook, kuriuos pakeitus komponentas iš naujo pateikiamas.
Norėdami apibrėžti mygtukų istorijos reikšmes, sukurkite funkcijos šabloną.
const Šablonas = args =><Mygtukas {...args}/>
Šis šablonas priima argumentus ir perduoda juos kaip rekvizitus mygtuko komponentui.
Dabar galite perrašyti pagrindinę istoriją naudodami šabloną, kaip parodyta toliau.
eksportuotikonst Pirminis = Template.bind({})
Primary.args = {
fono spalva: "#6B4EFF",
etiketė: "Pirminis",
}
Jei patikrinsite Storybook prietaisų skydelį, apačioje turėtumėte pamatyti valdiklius. Šie valdikliai leidžia keisti mygtuko rodymo būdą. Galite pakeisti fono spalvą, teksto spalvą, etiketę, kraštinę ir kraštinės spindulį.
Norėdami sukurti kitas istorijas, turite pakeisti tik args vertes. Pavyzdžiui, norėdami sukurti antrinį mygtuką, naudokite šį kodą.
eksportuotikonst Antrinis = Template.bind({})
Secondary.args = {
fono spalva: "#E7E7FF",
spalva: "#6B4EFF",
etiketė: "Antrinis",
}
Istorijų knygos prietaisų skydelyje pereikite prie skirtingų istorijų spustelėdami jas šoninėje juostoje. Pamatysite, kaip kiekvienas atvaizduojamas. Galite toliau pridėti daugiau būsenų prie mygtukų istorijų, kaip norite. Pabandykite pridėti metmenis arba metmenų istoriją.
UI komponentų testavimas
Šioje pamokoje trumpai supažindinote su Storybook su React UI komponentais naudojimą. Sužinojote, kaip įtraukti Storybook į React projektą ir kaip sukurti pagrindinę Button komponento istoriją su args.
Galbūt pastebėjote, kad šio proceso metu išbandėte, kaip mygtuko komponentas atvaizduojamas skirtingose būsenose. Galbūt rašote daugiau kodo, bet parašę komponentų istorijas sumažinsite visas klaidas, kurios gali kilti pakartotinai naudojant komponentus programoje. Be to, bus lengviau atsekti klaidą, jei ji įvyktų. Tai yra komponentais pagrįsto kūrimo grožis.