Да ли сте икада покушали да све своје компоненте корисничког интерфејса поставите на неко место у Реацт-у?
Ако сте нови у свету Реацт-а, вероватно нећете.
Шта се под тим подразумева?
Видите реаговати-лепа-днд примери.
Оно што сте видели у примерима зову се приче. А алатка која се користи за креирање прича зове се Сторибоок.
Сада сте разумели о чему ћемо разговарати у овом чланку. Без одлагања истражимо.
Преглед садржаја
Шта је књига прича?
Сторибоок је изоловано развојно окружење корисничког интерфејса које обезбеђује игралиште за ваше компоненте. Можемо се играти са нашим компонентама на различите начине без покретања наше главне апликације. Можемо покренути књигу прича у њеном порту са подешавањем.
Није ограничено на Реацт. Можемо да користимо књигу прича са већином фронтенд оквира као што су Вуе, Ангулар, Митхрил, Марко, Свелте, итд.,
Можете пронаћи више о књизи прича овде.
Шта је прича?
Прича дефинише рендеровано стање ваше компоненте. Ако узмемо заједничку компоненту, можемо је користити на различите начине са реквизитима. За сваку од тих држава можемо написати причу.
Рецимо да имамо компоненту дугмета.
Дугме може постојати у различитим стањима као што су онемогућено, учитавање, примарно, секундарно, мало, велико, средње, итд.. Ако наведемо сва стања, биће веома тешко напредовати у водичу. Мислим да разумете. Добићете више када почнете да радите са књигом прича.
Можете видети приче о дугмету у различитим случајевима (велики, средњи, мали).
Подешавање књиге прича у пројекту
Поставићемо књигу прича у пројекат реаговања.
Идемо.
- Креирајте пројекат реаговања са следећом командом. Можете именовати шта год желите.
npx create-react-app storybook-demo
- Сада инсталирајте књигу прича у свој пројекат помоћу следеће команде.
npx sb init
Завршили смо подешавање за књигу прича.
Књига прича пружа посебан сервер за нас.
Како то започети?
Књига прича аутоматски додаје команду у нашу датотеку скрипте. Можете га проверити у датотеци пацкаге.јсон у одељку за скрипте. За сада, покрените следећу команду да бисте покренули сервер књиге прича.
npm run storybook
Сторибоок ће покренути нови сервер са портом датим у одељку са скриптама датотеке пацкаге.јсон. Аутоматски ће отворити књигу прича у нашем подразумеваном претраживачу (исто као и реацт сервер).
У њему ћете подразумевано видети различите приче. Можете их уклонити ако не желите или их задржати за референцу. Као што смо расправљали у претходном одељку, дугме може имати више стања, можете их видети у књизи прича (нису сва стања поменута). Написаћемо велики скуп прича за дугме у последњем делу овог упутства.
Истражите различите делове књиге прича и упознајте се са различитим одељцима. У туторијалу ћемо покрити неке од њих.
Хајде да напишемо нашу прву причу.
Тестирање књиге прича
Видели смо књигу прича како ради и неке примере у њој.
- Направите фасциклу под називом Буттон унутар срц фасцикле.
- Креирајте датотеке под називом Буттон.јск, Буттон.цсс и цонстантс.јс
- Поставите одговарајући код из доле наведених исечака у датотеке.
Буттон.јск
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 };
Буттон.цсс
.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;
}
константе.јс
export const buttonTypes = {
outline: "outline",
filled: "filled",
};
export const buttonVariants = {
oval: "oval",
rectangular: "rectangular",
};
export const buttonSizes = {
small: "small",
medium: "medium",
large: "large",
};
Шта је то код?
Написали смо заједничку компоненту за дугме која се може користити на различите начине. Сада имамо компоненту која може имати различита стања.
Хајде да напишемо нашу прву причу пратећи кораке у наставку.
- Направите датотеку под називом Буттон.сториес.јск
- Увезите Реацт и нашу компоненту Буттон у датотеку.
- Сада дефинишите наслов или путању наших компонентних прича. Дефинисаћемо га помоћу следећег кода.
export default {
title: ‘common/Button’,
}
Горњи код ће све приче које се налазе у тренутној датотеци поставити у заједнички/Буттон/ директоријум.
- Извезите дугме са обавезним реквизитима на следећи начин.
export const defaultButton = () => (
<Button text=”Default Button” onClick={() => {}} />
);
Завршили смо нашу прву причу. Покрените књигу прича са следећом командом и погледајте излаз.
npm run storybook
Написаћемо још прича, на крају, не брини.
Колико је то корисно у Фронтенд развоју?
Која је главна предност коришћења књиге прича?
Рецимо да радимо у тиму од 10 чланова. И морамо да проверимо заједничке компоненте које су сви написали за тренутни радни пројекат.
Како то можемо учинити?
Морамо да одемо до сваке заједничке компоненте да бисмо их проверили. Али, то је дуготрајно и није преферирани начин за нас. Ево наше нове књиге прича за госте.
Како то искористити да превазиђемо наш проблем?
Можемо писати приче за уобичајене компоненте (било које компоненте корисничког интерфејса) користећи књигу прича. И кад год ваш саиграч жели да провери заједничке компоненте других, онда једноставно покрећу сервер књиге прича и видеће све компоненте корисничког интерфејса као што смо видели горе.
Можемо учинити много више са приказаним компонентама у књизи прича. Књига прича има концепт под називом Аддонс који нашим причама даје супермоћи.
Рецимо да морамо да проверимо одзив компоненти корисничког интерфејса у самој књизи прича, можемо користити додатак који се зове Виевпорт у књизи прича. Сазнаћемо више о додацима у наредним одељцима.
Рад са Сторибоок-ом
У овом одељку ћемо написати различите приче које дефинишу различита стања наше заједничке компоненте дугмета.
Писање прича није тако тешко. Прича дефинише стање компоненте. Ако видите реквизите компоненте, онда ћете лако разумети различите случајеве употребе компоненте.
Хајде да напишемо неке приче дајући необавезне реквизите.
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"
/>
);
Горе наведене три приче дефинишу различите случајеве употребе наше компоненте Буттон. Сада је ваш ред да додате неке друге случајеве прича за нашу заједничку компоненту. Покушајте да додате дисабледСамллРецтангуларБуттон, дангерБуттон, суццессДисабледБуттон, итд.,
Нећу давати код за горе наведене случајеве. Морате га сами написати да бисте га разумели. Можете видети комплетан код прича који смо до сада написали.
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"
/>
);
Сада имате пуну контролу над писањем прича за компоненту.
Пређимо на следећи одељак где ћемо научити о додацима и како они подстичу наше приче.
Сторибоок Аддонс
Подразумевано ћемо имати више доступних додатака. У одељку ћемо истражити најкорисније додатке за наш развој.
Хајде да појачамо наше приче о дугмету.
Контроле
Контроле додају функцију за давање прилагођених реквизита компоненти у самој књизи прича. За нашу компоненту дугмета, можемо додати контроле за промену различитих реквизита у књизи прича.
Рецимо да морамо да пронађемо најбољу боју за боју позадине дугмета. Биће дуготрајно ако га тестирамо да проверимо боју позадине дајући једну по једну компоненти. Уместо тога, можемо додати контролу која нам омогућава да изаберемо другу боју у књизи прича. Боју позадине можемо тестирати у самој књизи прича.
Хајде да видимо како да додамо контроле нашим причама о дугмету.
Прво, морамо да дефинишемо све реквизите испод наслова на следећи начин.
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 outlineSmallButton = (args) => (
<Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
text: "Outline Small Button",
size: "small",
type: "outline",
};
Можете видети контроле на дну прозора за преглед компоненте.
Можете видети картицу контрола на дну прозора за преглед компоненте. Играјте се око тога.
Ажурирајте све приче као горе. Ово све више личи на познавање синтаксе додатака за књигу прича. У аргТипес-у смо користили различите типове контрола. Можете пронаћи све контроле које су присутне у књизи прича овде.
Ажуриране приче о дугмадима ће изгледати на следећи начин.
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",
};
Акције
Акције су догађаји у ЈаваСцрипт-у. Можемо кликнути на дугме које је догађај у ЈаваСцрипт-у. Можемо да урадимо неке радње кликом на дугме помоћу додатка за радње.
Помоћу акција можемо тестирати да ли догађаји функционишу како треба или не. Не може се кликнути на дугме онемогућено, а дугме за омогућено мора да се кликне. Можемо то осигурати помоћу акција.
Хајде да видимо како додати акцију клику на дугме.
Претходно смо дали анонимну функцију онЦлицк реквизитима. Сада морамо да га ажурирамо.
- Увезите радњу из додатка за књигу прича користећи следећу изјаву.
import { action } from "@storybook/addon-actions";
- Замените све () => {} следећом наредбом.
action("Button is clicked!")
Сада идите на књигу прича и кликните на дугме. Видећете поруку одштампану испод картице радње која се налази поред картице са контролама. Порука се неће одштампати ако кликнете на дугме онемогућено јер је онемогућено.
Можемо користити акцију за различите догађаје као што су онЦханге, онМоусеОвер, онМоусеОут, итд., да бисмо били сигурни да раде исправно. Покушајте да имплементирате исто за онЦханге за улазни елемент.
Погледајте документацију за радње овде.
Позадина
Можемо да променимо позадину прозора за преглед помоћу додатка за позадину. Не морамо да пишемо никакав код. Само га промените у књизи прича. Можете видети гиф испод.
Виевпорт
Такође можемо тестирати одзив наших компоненти у књизи прича. Погледајте гиф испод да бисте сазнали више о опцијама оквира за приказ.
Доцс
Можемо документовати наше компоненте у књизи прича помоћу додатка за документе. Корисније је када радимо у тиму. Они ће прочитати компоненту и директно је разумети. То штеди много времена за програмере.
У прозору за преглед компоненти књига прича можете видети Документе у горњем десном углу на картици Платно. Садржаће све документе свих прича о компоненти. Морамо да користимо Буттон.сториес.мдк ако желимо да документујемо за компоненту која укључује и маркдовн и рендеровање компоненте. Само напишемо додатни код за смањење вредности унутар њега заједно са причама о компонентама.
Пишемо документ за наше приче. Код укључује смањење вредности и рендеровање компоненти. Све је само учење синтаксе. Добићете га на први поглед.
Хајде да видимо Буттон.сториес.мдк доц код.
<!--- 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>
Сазнајте више о компонентама за документовање овде.
Можете сазнати више о додацима овде.
Закључак
Надам се да сте уживали у водичу и да сте научили о књизи прича. И ефикасно га користите у свом тиму како бисте свој посао учинили продуктивним.
Нови сте у Реаговању? Погледајте ове ресурсе за учење.
Срећно кодирање 🙂