Ինչպես կարգավորել Storybook-ը React-ում

Storybook-ն օգնում է ձեզ կենտրոնանալ ձեր React բաղադրիչների վրա, որպեսզի դրանք լինեն հնարավորինս բազմակի օգտագործման, կարգավորելի և առանց սխալների: Կարգավորեք այն այս ձեռնարկով:

React-ի օգտագործման առավելություններից մեկն այն է, որ դուք կարող եք ստեղծել UI բաղադրիչներ, դրանք նորից օգտագործել ձեր ամբողջ հավելվածում և, ի վերջո, խուսափել կոդերի անջատումից: Այնուամենայնիվ, դժվար է միայն React-ով ստեղծել ամբողջովին անկախ UI բաղադրիչներ: Դուք պետք է ստեղծեք դիտումներ, որոնք կցուցադրեն այս բաղադրիչները՝ դրանք տեսնելու համար:

Այստեղ է հայտնվում Storybook-ը: Այն թույլ է տալիս ստեղծել և փորձարկել UI բաղադրիչներ անկախ գործարկման միջավայրում, և այս ձեռնարկում դուք կսովորեք, թե ինչպես օգտագործել այն React-ում: Այս գրառման ավարտին դուք կստեղծեք կոճակի բաղադրիչ և կփաստաթղթավորեք դրա որոշ հնարավոր վիճակներ React-ում:

Ի՞նչ է պատմագիրքը:

Storybook-ը մշակման գործիք է, որը թույլ է տալիս գործարկել և փորձարկել ձեր UI բաղադրիչները առանց ամբողջական React միջավայրի: Սա հեշտացնում է բաղադրիչի վրա հիմնված զարգացումը, քանի որ դուք կարող եք զարգացնել բաղադրիչները առանձին:

Storybook-ի միջոցով բաղադրիչ ստեղծելուց հետո կարող եք ստեղծել մի քանի պատմություններ, որոնք սահմանում են բաղադրիչի տարբեր վիճակները: Կոճակի բաղադրիչի համար այս վիճակները կարող են ներառել առաջնային վիճակը, երկրորդական վիճակը, անջատված վիճակը և այլն:

Քանի որ Storybook-ը թույլ է տալիս պատմություններ ստեղծելիս ներառել կոդը, այն կարող է նաև ծառայել որպես փաստաթղթավորման գործիք:

Storybook-ն օգտագործելու համար դուք պետք է ունենաք Node-ը տեղադրված ձեր սարքում և ունենաք React-ի հիմնական պատկերացում:

React հավելվածի ստեղծում

Storybook-ն օգտագործելու համար նախ կստեղծեք React նախագիծ, այնուհետև կստեղծեք բաղադրիչներ և դրանց պատմությունները:

Գործարկեք հետևյալ հրամանը՝ React հավելված ստեղծելու համար.

npx create-react-app btn-storybook

Սա կստեղծի թղթապանակ, որը կոչվում է btn-storybook՝ բոլոր այն կախվածություններով, որոնք անհրաժեշտ են React հավելվածին:

Հաջորդը, ընդամենը մի քանի քայլով կարող եք տեղադրել և գործարկել Storybook-ը:

Storybook-ի տեղադրում

Նավարկեք btn-storybook պանակ և տեղադրեք պատմությունների գիրքը.

cd btn-storybook
npx storybook init

Քանի որ դուք օգտագործել եք create-react-app, սա միակ հրամանն է, որը դուք պետք է գործարկեք Storybook-ը կարգավորելու համար: Storybook-ը կտեղադրի բոլոր անհրաժեշտ կախվածությունները և կկատարի բոլոր անհրաժեշտ կոնֆիգուրացիան: Այն նաև կստեղծի որոշ կաթսաների պատմություններ՝ սկսելու համար:

Երբ վերը նշված հրամանն ավարտվի, սկսեք պատմությունների գիրքը՝ օգտագործելով հետևյալ կոդը:

npm run storybook

Սա կբացի պատմությունների գրքի վահանակը ձեր դիտարկիչում: Այն պետք է նման լինի հետևյալին.

Կոճակի բաղադրիչի ստեղծում

./src թղթապանակում ստեղծեք մի թղթապանակ, որը կոչվում է Components, իսկ դրա մեջ ստեղծեք մեկ այլ թղթապանակ, որը կոչվում է Button: Button պանակը պետք է լինի այս ճանապարհում՝ ./src/Components/Button:

Այժմ այս թղթապանակում ստեղծեք կոճակը և ավելացրեք հետևյալ կոդը.

import PropTypes from "prop-types"
function Button({ label, backgroundColor = "#6B4EFF", color = "white", borderRadius="48px", border="none"}) {
  const style = {
    backgroundColor,
    padding: "0.5rem 1rem",
    color,
    borderRadius,
    border
  }
  return (
    <button style={style}>
      {label}
    </button>
  )
}
Button.propTypes = {
  label: PropTypes.string,
  backgroundColor: PropTypes.string,
  color: PropTypes.string,
  border:PropTypes.string,
  borderRadius: PropTypes.string,
}
export default Button;

Այս բաղադրիչն ընդունում է React-ի որոշ հենարաններ, որոնք ներառում են կոճակի պիտակը և դրա ոճերը: Դուք նաև օգտագործում եք propTypes-ը՝ ստուգելու փոխանցված հենարանների տեսակները և նախազգուշացում ներկայացնելու համար, եթե սխալ տեսակ եք օգտագործում: Բաղադրիչը վերադարձնում է կոճակի տարր:

