A React használatának egyik előnye, hogy létrehozhat UI-összetevőket, újra felhasználhatja őket az egész alkalmazásban, és végül elkerülheti a kódlemorzsolódást. Ennek ellenére nehéz teljesen független felhasználói felület-összetevőket létrehozni egyedül a React segítségével. Ha látni szeretné ezeket az összetevőket, olyan nézeteket kell létrehoznia, amelyek megjelenítik ezeket.
Itt jön be a Storybook. Lehetővé teszi UI összetevők létrehozását és tesztelését független futási környezetben, és ebben az oktatóanyagban megtudhatja, hogyan kell használni a Reactban. A bejegyzés végére létrehoz egy gombkomponenst, és dokumentált néhány lehetséges állapotát a Reactban.
Mi az a mesekönyv?
Mesekönyv egy fejlesztői eszköz, amely lehetővé teszi a felhasználói felület összetevőinek futtatását és tesztelését teljes React környezet nélkül. Ez teszi komponensvezérelt fejlesztés könnyebb, mert az alkatrészeket elkülönítve fejlesztheti.
A Storybook segítségével egy összetevő létrehozása után több történetet is létrehozhat, amelyek meghatározzák az összetevő különböző állapotait. Egy gombkomponens esetében ezek az állapotok magukban foglalhatják az elsődleges állapotot, a másodlagos állapotot, a letiltott állapotot és így tovább.
Mivel a Storybook lehetővé teszi a kód beépítését a történetek létrehozásakor, dokumentációs eszközként is szolgálhat.
A Storybook használatához telepítenie kell a Node-ot a gépére, és rendelkeznie kell a React alapvető ismereteivel.
React alkalmazás létrehozása
A Storybook használatának megkezdéséhez először létrehoz egy React projektet majd hozzon létre összetevőket és azok történeteit.
Futtassa a következő parancsot egy React alkalmazás létrehozásához:
npx teremt-react-app btn-történetkönyv
Ez létrehoz egy btn-storybook nevű mappát az összes függőséggel, amelyre a React alkalmazásnak szüksége van.
Ezután néhány további lépéssel telepítheti és futtathatja a Storybookot.
Mesekönyv telepítése
Keresse meg a btn-storybook mappát, és telepítse a mesekönyvet:
CD btn-mesekönyv
npx mesekönyv init
Mivel a create-react-app-ot használta, ez az egyetlen parancs, amelyet le kell futtatnia a Storybook beállításához. A Storybook telepíti az összes szükséges függőséget, és elvégzi az összes szükséges konfigurációt. A kezdéshez néhány alaptörténetet is létrehoz.
Ha a fenti parancs fut, indítsa el a storybookot a következő kóddal.
npm futás mesekönyv
Ezzel megnyílik a mesekönyv irányítópultja a böngészőben. Valahogy így kell kinéznie:
A gomb komponens létrehozása
A ./src mappában hozzon létre egy Components nevű mappát, és abban hozzon létre egy másik mappát Button néven. A Button mappának ezen az útvonalon kell lennie: ./src/Components/Button.
Most ebben a mappában hozzon létre gombot, és adja hozzá a következő kódot:
import PropTypes tól től "kelléktípusok"
function Button({ label, backgroundColor = "#6B4EFF", szín = "fehér", borderRadius="48 képpont", border="egyik sem"}) {
const stílus = {
háttérszín,
párnázás: "0.5rem 1rem",
szín,
határsugár,
határ
}
Visszatérés (
<gomb style={style}>
{címke}
</button>
)
}
Button.propTypes = {
címke: PropTypes.húr,
háttérszín: PropTypes.húr,
szín: PropTypes.húr,
határ:PropTypes.string,
borderRadius: PropTypes.húr,
}
exportalapértelmezett Gomb;
Ez a komponens néhányat elfogad React kellékek amelyek tartalmazzák a gomb címkéjét és annak stílusait. A propTypes-t is használja a beküldött kellékek típusainak ellenőrzésére, és figyelmeztetést ad, ha nem megfelelő típust használ. Az összetevő egy gombelemet ad vissza.
Gombtörténetek létrehozása
Amikor telepítette a Storybook-ot a React projektben, az előállított egy mappát, amely néhány történetpéldát tartalmaz, név szerint történetek. Keresse meg azt a mappát, és töröljön mindent benne. A történeteket a semmiből fogod létrehozni.
Két történetet fog létrehozni, amelyek az elsődleges és a másodlagos gombot képviselik. Ezen gombok mindegyikének más stílusa van, amely megkülönbözteti a többitől. A történetek létrehozása után mindegyiket megtekintheti a Storybook irányítópultján.
A történetek mappában hozzon létre egy új fájlt button.stories.js néven. Fontos belefoglalni .történetek a .js előtt, mivel ez mondja meg a Storybooknak, amely egy történetfájl.
Importálja a Button összetevőt.
import Gomb tól től "../Components/Button/Button"
Ezután exportálja az összetevő címét és magát az összetevőt. Vegye figyelembe, hogy a cím nem kötelező.
exportalapértelmezett {
cím: "Összetevők/gomb",
komponens: gomb,
}
Az első történet, amelyet létrehoz, az Elsődleges gombhoz tartozik. Tehát hozzon létre egy új, Elsődleges nevű függvényt, és exportálja azt.
export const Elsődleges = () =><Gomb háttérszíne="#6B4EFF" címke="Elsődleges"/>
Most, ha a Storybook irányítópultjára lép, látni fogja a megjelenített gombot.
A renderelt komponens élő szerkesztéséhez és állapotának módosításához a Storybook irányítópulton args-t kell használnia. Az Args lehetővé teszi, hogy argumentumokat adjon át a Storybooknak, amelyek megváltoztatásakor a komponens újbóli megjelenítését eredményezi.
A gombsztori elemeinek meghatározásához hozzon létre egy függvénysablont.
const Sablon = args =><Gomb {...args}/>
Ez a sablon elfogadja az arg-okat, és átadja azokat kellékként a Button komponensnek.
Most átírhatja az Elsődleges történetet az alábbi sablon segítségével.
exportconst Elsődleges = Template.bind({})
Primary.args = {
háttérszín: "#6B4EFF",
címke: "Elsődleges",
}
Ha bejelöli a Storybook irányítópultját, alul vezérlőket kell látnia. Ezekkel a vezérlőkkel módosíthatja a gomb megjelenítését. Módosíthatja a háttérszínt, a szöveg színét, a címkét, a szegélyt és a szegély sugarát.
Csak az args értékeket kell módosítania a többi történet létrehozásához. Például egy Másodlagos gomb létrehozásához használja a következő kódot.
exportconst Másodlagos = Template.bind({})
Secondary.args = {
háttérszín: "#E7E7FF",
szín: "#6B4EFF",
címke: "Másodlagos",
}
A Storybook irányítópulton a különböző történetekhez navigálhat, ha rájuk kattint az oldalsávon. Látni fogja, hogy mindegyik hogyan jelenik meg. Tetszés szerint folytathatja további állapotok hozzáadását a gombtörténetekhez. Próbáljon vázlatot vagy történetvázlatot hozzáadni.
UI összetevők tesztelése
Ez az oktatóanyag rövid bevezetést adott a Storybook React UI összetevőkkel való használatához. Megtanulta, hogyan adhat hozzá Storybook-ot egy React-projekthez, és hogyan hozhat létre alapsztorit egy Button-komponenshez arg-ekkel.
Talán észrevette, hogy a folyamat során azt tesztelte, hogyan jelenik meg a gombkomponens különböző állapotokban. Lehet, hogy több kódot ír, de miután megírta az összetevő történeteket, minimálisra csökkenti a hibákat, amelyek az összetevők alkalmazásában történő újrafelhasználása során merülhetnek fel. Ezen túlmenően könnyebb lesz felderíteni a hibát, ha előfordul. Ez az összetevő-vezérelt fejlesztés szépsége.
