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

تو مقاله قبلی به طور مفصل استوری بوک رو معرفی کردم و تو این مقاله قصد دارم در مورد نصب و راه اندازی storybook ورژن ۵ تو پروژه ری اکت صحبت کنم و در ادامه با انجام چند مثال ساده کارایی استوری بوک رو بررسی کنیم. در صورتی که میخواهید مقاله معرفی استوری بوک رو مطالعه کنید: https://virgool.io/JavaScript8/معرفی-storybookjs-ub1k1h88bda6 تو مقاله های بعدی در مورد راه اندازی افزونه های استوری بوک صحبت میکنم. قدرت استوری بوک با این افزونه ها چند برابر میشه !استوری بوک نصب استوری بوکبرای نصب استوری بوک روی پروژه‌ای که داریم به سادگی: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 هست). باید اولین استوری خودمون رو ببینیم:استوری های موجوداولین استوری دومین استوریرنگ بکگراند شما سفید هست و با عکسی که من گذاشتم تفاوت هایی رو مشاهده میکنید که کاملا طبیعی هست . تو قسمت های بعدی در مورد کاستومایز کردن استوری بوک و نحوه نمایشش بیشتر توضیح میدم.خوب میبینید که بدون راه اندازی وب سرویس یا سرور ، تونستیم یک کامپوننت خیلی ساده رو نمایش بدیم!این گوشه ای از قدرت استوری بوک هست!برای این که با استوری بوک بیشتر آشنا بشید مقاله های بعدی من رو دنبال کنید.** مقاله های بعدی من در مورد استوری بوک بعد از انتشار در این قسمت قرار میگیرند **سایر مقاله های من در ویرگول: https://virgool.io/iran-react-community/ریداکس-به-زبان-ساده-emxqh7w4gnpk https://virgool.io/programmers-revolution/بهترین-تمرین-های-گیت-wgjeggzbq1gj https://virgool.io/JavaScript8/معرفی-flow-برای-جاواسکرپیت-ogssae9iaif4 Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123