Newline – Storybook for React Apps 2022-3

در تاریخ: 1403/03/13 7:37:46

توضیحات

Storybook for React Apps، دوره آموزش Storybook برای React توسط آکادمی Newline منتشر شده است. Storybook یک ابزار منبع باز است که به شما کمک می کند اجزای رابط کاربری را به صورت مجزا توسعه دهید. در پایگاه کد شما اجرا می شود، اما جدا از برنامه شما. این مانند یک sandbox است که به شما امکان می دهد با API های ناقص، داده ها و سایر وابستگی های خارجی حواس پرت نشوید. با فریم ورک هایی مانند React، Vue، Svelte، Angular و بسیاری دیگر ادغام می شود. با Storybook می‌توانید توسعه یک سیستم طراحی را آسان کنید و زبان مشترکی را با طراحان به اشتراک بگذارید. QA می تواند یک نمای کلی داشته باشد و عملکردها را به صورت مجزا آزمایش کند. سهامداران می توانند از آن برای اهداف نمایشی استفاده کنند. به طور کلی، Storybook به ارتباط همه این افراد کمک می کند و همکاری را تا حد زیادی بهبود می بخشد. در این دوره، ما پتانسیل کامل Storybook را برای برنامه‌های React معرفی می‌کنیم. ما از اصول اولیه Storybook شروع می‌کنیم و بعداً به یک برنامه کاربردی دنیای واقعی تغییر می‌دهیم. یاد می‌گیریم چگونه ویژگی‌ها را مستقیماً در Storybook توسعه دهیم، در زمان توسعه زیادی صرفه‌جویی می‌کنیم و در هم زمان، مستندات زنده‌ای از اجزا و ویژگی‌ها ایجاد می‌کنیم. در پایان این دوره، شما می توانید از Storybook برای توسعه و مستندسازی اجزا، ویژگی ها و صفحات در کار خود استفاده کنید. شما همچنین خواهید آموخت که چگونه Storybook به شما کمک می کند تا با همکاران خود چه فنی و چه غیر فنی (مانند طراحان و سهامداران) همکاری کنید!

آنچه خواهید آموخت

مفاهیم اصلی Storybook
گردش کار توسعه با Storybook
با افزودن ویژگی‌ها و صفحات، پتانسیل کامل Storybook را آزاد کنید
تست استراتژی با Storybook
چگونه UI سریعتر بسازیم
مدل های ذهنی برای توسعه کامپوننت
ابزارهایی برای بهبود همکاری طراح و توسعه دهنده
بهترین شیوه ها

مشخصات دوره Storybook for React Apps

ناشر : Newline
مدرس : Yann Braga
زبان: انگلیسی
سطح آموزش: تمام سطوح
تعداد دروس: 30
مدت زمان آموزش: 3 ساعت و 16 دقیقه

سر فصل های دوره Storybook for React Apps

Course Introduction
What is Storybook?
The key concepts around Storybook
Installing and exploring Storybook
What makes up a Story?
Decorators
Essential Addons
Theming the Storybook app
Accessing the project
Breaking down our use-case
Writing the atomic components
Adding decorators – theme support
Theme switching with globals and parameters in decorators
Connecting Figma with Storybook
Composing components
Finalizing the feature and integrating it into the app
Data fetching – Container Pattern
Data fetching – Conditional Logic
Data fetching – Mocking Requests
Adding PageTemplate and Redux support to Storybook
Adding the HomePage to Storybook
Adding the Restaurant detail page – Deeplinking and React portals
Adding the Restaurant detail page – mocking different scenarios with MSW
Storybook ESLint plugin
Interaction testing
Storybook test runner
Accessibility testing
Deploying your Storybook with Chromatic
Visual regression in Chromatic
Conclusion and extra resources