آموزش جامع ساخت کامپوننت‌های UI با Storybook - راهنمای عملی - آخرین آپدیت

سرفصل ها و درس ها

Storybook چیست - بررسی کلی سطح کلیدی What is Storybook - A Key Level Overview

• Storybook چیست و چرا باید به آن اهمیت دهیم What is Storybook and why should we care

• کدام تیم‌های مهندسی پیشرو از Storybook استفاده می‌کنند Which Leading Engineer Teams are using Storybook

• مشکل اپلیکیشن‌های وب مدرن در مقیاس بزرگ The Problem with modern large scale Web Apps

• چگونه Storybook با ایزوله‌سازی توسعه UI، اپلیکیشن‌ها را بهبود می‌بخشد How Storybook improves applications with the isolation of UI development

• نحوه عملکرد Storybook با کامپوننت‌ها How storybook works with components

• تز: Storybook زمان و منابع ارزشمندی را برای پروژه‌ها ذخیره می‌کند Thesis - Storybook saves valuable time and resources for projects

• خلاصه و بررسی کوتاه این بخش - کاربرد Storybook Summary and brief overview of this section - Storybook Utility

دوره سریع React برای مبتدیان - React چیست و چگونه اپلیکیشن‌های وب بسازیم React Crash Course for Beginners - What is React and How To Build Web Apps

• نکته مهم در مورد بخش‌های آینده Important note on the upcoming sections

• DOM چیست و Virtual DOM در React چیست - مبانی React What is the DOM and what is the React Virtual DOM - React Fundamentals

• چگونه ساخت یک اپلیکیشن React را با CRA شروع کنیم How to start building a react app with CRA

• بررسی CRA - فایل‌ها و وابستگی‌های React CRA - React Files and Dependencies - Overview

• نحوه اتصال ریشه React به DOM و رندر کردن اپلیکیشن React How to connect the Root of React to the DOM and Rendering React Application

• اجرای سرور توسعه محلی React Running A Local Development Server of React

• کامپوننت‌های تابعی (Functional Components) در React چیستند What are functional components in React

• مشاهده سریع استانداردهای Ecma در React Quick Observation on Echma Standards with React

• درخت کامپوننت‌های React و کامپوننت‌های ترکیبی The React Component Tree And Composite Components

• نحوه عملکرد Props در React How Props work in React

• تمرین - ساخت یک کامپوننت React Exercise - Build A React Component

• هوک‌ها (Hooks) در React چیستند What are hooks in React

• تست‌های پویا و رویدادها در React Input Dynamic tests and events with React

• تمرین مدیریت رویدادها و خلاصه بخش Event Handling Practice and Section Summary

ساخت یک نمونه Storybook از صفر با React - سطح جونیور Build A Storybook Example From Scratch With React - Junior Level

• نصب و راه‌اندازی Storybook در پروژه از صفر Installing and setting up Storybook into your Project Application from Scratch

• بررسی نحوه پیکربندی Storybook در پروژه‌های وب Overview of How Storybook is Configured with Web App Projects

• نحوه ساخت یک کامپوننت در React با Storybook - تحلیل بصری How to build a component in React with Storybook - visual breakdown

• ساخت یک زیر‌کامپوننت پایه در React Build A Basic Sub Component In React

• چگونه برای کامپوننت‌های React از صفر یک Story بسازیم How to build a story for react components from scratch

• نحوه استفاده از args در Storybook برای استوری‌های پویا و متعدد How to use args in Storybook for multiple dynamic component stories

• استفاده از argTypes و controls در Storybook برای ایجاد استوری‌های کاربرپسند How to use argTypes and controls in storybook to create user friendly stories

• اتوماسیون مستندات برای کامپوننت‌های وب با Storybook Automating Documentation for Web Components with Storybook

• سفارشی‌سازی مستندات و مقادیر در Storybook Customizing Docs and values with Storybook

• افزودن پیچیدگی به کامپوننت برای آرگومان‌های Storybook Adding Component Complexity for Storybook Arguments

• تکنیک‌های CSS و رندرینگ در Storybook CSS Techniques and Storybook rendering

