Vai esat kādreiz mēģinājis visus lietotāja interfeisa komponentus ievietot vienā vietā pakalpojumā React?
Ja esat iesācējs React pasaulē, visticamāk, to nedarīsit.
Kas ar to ir domāts?
Skatīt reaģēt-skaista-dnd piemēri.
To, ko jūs redzējāt piemēros, sauc par stāstiem. Un rīku, ko izmanto stāstu veidošanai, sauc par stāstu grāmatu.
Tagad jūs sapratāt, par ko mēs runāsim šajā rakstā. Bez pūlēm izpētīsim.
Kas ir stāstu grāmata?
Storybook ir lietotāja saskarnes izolēta izstrādes vide, kas nodrošina rotaļu laukumu jūsu komponentiem. Mēs varam spēlēties ar mūsu komponentiem dažādos veidos, nepalaidot mūsu galveno lietotni. Mēs varam palaist stāstu grāmatu tās portā ar iestatīšanu.
Tas neaprobežojas tikai ar React. Mēs varam izmantot stāstu grāmatu ar lielāko daļu priekšgala sistēmu, piemēram, Vue, Angular, Mithril, Marko, Svelte utt.,
Jūs varat uzzināt vairāk par stāstu grāmatu šeit.
Kas ir stāsts?
Stāsts nosaka jūsu komponenta renderēšanas stāvokli. Ja mēs ņemam kopīgu komponentu, mēs varam to izmantot dažādos veidos ar rekvizītiem. Mēs varam uzrakstīt stāstu par katru no šīm valstīm.
Pieņemsim, ka mums ir pogas komponents.
Poga var pastāvēt dažādos stāvokļos, piemēram, atspējota, ielāde, primārā, sekundārā, maza, liela, vidēja utt.. Ja mēs uzskaitīsim visus stāvokļus, būs ļoti grūti virzīties uz priekšu apmācībā. Es domāju, ka jūs to saprotat. Jūs to iegūsit vairāk, kad sāksiet strādāt ar stāstu grāmatu.
Pogas stāstus var redzēt dažādos gadījumos (Liels, Vidējs, Mazs).
Stāstu grāmatas iestatīšana projektā
Mēs izveidosim stāstu grāmatu reaģēšanas projektā.
Ejam.
- Izveidojiet reaģēšanas projektu ar šādu komandu. Jūs varat nosaukt visu, kas jums patīk.
npx create-react-app storybook-demo
- Tagad instalējiet stāstu grāmatu savā projektā ar šādu komandu.
npx sb init
Mēs esam pabeiguši stāstu grāmatas iestatīšanu.
Stāstu grāmata mums nodrošina atsevišķu serveri.
Kā to sākt?
Stāstu grāmata automātiski pievieno komandu mūsu skripta failam. To var pārbaudīt paketes.json failā skriptu sadaļā. Pagaidām palaidiet šo komandu, lai palaistu stāstu grāmatas serveri.
npm run storybook
Stāstu grāmata sāks jaunu serveri ar portu, kas norādīts faila package.json skriptu sadaļā. Tas automātiski atvērs stāstu grāmatu mūsu noklusējuma pārlūkprogrammā (tāds pats kā reakcijas serveris).
Pēc noklusējuma tajā redzēsit dažādus stāstus. Ja nevēlaties, varat tos noņemt vai paturēt uzziņai. Kā mēs runājām iepriekšējā sadaļā, pogai var būt vairāki stāvokļi, tos varat redzēt stāstu grāmatā (ne visi stāvokļi minēti). Šīs apmācības pēdējā sadaļā mēs uzrakstīsim lielu stāstu kopu pogai.
Izpētiet dažādas stāstu grāmatas sadaļas un iepazīstieties ar dažādām sadaļām. Apmācībā mēs apskatīsim dažus no tiem.
Rakstīsim savu pirmo stāstu.
Testēšanas stāstu grāmata
Mēs esam redzējuši, kā darbojas stāstu grāmata un daži tajā iekļauti piemēri.
- Src mapē izveidojiet mapi ar nosaukumu Button.
- Izveidojiet failus ar nosaukumu Button.jsx, Button.css un állandós.js
- Ievietojiet attiecīgo kodu no tālāk norādītajiem fragmentiem failos.
Button.jsx
import React, { Component } from "react";
import PropTypes from "prop-types";
import "./Button.css";
import { buttonTypes, buttonVariants, buttonSizes } from "./constants";
class Button extends Component {
static defaultProps = {
isDisabled: false,
type: "filled",
variant: "oval",
size: "medium",
backgroundColor: "#1ea7fd",
textColor: "#ffffff",
};
static buttonTypes = buttonTypes;
static buttonVariants = buttonVariants;
static buttonSizes = buttonSizes;
renderButton = () => {
const {
text,
isDisabled,
type,
variant,
size,
backgroundColor,
textColor,
onClick,
} = this.props;
return (
<button
onClick={onClick}
className={`default ${variant} ${size} ${
isDisabled ? "disabled" : ""
}`}
style={
type === buttonTypes.outline
? {
border: `1px solid ${backgroundColor}`,
color: "#000000",
backgroundColor: "transparent",
}
: {
backgroundColor: `${backgroundColor}`,
border: `1px solid ${backgroundColor}`,
color: textColor,
}
}
disabled={isDisabled}
>
{text}
</button>
);
};
render() {
return this.renderButton();
}
}
Button.propTypes = {
text: PropTypes.string,
isDisabled: PropTypes.bool,
type: PropTypes.oneOf([buttonTypes.outline, buttonTypes.filled]),
variant: PropTypes.oneOf([buttonVariants.oval, buttonVariants.rectangular]),
size: PropTypes.oneOf([
buttonSizes.small,
buttonSizes.medium,
buttonSizes.large,
]),
backgroundColor: PropTypes.string,
textColor: PropTypes.string,
onClick: PropTypes.func,
};
export { Button };
Poga.css
.default {
border: none;
cursor: pointer;
background-color: transparent;
}
.default:focus {
outline: none;
}
.disabled {
opacity: 0.75;
cursor: not-allowed;
}
.small {
font-size: 12px;
padding: 4px 8px;
}
.medium {
font-size: 14px;
padding: 8px 12px;
}
.large {
font-size: 16px;
padding: 12px 16px;
}
.oval {
border-radius: 4px;
}
.rectangular {
border-radius: 0;
}
konstantes.js
export const buttonTypes = {
outline: "outline",
filled: "filled",
};
export const buttonVariants = {
oval: "oval",
rectangular: "rectangular",
};
export const buttonSizes = {
small: "small",
medium: "medium",
large: "large",
};
Kas tas par kodu?
Pogai esam uzrakstījuši kopīgu komponentu, ko var izmantot dažādos veidos. Tagad mums ir komponents, kuram var būt dažādi stāvokļi.
Rakstīsim savu pirmo stāstu, veicot tālāk norādītās darbības.
- Izveidojiet failu Button.stories.jsx
- Importējiet React un mūsu Button komponentu failā.
- Tagad definējiet mūsu sastāvdaļu stāstu nosaukumu vai ceļu. Mēs to definēsim, izmantojot šādu kodu.
export default {
title: ‘common/Button’,
}
Iepriekš minētais kods visus stāstus, kas atrodas pašreizējā failā, ievietos kopējā / Button / direktorijā.
- Eksportējiet pogu ar obligātajiem rekvizītiem šādi.
export const defaultButton = () => (
<Button text=”Default Button” onClick={() => {}} />
);
Mēs esam pabeiguši savu pirmo stāstu. Palaidiet stāstu grāmatu ar šādu komandu un skatiet rezultātu.
npm run storybook
Mēs rakstīsim vairāk stāstu, galu galā neuztraucieties.
Kā tas ir noderīgs Frontend izstrādē?
Kāda ir stāstu grāmatas izmantošanas galvenā priekšrocība?
Pieņemsim, ka strādājam 10 cilvēku komandā. Un mums ir jāpārbauda kopējās sastāvdaļas, kuras visi ir uzrakstījuši pašreizējam darba projektam.
Kā mēs to varam izdarīt?
Mums ir jādodas uz katru izplatīto komponentu, lai tos pārbaudītu. Taču tas ir laikietilpīgs un mums nav vēlamais veids. Šeit ir mūsu jaunā viesu stāstu grāmata.
Kā to izmantot, lai pārvarētu mūsu problēmu?
Mēs varam rakstīt stāstus parastajiem komponentiem (jebkuriem UI komponentiem), izmantojot stāstu grāmatu. Un ikreiz, kad jūsu komandas biedrs vēlas pārbaudīt citu kopīgos komponentus, viņi vienkārši palaiž stāstu grāmatas serveri un tajā redzēs visus lietotāja interfeisa komponentus, kā mēs redzējām iepriekš.
Mēs varam paveikt daudz vairāk ar stāstu grāmatā atveidotajiem komponentiem. Stāstu grāmatai ir koncepcija ar nosaukumu Addons, kas mūsu stāstiem piešķir superspējas.
Pieņemsim, ka mums ir jāpārbauda UI komponentu atsaucība pašā stāstu grāmatā, mēs varam izmantot papildinājumu ar nosaukumu Viewport stāstu grāmatā. Mēs uzzināsim vairāk par papildinājumiem nākamajās sadaļās.
Darbs ar stāstu grāmatu
Šajā sadaļā mēs rakstīsim dažādus stāstus, kas definēs dažādus mūsu kopējā komponenta pogas stāvokli.
Rakstīt stāstus nav tik grūti. Stāsts definē komponenta stāvokli. Ja redzat komponenta rekvizītus, tad viegli sapratīsiet dažādus komponenta lietošanas gadījumus.
Uzrakstīsim dažus stāstus, dodot izvēles rekvizītus.
export const largeButton = () => (
<Button text="Large Button" onClick={() => {}} size="large" />
);
export const outlineSmallButton = () => (
<Button
text="Outline Small Button"
onClick={() => {}}
size="small"
type="outline"
/>
);
export const rectangularLargeButton = () => (
<Button
text="Rectangular Large Button"
onClick={() => {}}
size="large"
variant="rectangular"
/>
);
export const disabledButton = () => (
<Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);
export const warningButton = () => (
<Button
text="Warning Button"
onClick={() => {}}
backgroundColor="orange"
/>
);
Iepriekš minētie trīs stāsti definē dažādus mūsu komponenta pogas lietošanas gadījumus. Tagad ir jūsu kārta pievienot dažus citus stāstu gadījumus mūsu kopīgajam komponentam. Mēģiniet pievienot atspējotuSamllRectangularButton, briesmButton, successDisabledButton utt.,
Es nesniegšu kodu iepriekš minētajiem gadījumiem. Jums tas ir jāuzraksta pašam, lai to saprastu. Jūs varat redzēt visu stāstu kodu, ko esam rakstījuši līdz šim.
import React from "react";
import { Button } from "./Button";
export default {
title: "src/common/Button",
};
export const defaultButton = () => (
<Button text="Default Button" onClick={() => {}} />
);
export const largeButton = () => (
<Button text="Large Button" onClick={() => {}} size="large" />
);
export const outlineSmallButton = () => (
<Button
text="Outline Small Button"
onClick={() => {}}
size="small"
type="outline"
/>
);
export const rectangularLargeButton = () => (
<Button
text="Rectangular Large Button"
onClick={() => {}}
size="large"
variant="rectangular"
/>
);
export const disabledButton = () => (
<Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);
export const warningButton = () => (
<Button
text="Disabled Button"
onClick={() => {}}
backgroundColor="orange"
/>
);
Tagad jūs pilnībā spējat rakstīt stāstus par komponentu.
Pāriesim nākamajā sadaļā, kurā uzzināsim par papildinājumiem un to, kā tie uzlabo mūsu stāstus.
Stāstu grāmatas papildinājumi
Pēc noklusējuma mums būs pieejami vairāki papildinājumi. Sadaļā mēs izpētīsim mūsu attīstībai visnoderīgākos papildinājumus.
Papildināsim mūsu Button stāstus.
Vadības ierīces
Vadīklas pievieno funkciju, lai pašam stāstu grāmatas komponentam piešķirtu pielāgotus rekvizītus. Mūsu pogas komponentam mēs varam pievienot vadīklas, lai mainītu dažādus stāstu grāmatas rekvizītus.
Pieņemsim, ka mums ir jāatrod labākā pogas fona krāsa. Tas būs laikietilpīgi, ja mēs to pārbaudīsim, lai pārbaudītu fona krāsu, piešķirot komponentam pa vienam. Tā vietā mēs varam pievienot vadīklu, kas ļauj mums izvēlēties dažādu krāsu stāstu grāmatā. Fona krāsu varam pārbaudīt pašā stāstu grāmatā.
Apskatīsim, kā pievienot vadīklas mūsu pogu stāstiem.
Pirmkārt, mums ir jādefinē visi rekvizīti zem virsraksta šādi.
export default {
title: "src/common/Button",
argTypes: {
text: { control: "text" },
backgroundColor: { control: "color" },
isDisabled: { control: "boolean" },
size: {
control: { type: "select", options: ["small", "medium", "large"] },
},
type: {
control: { type: "select", options: ["filled", "outline"] },
},
variant: {
control: { type: "select", options: ["oval", "rectangular"] },
},
},
};
Pēc tam atdaliet balstus no komponenta un piešķiriet tiem kā argu šādi.
export const outlineSmallButton = (args) => (
<Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
text: "Outline Small Button",
size: "small",
type: "outline",
};
Vadīklas ir redzamas komponentu priekšskatījuma loga apakšā.
Vadības cilne ir redzama komponentu priekšskatījuma loga apakšā. Spēlējiet to apkārt.
Atjauniniet visus stāstus, kā norādīts iepriekš. Tas viss vairāk atgādina stāstu grāmatas papildinājumu sintakses pārzināšanu. Programmā argTypes esam izmantojuši dažāda veida vadīklas. Jūs varat atrast visas vadīklas, kas atrodas stāstu grāmatā šeit.
Atjauninātie pogu stāsti izskatīsies šādi.
import React from "react";
import { Button } from "./Button";
export default {
title: "src/common/Button",
argTypes: {
text: { control: "text" },
backgroundColor: { control: "color" },
isDisabled: { control: "boolean" },
size: {
control: { type: "select", options: ["small", "medium", "large"] },
},
type: {
control: { type: "select", options: ["filled", "outline"] },
},
variant: {
control: { type: "select", options: ["oval", "rectangular"] },
},
},
};
export const defaultButton = (args) => <Button {...args} onClick={() => {}} />;
defaultButton.args = {
text: "Default Button",
};
export const largeButton = (args) => (
<Button {...args} onClick={() => {}} size="large" />
);
largeButton.args = {
text: "Large Button",
};
export const outlineSmallButton = (args) => (
<Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
text: "Outline Small Button",
size: "small",
type: "outline",
};
export const rectangularLargeButton = (args) => (
<Button {...args} onClick={() => {}} />
);
rectangularLargeButton.args = {
text: "Rectangular Large Button",
size: "large",
variant: "rectangular",
};
export const disabledButton = (args) => <Button {...args} onClick={() => {}} />;
disabledButton.args = {
text: "Disabled Button",
isDisabled: true,
};
export const warningButton = (args) => <Button {...args} onClick={() => {}} />;
warningButton.args = {
text: "Warning Button",
backgroundColor: "orange",
};
Darbības
Darbības ir JavaScript notikumi. Mēs varam noklikšķināt uz pogas, kas ir JavaScript notikums. Mēs varam veikt dažas darbības, noklikšķinot uz pogas, izmantojot darbību papildinājumu.
Ar darbībām mēs varam pārbaudīt, vai notikumi darbojas pareizi vai nē. Uz atspējotās pogas nevar noklikšķināt, un pogai iespējotai ir jābūt noklikšķināmai. Mēs to varam nodrošināt, izmantojot darbības.
Apskatīsim, kā pogas klikšķim pievienot darbību.
Mēs iepriekš esam piešķīruši anonīmu funkciju onClick rekvizītiem. Tagad mums tas ir jāatjaunina.
- Importējiet darbību no stāstu grāmatas papildinājuma, izmantojot šādu paziņojumu.
import { action } from "@storybook/addon-actions";
- Aizstāt visus () => {} ar šādu paziņojumu.
action("Button is clicked!")
Tagad dodieties uz stāstu grāmatu un noklikšķiniet uz pogas. Jūs redzēsit ziņojumu, kas izdrukāts zem darbību cilnes, kas atrodas blakus vadīklu cilnei. Ziņojums netiks izdrukāts, ja noklikšķināsit uz atspējotās pogas, jo tā ir atspējota.
Mēs varam izmantot darbību dažādiem notikumiem, piemēram, onChange, onMouseOver, onMouseOut utt., lai pārliecinātos, ka tie darbojas pareizi. Mēģiniet ieviest to pašu onChange ievades elementam.
Informāciju par darbībām skatiet dokumentācijā šeit.
Fons
Mēs varam mainīt priekšskatījuma loga fonu, izmantojot fona papildinājumu. Mums nav jāraksta nekāds kods. Vienkārši mainiet to stāstu grāmatā. Jūs varat redzēt gif zemāk.
Skatu logs
Mēs varam arī pārbaudīt mūsu komponentu atsaucību stāstu grāmatā. Lai uzzinātu par skata loga opcijām, skatiet tālāk redzamo gif.
Dokumenti
Mēs varam dokumentēt savus komponentus stāstu grāmatā, izmantojot dokumentu papildinājumu. Tas ir noderīgāk, ja strādājam komandā. Viņi izlasīs komponentu un sapratīs to tieši. Tas ietaupa daudz laika izstrādātājiem.
Stāstu grāmatu komponentu priekšskatījuma logā varat skatīt dokumentus, kas atrodas cilnes Audekls augšējā labajā stūrī. Tajā būs visi dokumenti par visiem komponenta stāstiem. Mums ir jāizmanto Button.stories.mdx, ja vēlamies dokumentēt komponentu, kas ietver gan atzīmes, gan komponentu renderēšanu. Tajā kopā ar komponentu stāstiem mēs vienkārši ierakstām papildu atzīmes kodu.
Mēs rakstām dokumentu saviem stāstiem. Kods ietver atzīmes un komponentu renderēšanu. Tas viss ir tikai sintakses apgūšana. Jūs to sapratīsit no pirmā acu uzmetiena.
Apskatīsim Button.stories.mdx dokumenta kodu.
<!--- Button.stories.mdx -->
import {
Meta,
Story,
Preview,
ArgsTable
} from '@storybook/addon-docs/blocks';
import { Button } from './Button';
<Meta title="MDX/Button" component={Button} />
# Button Documentation
With `MDX` we can define a story for `Button` right in the middle of our
Markdown documentation.
<ArgsTable of={Button} />
export const Template = (args) => <Button {...args} />
## Default Button
We can write the documentation related to the Default Button
<Preview>
<Story name="Default Button" args={{
text: 'Default Button'
}}>
{Template.bind({})}
</Story>
</Preview>
## Large Button
We are writing sample docs for two stories, you can write rest of them
<Preview>
<Story name="Large Button" args={{
text: "Large Button",
}}>
{Template.bind({})}
</Story>
</Preview>
Uzziniet vairāk par dokumentēšanas komponentiem šeit.
Varat uzzināt vairāk par papildinājumiem šeit.
Secinājums
Cerams, ka jums patika apmācība un uzzinājāt par stāstu grāmatu. Un efektīvi izmantojiet to savā komandā, lai padarītu savu darbu produktīvu.
Vai esat jauns, lai reaģētu? Apskatiet šos mācību resursus.
Laimīgu kodēšanu 🙂