Կոճակների պատմությունների ստեղծում

Երբ դուք Storybook-ը տեղադրեցիք React նախագծում, այն ստեղծեց մի թղթապանակ, որը պարունակում էր որոշ պատմությունների օրինակներ, որոնք կոչվում էին stories: Նավարկեք դեպի այդ թղթապանակը և ջնջեք դրա մեջ եղած ամեն ինչ: Դուք կստեղծեք պատմությունները զրոյից:

Դուք կստեղծեք երկու պատմություն, որոնք ներկայացնում են հիմնական կոճակը և երկրորդական կոճակը: Այս կոճակներից յուրաքանչյուրն ունի տարբեր ոճ, որն այն առանձնացնում է մնացածից: Պատմությունները ստեղծելուց հետո դուք կկարողանաք տեսնել դրանցից յուրաքանչյուրը Storybook վահանակում:

Stories թղթապանակում ստեղծեք նոր ֆայլ, որը կոչվում է button.stories.js: Կարևոր է ներառել .stories նախքան .js-ը, քանի որ դա պատմում է Storybook-ին, որը պատմությունների ֆայլ է:

Ներմուծեք Button բաղադրիչը:

import Button from "../Components/Button/Button"

Հաջորդը արտահանեք բաղադրիչի անվանումը և բուն բաղադրիչը: Նշենք, որ վերնագիրը պարտադիր չէ:

export default {
    title: "Components/Button",
    component: Button,
}

Առաջին պատմությունը, որը դուք կստեղծեք, նախատեսված է Հիմնական կոճակի համար: Այսպիսով, ստեղծեք նոր գործառույթ, որը կոչվում է Հիմնական և արտահանեք այն:

export const Primary = () => <Button backgroundColor="#6B4EFF" label="Primary"/>

Այժմ, եթե գնաք Storybook վահանակ, դուք կկարողանաք տեսնել ցուցադրված կոճակը:

Ներկայացված բաղադրիչն ուղիղ եթերում խմբագրելու և Storybook վահանակում դրա վիճակը փոխելու համար դուք կօգտագործեք args: Args-ը թույլ է տալիս արգումենտներ փոխանցել Storybook-ին, որոնք փոխվելիս հանգեցնում են բաղադրիչի վերաարտադրության:

Կոճակի պատմության արկերը սահմանելու համար ստեղծեք ֆունկցիայի կաղապար:

const Template = args => <Button {...args}/>

Այս ձևանմուշը ընդունում է args և դրանք փոխանցում է որպես կոճակ բաղադրիչին:

Այժմ կարող եք վերաշարադրել Հիմնական պատմությունը՝ օգտագործելով ձևանմուշը, ինչպես ցույց է տրված ստորև:

export const Primary = Template.bind({})
 
Primary.args = {
    backgroundColor: "#6B4EFF",
    label: "Primary",
}

Եթե դուք ստուգում եք Storybook-ի վահանակը, դուք պետք է տեսնեք հսկիչները ներքևում: Այս հսկիչները թույլ են տալիս փոխել կոճակի ցուցադրման եղանակը: Դուք կարող եք փոխել ֆոնի գույնը, տեքստի գույնը, պիտակը, եզրագիծը և սահմանային շառավիղը:

Մյուս պատմությունները ստեղծելու համար անհրաժեշտ է միայն փոխել args արժեքները: Օրինակ՝ Երկրորդական կոճակ ստեղծելու համար օգտագործեք հետևյալ կոդը.

export const Secondary = Template.bind({})
 
Secondary.args = {
    backgroundColor: "#E7E7FF",
    color: "#6B4EFF",
    label: "Secondary",
}

Storybook-ի վահանակում նավարկեք տարբեր պատմություններ՝ սեղմելով դրանց վրա կողային գոտում: Դուք կտեսնեք, թե ինչպես է յուրաքանչյուրը ներկայացնում: Դուք կարող եք շարունակել ավելացնել ավելի շատ վիճակներ կոճակների պատմություններին, ինչպես ցանկանում եք: Փորձեք ավելացնել ուրվագիծ կամ ուրվագիծ պատմություն:

UI բաղադրիչների փորձարկում

Այս ձեռնարկը ձեզ հակիրճ ներկայացրեց Storybook-ը React UI բաղադրիչներով օգտագործելու մասին: Դուք սովորեցիք, թե ինչպես ավելացնել Storybook React նախագծին և ինչպես ստեղծել հիմնական պատմություն Button բաղադրիչի համար args-ով:

Դուք կարող եք նկատել, որ այս գործընթացի ընթացքում դուք փորձարկում էիք, թե ինչպես է կոճակի բաղադրիչը մատուցվում տարբեր վիճակներում: Դուք կարող եք ավելի շատ կոդ գրել, բայց բաղադրիչի պատմությունները գրելուց հետո դուք կնվազեցնեք բոլոր սխալները, որոնք կարող են առաջանալ ձեր հավելվածում բաղադրիչները նորից օգտագործելիս: Ավելին, ավելի հեշտ կլինի հետևել սխալին, եթե այն տեղի ունենա: Սա բաղադրիչի վրա հիմնված զարգացման գեղեցկությունն է: