دوره آموزشی ساخت کتابخانههای مقیاسپذیر کامپوننتهای رابط کاربری React با استفاده از Storybook
1 ساعت 14 دقیقهمتوسط2025-09-15
مدرسین
Ifeoma Nwosu
جزئیات دوره
توی این دوره، ایفئوما نوسوو (Ifeoma Nwosu) که یه مهندس نرمافزار فرانتاند حرفهایه، قدم به قدم بهت یاد میده چطور یه کتابخونه کامپوننت UI با React و Storybook بسازی؛ چیزی که هم مقیاسپذیر باشه، هم قابل استفاده مجدد، و هم بهراحتی بشه نگهداریش کرد.
یاد میگیری چطور کامپوننتهایی طراحی کنی که کارایی بالایی داشته باشن، تو کل پروژه یهدست باشن، و به راحتی توسعه پیدا کنن. در کنارش هم با قدرت Storybook آشنا میشی که بهت کمک میکنه کامپوننتها رو بهصورت جداگانه تست بصری و مستندسازی کنی تا مطمئن بشی همهچیز درست کار میکنه.
این دوره همینطور بهت اصول توسعه مبتنی بر کامپوننت (Component-Driven Development) رو نشون میده تا بتونی کتابخونههایی طراحی کنی که روند کاری تیم رو سریعتر کنن، همکاری بین اعضای تیم رو راحتتر کنن، و در نهایت رابطهای کاربری داینامیک، ریسپانسیو و در دسترس برای همه بسازی.
در پایان این دوره، مهارت ساختن کتابخونه کامپوننتهایی رو داری که کل تیمت با عشق ازشون استفاده کنن.
اهداف یادگیری
تعریف و درک مفاهیم اصلی کتابخونه کامپوننت در React
طراحی و توسعه کامپوننتهای قابل استفاده مجدد و ساختارمند در React
استفاده از Storybook برای توسعه و مستندسازی کامپوننتها بهصورت ایزوله
ساخت کتابخونه کامپوننت مقیاسپذیر و قابل نگهداری که همراه پروژه رشد کنه
یاد میگیری چطور کامپوننتهایی طراحی کنی که کارایی بالایی داشته باشن، تو کل پروژه یهدست باشن، و به راحتی توسعه پیدا کنن. در کنارش هم با قدرت Storybook آشنا میشی که بهت کمک میکنه کامپوننتها رو بهصورت جداگانه تست بصری و مستندسازی کنی تا مطمئن بشی همهچیز درست کار میکنه.
این دوره همینطور بهت اصول توسعه مبتنی بر کامپوننت (Component-Driven Development) رو نشون میده تا بتونی کتابخونههایی طراحی کنی که روند کاری تیم رو سریعتر کنن، همکاری بین اعضای تیم رو راحتتر کنن، و در نهایت رابطهای کاربری داینامیک، ریسپانسیو و در دسترس برای همه بسازی.
در پایان این دوره، مهارت ساختن کتابخونه کامپوننتهایی رو داری که کل تیمت با عشق ازشون استفاده کنن.
اهداف یادگیری
تعریف و درک مفاهیم اصلی کتابخونه کامپوننت در React
طراحی و توسعه کامپوننتهای قابل استفاده مجدد و ساختارمند در React
استفاده از Storybook برای توسعه و مستندسازی کامپوننتها بهصورت ایزوله
ساخت کتابخونه کامپوننت مقیاسپذیر و قابل نگهداری که همراه پروژه رشد کنه
مهارت ها
StorybookReact.jsMetaFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off
سرفصل ها
۰. مقدمه
- 01 - ساخت کتابخانههای مقیاسپذیر با React و Storybook
۱. راهاندازی و ابزارآلات پروژه
- 02 - راهاندازی یک پروژه React جدید
- 03 - نصب و راهاندازی Storybook
- 04 - ایجاد کامپوننتهای React
- 05 - چالش - ایجاد یک کامپوننت React جدید
- 06 - راه حل - ایجاد یک کامپوننت React جدید
۲. مقدمهای بر کتاب داستان
- 07 - کتاب داستان چیست و چرا از آن استفاده کنیم
- 08 - بررسی رابط کاربری Storybook
- 09 - نوشتن اولین داستان شما
- 10 - چالش - اولین داستان خود را بنویسید
- 11 - راه حل - اولین داستان خود را بنویسید
۳. توسعه کامپوننتهای React با قابلیت استفاده مجدد برای کتابخانههای کامپوننت
- 12 - استایلدهی منسجم با استفاده از کامپوننتهای استایلدار و توکنهای طراحی
- 13 - قابل اعتماد کردن اجزا با ملزومات دسترسی
۴. مستندسازی و مدیریت کامپوننتها در Storybook
- 14 - نوشتن داستانهای جامع با افزونهی Docs
- 15 - استفاده از کنترلها و اقدامات برای بهبود داستانها
- 16 - چالش - اضافه کردن کنترلها و اکشنها به یک کامپوننت React
- 17 - راه حل - اضافه کردن کنترلها و اکشنها به یک کامپوننت React
نتیجهگیری
- 18 - بهترین شیوهها برای کتابخانههای کامپوننت
- 19 - مراحل بعدی