کد آموزش رسمی کتاب داستان همراه - توسعه وب

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

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

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

• کدام تیم های مهندسی پیشرو از کتاب داستان استفاده می کنند 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

• نحوه کار کتاب داستان با کامپوننت ها How storybook works with components

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

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

دوره React Crash برای مبتدیان - React چیست و چگونه برنامه ها را با آن بسازیم React Crash Course for Beginners - What is React and How To Builds Apps with

• راه حل کد Code Solution

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

• DOM چیست و React Virtual DOM چیست - React Fundamentals What is the DOM and what is the React Virtual DOM - React Fundamentals

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

• CRA - React Files and Dependencies - Overview CRA - React Files and Dependencies - Overview

• نحوه اتصال Root of React به DOM و Rendering React Application How to connect the Root of React to the DOM and Rendering React Application

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

• اجزای عملکردی در React چیست؟ What are functional components in React

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

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

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

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

• هوک ها در React چیست؟ What are hooks in React

• تست ها و رویدادهای دینامیک را با React وارد کنید Input Dynamic tests and events with React

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

یک مثال از ابتدا با React - Junior Level یک کتاب داستان بسازید Build A Storybook Example From Scratch With React - Junior Level

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

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

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

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

• چگونه از ابتدا یک داستان برای اجزای واکنش بسازیم How to build a story for react components from scratch

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

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

• خودکارسازی مستندات برای اجزای وب با کتاب داستان Automating Documentation for Web Components with Storybook

• سفارشی کردن اسناد و مقادیر با Storybook Customizing Docs and values with Storybook

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

• تکنیک های CSS و ارائه کتاب داستان CSS Techniques and Storybook rendering

• اقدامات در Storybook و Synthetic Base Event Object چیست؟ What are actions in Storybook and the Synthetic Base Event Object

• اتصال Live React Components به Storybook و Rendering Fundamentals Hooking Up Live React Components to Storybook and Rendering Fundamentals

• ایجاد داستان با حالت ساختگی و رویدادها در کتاب داستان Creating Stories with mock state and events in Storybook

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

• راه حل کد نهایی Final Code Solution

کتاب داستان - کد آموزش پیشرفته همراه 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 و سرور محلی Storybook Configurations for Storybook and Storybook Local Server

• PropType و قالب بندی CSS با Storybook و React PropTypes and CSS formatting with Storybook and React

• استفاده از قابلیت دسترسی WCAG برای گرفتن خطاها در افزونه کتاب داستان Using WCAG Accessibility to Catch Errors in Storybook Addon

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

• ساخت اجزای قوی با کتاب داستان Building Out Robust Components with Storybook

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

• دوره کوتاه Crash در Redux Toolkit - راه اندازی فروشگاه Mini Crash Course on Redux Toolkit - Setting up the Store

• Dispatching Actions و Selectors for State با Redux در Components For React Dispatching Actions and Selectors for State with Redux in Components For React

• ایجاد یک فروشگاه Redux ساختگی برای داستان ها در کتاب داستان Creating a Mock Redux Store for Stories in Storybook

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

ساخت اجزای سطح بالاتر با کتاب داستان - Redux و React مثال Building Higher Level Components with Storybook - Redux and React Example

• کد شروع Starter Code

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

• واکشی داده های API از راه دور با فضای ذخیره سازی Fetching Remote API Data with Storage

• واکشی داده با نصب کامپوننت در React و Error Handling Fetching Data with Component Mounting in React and Error Handling

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

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

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

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

• کتاب داستان اتوماسیون نمایشنامه نویس برای آزمایش Storybook Playwright Automations for Testing

استقرار Storybook در Github با Chromatic و Automations Deploying Storybook to Github with Chromatic and Automations

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

• کد شروع Starter Code

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

• خودکارسازی پیاده‌سازی‌ها در کتاب داستان با اقدامات CI و ادغام‌های Rebasing Automating Deployments to Storybook with CI Actions and Rebasing Merges

• کد اقدام GITHUB GITHUB ACTION CODE

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

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

• کد راه حل نهایی Taskbox Taskbox Final Solution Code