نصب و راه اندازی storybook

تو مقاله قبلی به طور مفصل استوری بوک رو معرفی کردم و تو این مقاله قصد دارم در مورد نصب و راه اندازی storybook ورژن ۵ تو پروژه ری اکت صحبت کنم و در ادامه با انجام چند مثال ساده کارایی استوری بوک رو بررسی کنیم.

در صورتی که میخواهید مقاله معرفی استوری بوک رو مطالعه کنید:

تو مقاله های بعدی در مورد راه اندازی افزونه های استوری بوک صحبت میکنم. قدرت استوری بوک با این افزونه ها چند برابر میشه !

نصب استوری بوک

برای نصب استوری بوک روی پروژه‌ای که داریم به سادگی:

npm install @storybook/react --save-dev

و در صورتی که از yarn استفاده میکنید:

yarn add @storybook/react --dev

تو پروژه ری اکتی که دارید مطمئن شید که این پکیج هارو نصب کردید: react react-dom babel/core babel-loader

و در غیر این صورت از این دستور برای نصبشون استفاده کنید:

npm install react react-dom --save 
npm install babel-loader @babel/core --save-dev 

و با پکیج منیجر yarn

yarn  add react react-dom
yarn add babel-loader @babel/core --dev 

دقت کنید که پکیج های babel-loader و babel/core در قسمت توسعه devDependencies نصب میشن و سایر پکیج ها در قسمت dependencies . اگر از create-react-app برای ایجاد پروژه استفاده کردید در این صورت react و react-dom بر روی پروژه شما نصب شده.

اضافه کردن استوری بوک به دستورات اسکریپت

بعد از نصب استوری بوک لازم داریم که اون رو به صورت اسکریپت اجرایی کنیم. برای این کار فایل package.json پروژه رو باز میکنیم و در قسمت script ها ، دستور استوری بوک رو هم اضافه میکنیم:

{   "scripts": 
    {     
        "storybook": "start-storybook"   
    }
}

ساخت فایل کانفیگ استوری بوک

استوری بوک بعد از نصبش و برای کانفیگ‌های خودش یک پوشه به مخفی به اسم storybook روی روت پروژه میسازه ( دقت کنید که اول اسم این پروژه با نقطه شروع میشه و به معنی مخفی بودن این پوشه است ). توی این پوشه یه فایل به اسم config.js بسازید.

این فایل رو باز کنید و این تنظیمات رو توش قرار بدید:

import { configure } from '@storybook/react'; 

function loadStories() {   require('../stories/index.js');   
// You can require as many stories as you need. 
}  

configure(loadStories, module);

تو این فایل به استوری بوک داریم میگیم که فایل های استوری ما کجا قرار داره.

کافیه که یه پوشه دیگه به اسم stories توی روت پروژه درست کنید. این پوشه همه استوری های پروژه رو شامل میشه. فایل index.js رو بسازید و بازش کنید تا اولین استوری خودمون رو بنویسیم.

نوشتن اولین استوری

استوری بوک از یک مثال ساده برای استوری استفاده میکنه و شما هم میتونید این مثال رو استفاده کنید (یعنی به صورت پیش فرض همراه با پکیج استوری بوک ارائه میشه)

توی فایل index.js که تو پوشه stories قرار گرفته این استوری هارو بنویسید:

و درصورتی که بخواهید کدهارو کپی پیست کنید:

import React from 'react'; 

import { storiesOf } from '@storybook/react'; 

import { Button } from '@storybook/react/demo';

storiesOf('Button', module).add('with text', () => (<Button>Hello Button</Button>)).add('with emoji', () => ( <Button><span role="img" aria-label="so cool">? ? ? ?</span></Button>   ));  

اجرای استوری بوک

بعد از نصب و اضافه کردن دستور اجرای استوری بوک در قسمت اسکریپت و بعد از اون تنظیمات اولیه استوری بوک و ساخت پوشه استوری و قرار دادن اولین استوری آزمایشی در اون ، بعد نوبت به اجرای آزمایشی استوری بوک است:

کافیه تو ترمینال :

npm run storybook

و در صورتی که با yarn کار میکنید:

yarn storybook

استوری بوک بعد از چند ثانیه اجرا شده و روی پورت پیش فرض خودش صفحه وبی رو باز میکنه . در صورتی که صفحه مرورگر وب شما به صورت اتوماتیک باز نشد نگران نباشید!

چیزی که شما باید تو ترمینال ببینید:

این نشون میده که همه چی درسته حالا به مرورگر خودتون برید و آدرسی که استوری بوک بهتون گفته رو وارد کنید ( معمولا localhost:6006 هست). باید اولین استوری خودمون رو ببینیم:

رنگ بکگراند شما سفید هست و با عکسی که من گذاشتم تفاوت هایی رو مشاهده میکنید که کاملا طبیعی هست . تو قسمت های بعدی در مورد کاستومایز کردن استوری بوک و نحوه نمایشش بیشتر توضیح میدم.

خوب میبینید که بدون راه اندازی وب سرویس یا سرور ، تونستیم یک کامپوننت خیلی ساده رو نمایش بدیم!
این گوشه ای از قدرت استوری بوک هست!
برای این که با استوری بوک بیشتر آشنا بشید مقاله های بعدی من رو دنبال کنید.

** مقاله های بعدی من در مورد استوری بوک بعد از انتشار در این قسمت قرار میگیرند **

سایر مقاله های من در ویرگول:

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123