• اکشن‌ها (Actions) در Storybook و شیء Synthetic Base Event چیستند What are actions in Storybook and the Synthetic Base Event Object

• اتصال کامپوننت‌های زنده React به Storybook و مبانی رندرینگ Hooking Up Live React Components to Storybook and Rendering Fundamentals

• ایجاد استوری‌ها با وضعیت (state) و رویدادهای مجازی (mock) در Storybook Creating Stories with mock state and events in Storybook

• تست تعاملات و رویدادها با کامپوننت‌های React در Storybook Testing Interactions and Events with React Components in Storybook

Storybook - آموزش پیشرفته کدنویسی همزمان Storybook - Advanced Tutorial Code Along

• نحوه تنظیم Storybook با React How to set up Storybook with React

• ساخت کامپوننت با Storybook - متدولوژی CDD How to build a component with Storybook - CDD Methodology

• پیکربندی‌ها برای Storybook و سرور محلی آن Configurations for Storybook and Storybook Local Server

• استفاده از PropTypes و فرمت‌بندی CSS در Storybook و React PropTypes and CSS formatting with Storybook and React

• استفاده از دسترسی‌پذیری WCAG برای شناسایی خطاها در افزونه Storybook Using WCAG Accessibility to Catch Errors in Storybook Addon

• ساخت یک کامپوننت ترکیبی در React برای Storybook Building a Composite Component in React for Storybook

• ساخت کامپوننت‌های قدرتمند با Storybook Building Out Robust Components with Storybook

اتصال داده‌های خارجی با Storybook - Redux Connecting External Data with Storybook - Redux

• دوره سریع Redux Toolkit - راه‌اندازی Store Mini Crash Course on Redux Toolkit - Setting up the Store

• ارسال اکشن‌ها (Dispatching) و سلکتورها برای وضعیت با Redux در کامپوننت‌های React Dispatching Actions and Selectors for State with Redux in Components For React

• ایجاد یک Redux Store مجازی برای استوری‌ها در Storybook Creating a Mock Redux Store for Stories in Storybook

• اتصال داده‌های خارجی مجازی به استوری‌های Storybook برای کامپوننت‌ها Connecting Mock External Data into Stories with Storybook for Components

ساخت کامپوننت‌های سطح بالا با Storybook - مثال Redux و React Building Higher Level Components with Storybook - Redux and React Example

• خلاصه کدهای Redux و داده‌های مجازی از بخش قبل Summary of Redux Code And Mock Data From Previous Section

• دریافت داده‌های API از راه دور با Storage Fetching Remote API Data with Storage

• دریافت داده‌ها هنگام Mounting کامپوننت در React و مدیریت خطاها Fetching Data with Component Mounting in React and Error Handling

• ساخت یک کامپوننت صفحه (Screen) و پوشاندن React حول Redux Building A Screen Component And Wrapping React Around Redux

• استفاده از Service Workerها در Storybook برای ساخت استوری‌ها با درخواست‌های API Using Service Workers in Storybook to Build Stories with API Requests

• بروزرسانی ویژگی‌ها با صفحات و اسکرین‌های پیچیده در Storybook Feature Updates with Complex Component Pages and Screens in Storybook

• اتوماسیون تست‌ها با تعاملات در Storybook Automating Tests with Interactions in Storybook

• اتوماسیون‌های Playwright در Storybook برای تست Storybook Playwright Automations for Testing

استقرار Storybook در گیت‌هاب با Chromatic و اتوماسیون‌ها Deploying Storybook to Github with Chromatic and Automations

• خلاصه سریع تا این لحظه و نکات بخش آینده Quick Summary So Far and Upcoming Notice for this Section

• نحوه استقرار Storybook در گیت‌هاب و Chromatic How to deploy Storybook to Github and Chromatic

• اتوماسیون استقرار در Storybook با CI Actions و Rebasing Merges Automating Deployments to Storybook with CI Actions and Rebasing Merges

• تست بصری با رگرسیون در کامپوننت‌ها با استفاده از Storybook Visual Testing with Regression in Components using Storybook

• نتیجه‌گیری و تبریک!! Conclusion and Congratulations!!