ساخت اجزای رابط کاربری با Storybook: Master React Components و طراحی UI با Storybook برای کارایی بهتر

مدرس Packt Publishing

انتشار 2026/02/27

مدت زمان 8h 40m

سطح مناسب همه

فایل تمرینی دارد

آموزش Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency

معرفی جامع برای Storybook و React دریافت کنید، و بررسی کنید که چگونه هر دو در توسعه اجزای رابط کاربری مهم هستند. اصول Storybook را مرور کنید، از جمله اینکه چگونه همکاری را تقویت می کند و توسعه UI را برای آزمایش بهتر جدا می کند. به اصول React، ایجاد کامپوننت‌ها، و درک ابزارها، قلاب‌ها و DOM مجازی React بروید. کشف کنید که Storybook چگونه گردش کار را با فعال کردن توسعه مجزا و آزمایش اجزا در زمان واقعی ساده می کند. بعلاوه، با مفاهیم پیشرفته ای مانند اتصال داده های خارجی با Redux و تست تعاملات اجزاء مقابله کنید. این دوره نمونه‌های عملی و سناریوهای دنیای واقعی را ارائه می‌کند و شما را گام به گام از طریق یکپارچه‌سازی Redux، مدیریت وضعیت برنامه، و خودکارسازی فرآیندهای تست و استقرار با استفاده از ابزارهایی مانند Chromatic راهنمایی می‌کند و به شما کمک می‌کند تا درک عمیقی از توسعه مبتنی بر مؤلفه، آزمایش بصری و یکپارچه‌سازی مداوم به دست آورید. در پایان این دوره، مهارت‌هایی برای ساخت اجزای پیچیده React با Storybook، مدیریت داده‌های پیچیده، خودکارسازی گردش‌های کاری و استقرار پروژه‌های خود را خواهید داشت. توجه: این دوره توسط Packt Publishing ارائه شده است. ما خوشحالیم که این محتوا را در کتابخانه خود میزبانی می کنیم.

React Native User Interface Design

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 ()

How Storybook improves applications with the isolation of UI development ()

How Storybook works with components ()

Thesis: Storybook saves valuable time and resources for projects ()

Summary and brief overview of this section: Storybook utility ()

1. React Crash Course for Beginners: What Is React? And How to Build Web Apps

Important note on the upcoming sections ()

What is the DOM and what is the React Virtual DOM? React fundamentals ()

How to start building a React app with CRA ()

CRA: React files and dependencies, an overview ()

How to connect the root of React to the DOM and rendering React application ()

Running A Local Development Server of React ()

What are functional components in React ()

Quick observation on ECMAScript standards with React ()

The React component tree and composite components ()

How props work in React ()

Exercise - Build A React Component ()

What are hooks in React ()

Input dynamic tests and events with React ()

Event handling practice and section summary ()

2. Build a Storybook Example from Scratch with React (Junior Level)

Installing and setting up Storybook into your Project Application from Scratch ()

Overview of how Storybook is configured with web app projects ()

How to build a component in React with Storybook: Visual breakdown ()

Build a basic sub-component in React ()

How to build a story for React components from scratch ()

How to use args in Storybook for multiple dynamic component stories ()

How to use argTypes and controls in Storybook to create user-friendly stories ()

Automating documentation for web components with Storybook ()

Customizing docs and values with Storybook ()

Adding component complexity for Storybook arguments ()

CSS techniques and Storybook rendering ()

What are actions in Storybook and the synthetic base event object? ()

Hooking up live React components to Storybook and rendering fundamentals ()

Creating stories with mock state and events in Storybook ()

Testing interactions and events with React components in Storybook ()

3. Storybook: Advanced Tutorial Code Along

How to set up Storybook with React ()

How to build a component with Storybook - CDD Methodology ()

Configurations for Storybook and Storybook Local Server ()

PropTypes and CSS formatting with Storybook and React ()

Using WCAG accessibility to catch errors in Storybook addon ()

Building a composite component in React for Storybook ()

Building out robust components with Storybook ()

4. Connecting External Data with Storybook: Redux

Mini crash course on Redux Toolkit: Setting up the store ()

Dispatching actions and selectors for state with Redux in components for React ()

Creating a mock Redux store for stories in Storybook ()

Connecting mock external data into stories with Storybook for components ()

5. Building Higher Level Components with Storybook: Redux and React Example

Summary of Redux code and mock data from previous section ()

Fetching remote API data with storage ()

Fetching data with component mounting in React and error handling ()

Building a screen component and wrapping React around Redux ()

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 ()

6. Deploying Storybook to GitHub with Chromatic and Automations

Quick summary so far and upcoming notice for this section ()

How to deploy Storybook to GitHub and Chromatic ()

Automating deployments to Storybook with CI actions and rebasing merges ()

Visual testing with regression in components using Storybook ()

Conclusion and congratulations! ()

Ex_Files_Building_UI_Components.zip (86 KB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.