آموزش ساخت کامپوننت‌های UI با Storybook: تسلط بر کامپوننت‌های React و طراحی رابط کاربری برای بهره‌وری بیشتر - آخرین آپدیت

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

Storybook چیست؟ بررسی کلی در سطح کلیدی What Is Storybook? A Key Level Overview

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

• کدام تیم‌های مهندسی پیشرو از Storybook استفاده می‌کنند Which leading engineer teams are using Storybook

• تز: Storybook باعث صرفه‌جویی در زمان و منابع ارزشمند پروژه‌ها می‌شود Thesis: Storybook saves valuable time and resources for projects

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

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

• مشکلات وب‌اپلیکیشن‌های مدرن در مقیاس بزرگ The problem with modern large-scale web apps

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

1. دوره سریع React برای مبتدیان: React چیست و چگونه وب‌اپلیکیشن بسازیم 1. React Crash Course for Beginners: What Is React? And How to Build Web Apps

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

• نگاهی سریع به استانداردهای ECMAScript در React Quick observation on ECMAScript standards with React

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

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

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

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

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

• درخت کامپوننت‌های React و کامپوننت‌های ترکیبی The React component tree and composite components

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

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

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

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

• تمرین مدیریت رویدادها و خلاصه بخش Event handling practice and section summary

• بررسی CRA: فایل‌های React و وابستگی‌ها CRA: React files and dependencies, an overview

2. ساخت یک نمونه Storybook از صفر با React (سطح جونیور) 2. Build a Storybook Example from Scratch with React (Junior Level)

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

• اتصال کامپوننت‌های زنده React به Storybook و مبانی رندرینگ Hooking up live React components to Storybook and rendering fundamentals

• افزودن پیچیدگی به کامپوننت برای آرگومان‌های Storybook Adding component complexity for Storybook arguments

• خودکارسازی مستندات برای وب‌کامپوننت‌ها با Storybook Automating documentation for web components with Storybook

• Actionها در Storybook و شیء رویداد پایه سنتتیک چیستند؟ What are actions in Storybook and the synthetic base event object?

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

• بررسی نحوه پیکربندی Storybook در پروژه‌های وب‌اپلیکیشن Overview of how Storybook is configured with web app projects

• چگونه در React با Storybook کامپوننت بسازیم: تحلیل بصری How to build a component in React with Storybook: Visual breakdown

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

• ساخت یک زیرکامپوننت (Sub-component) پایه در React Build a basic sub-component in React

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

• تست تعاملات و رویدادها با کامپوننت‌های React در Storybook Testing interactions and events with React components in Storybook

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

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

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

3. آموزش پیشرفته Storybook: کدنویسی عملی 3. Storybook: Advanced Tutorial Code Along

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

• استفاده از دسترسی‌پذیری WCAG برای شناسایی خطاها در افزودنی Storybook Using WCAG accessibility to catch errors in Storybook addon

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

• نحوه راه‌اندازی Storybook با React How to set up Storybook with React

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

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

• ساخت کامپوننت‌های قدرتمند با Storybook Building out robust components with Storybook

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

• اتصال داده‌های خارجی Mock به استوری‌های Storybook برای کامپوننت‌ها Connecting mock external data into stories with Storybook for components

• ارسال Actionها و Selectorها برای State با 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

• دوره سریع Redux Toolkit: راه‌اندازی Store Mini crash course on Redux Toolkit: Setting up the store

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

• ساخت کامپوننت صفحه و پوشاندن 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

• دریافت داده‌های API از راه دور با ذخیره‌سازی Fetching remote API data with storage

• اتوماسیون‌های Storybook Playwright برای تست Storybook Playwright automations for testing

• خودکارسازی تست‌ها با تعاملات در Storybook Automating tests with interactions in Storybook

• خلاصه کدهای Redux و داده‌های Mock از بخش قبل Summary of Redux code and mock data from previous section

• به‌روزرسانی ویژگی‌ها با صفحات و اسکرین‌های پیچیده در Storybook Feature updates with complex component pages and screens in Storybook

• دریافت داده‌ها هنگام Mount شدن کامپوننت در React و مدیریت خطا Fetching data with component mounting in React and error handling

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

• نحوه استقرار Storybook در GitHub و Chromatic How to deploy Storybook to GitHub and Chromatic

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

• خودکارسازی استقرار در Storybook با CI Actions و Rebasing Merges Automating deployments to Storybook with CI actions and rebasing merges

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

• خلاصه سریع تا این لحظه و اطلاعیه‌های آینده برای این بخش Quick summary so far and upcoming notice for this section