آموزش Advanced React For Enterprise: React برای مهندسان ارشد

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

مقدمه ای بر سیستم های طراحی Introduction to design systems

• سیستم های طراحی چیست؟ What are design systems

• اصول طراحی اتمی Atomic Design principles

• نمونه سیستم های طراحی Example design systems

• نمونه سیستم های طراحی Example design systems

• نقش شما به عنوان یک مهندس در یک سیستم طراحی Your role as an engineer in a design system

• نقش شما به عنوان یک مهندس در یک سیستم طراحی Your role as an engineer in a design system

مقدمه ای بر سیستم های طراحی Introduction to design systems

• سیستم های طراحی چیست؟ What are design systems

• اصول طراحی اتمی Atomic Design principles

معماری CSS CSS Architecture

• چیزی که ما خواهیم ساخت What we'll build

• چک لیست معماری Css Css architecture checklist

• چک لیست معماری Css Css architecture checklist

• راه اندازی پوشه و ساختار فایل Setup folder and file structure

• راه اندازی پوشه و ساختار فایل Setup folder and file structure

• تعریف متغیرهای سیستم Define system variables

• رنگ های پایه را تعریف کنید Define foundation colors

• تکلیف - رنگ های پایه را تعریف کنید Assignment - Define foundation colors

• تایپوگرافی پایه را تعریف کنید Define foundation typography

• تکلیف - تایپوگرافی پایه را تعریف کنید Assignment - Define foundation typography

• میکسین ها را تعریف کنید Define mixins

• تکلیف - تعریف میکسین Assignment - Define mixins

• تکلیف - تعریف میکسین Assignment - Define mixins

• بازنشانی جهانی ریشه و css Global root and css reset

• بازنشانی جهانی ریشه و css Global root and css reset

• سبک و زیباتر اضافه کنید Add stylelint and prettier

• قلاب‌های هاسکی و پیش‌متعهد را راه‌اندازی کنید Setup husky and pre-commit hooks

• قلاب‌های هاسکی و پیش‌متعهد را راه‌اندازی کنید Setup husky and pre-commit hooks

• scss را به css کامپایل کنید Compile scss to css

• scss را به css کامپایل کنید Compile scss to css

• کامپایل کامپوننت ها به css Compile components to css

معماری CSS CSS Architecture

• چیزی که ما خواهیم ساخت What we'll build

• تعریف متغیرهای سیستم Define system variables

• رنگ های پایه را تعریف کنید Define foundation colors

• تکلیف - رنگ های پایه را تعریف کنید Assignment - Define foundation colors

• تایپوگرافی پایه را تعریف کنید Define foundation typography

• تکلیف - تایپوگرافی پایه را تعریف کنید Assignment - Define foundation typography

• میکسین ها را تعریف کنید Define mixins

• سبک و زیباتر اضافه کنید Add stylelint and prettier

• کامپایل کامپوننت ها به css Compile components to css

تک مخازن Monorepositories

• مخزن مونو را با نخ و لرنا راه اندازی کنید Setup mono repository with yarn and lerna

تک مخازن Monorepositories

• مخزن مونو را با نخ و لرنا راه اندازی کنید Setup mono repository with yarn and lerna

پیاده سازی React Implementation of React

• بسته react را به مخزن mono اضافه کنید Add react package to mono repository

• برای کامپایل کردن واکنش، rollup را اضافه کنید Add rollup to compile react

• برای کامپایل کردن واکنش، rollup را اضافه کنید Add rollup to compile react

• یک زمین بازی React راه اندازی کنید Setup a react playground

• یک زمین بازی React راه اندازی کنید Setup a react playground

• اسکریپت توسعه دهنده را برای همه بسته ها تنظیم کنید Setup dev script for all packages

• اسکریپت توسعه دهنده را برای همه بسته ها تنظیم کنید Setup dev script for all packages

• اتم ها، مولکول ها و موجودات را شناسایی کنید Identify atoms, molecules and organisms

• اتم ها، مولکول ها و موجودات را شناسایی کنید Identify atoms, molecules and organisms

• تکلیف - اتم ها، مولکول ها و موجودات را شناسایی کنید Assignment - Identify atoms, molecules and organisms

• تکلیف - اتم ها، مولکول ها و موجودات را شناسایی کنید Assignment - Identify atoms, molecules and organisms

• جزء رنگ را توسعه دهید Develop the colour component

• جزء رنگ را توسعه دهید Develop the colour component

• به صورت پویا کلاس های کاربردی تولید کنید Dynamically generate utility classes

• تکلیف - ایجاد اتم تصویر Assignment - create image atom

• فونداسیون را به یک بسته جداگانه استخراج کنید Extract foundation to a separate package

• فونداسیون را به یک بسته جداگانه استخراج کنید Extract foundation to a separate package

• جزء فاصله Spacing component

• جزء فاصله Spacing component

• مولکول انتخابی The select molecule

• مولکول انتخابی The select molecule

• سبک‌های مولکول انتخابی Styles for the select molecule

• موقعیت همپوشانی را محاسبه کنید Calculate the overlay position

• گزینه انتخاب را استایل کنید Style the select option

• حالت گزینه انتخاب شده Selected option state

• حالت گزینه انتخاب شده Selected option state

• کارت انتخاب را متحرک کنید Animate select caret

• کارت انتخاب را متحرک کنید Animate select caret

• رندر props برای گزینه سفارشی Render props for custom option

• رندر props برای گزینه سفارشی Render props for custom option

پیاده سازی React Implementation of React

• بسته react را به مخزن mono اضافه کنید Add react package to mono repository

• به صورت پویا کلاس های کاربردی تولید کنید Dynamically generate utility classes

• تکلیف - ایجاد اتم تصویر Assignment - create image atom

• سبک‌های مولکول انتخابی Styles for the select molecule

• موقعیت همپوشانی را محاسبه کنید Calculate the overlay position

• گزینه انتخاب را استایل کنید Style the select option

قابلیت دسترسی برای جزء انتخابی Accessibility for the select component

• ویژگی های آریا گسترده و بازشو Expanded and popup aria attributes

• ویژگی های آریا گسترده و بازشو Expanded and popup aria attributes

• آیتم های منو را با صفحه کلید کنترل کنید Control menu items with keyboard

• آیتم های منو را با صفحه کلید کنترل کنید Control menu items with keyboard

• ناوبری صفحه کلید قابل دسترسی Accessible keyboard navigation

قابلیت دسترسی برای جزء انتخابی Accessibility for the select component

• ناوبری صفحه کلید قابل دسترسی Accessible keyboard navigation

واحد تست اجزای اتمی Unit testing atomic components

• بابل و شوخی را راه اندازی کنید Setup babel and jest

• تکلیف - موارد آزمایشی را انتخاب کنید Assignment - Select test cases

• تکلیف - راه حل موارد آزمایشی را انتخاب کنید Assignment - Select test cases solution

• تکلیف - راه حل موارد آزمایشی را انتخاب کنید Assignment - Select test cases solution

• تست های پایه Tests for foundations

• تست های پایه Tests for foundations

واحد تست اجزای اتمی Unit testing atomic components

• بابل و شوخی را راه اندازی کنید Setup babel and jest

• تکلیف - موارد آزمایشی را انتخاب کنید Assignment - Select test cases

کتاب داستان با واکنش Storybook with react

• تنظیم کتاب داستان Setup storybook

• تنظیم کتاب داستان Setup storybook

• انواع اجزا را انتخاب کنید Select component variants

• دستگیره های افزودنی Addon knobs

• قابلیت دسترسی افزونه Addon accessibility

• قابلیت دسترسی افزونه Addon accessibility

• تست های رگرسیون بصری با کروماتیک Visual regression tests with chromatic

کتاب داستان با واکنش Storybook with react

• انواع اجزا را انتخاب کنید Select component variants

• دستگیره های افزودنی Addon knobs

• تست های رگرسیون بصری با کروماتیک Visual regression tests with chromatic

انتشار در npm Publish to npm

• با lerna در npm منتشر کنید Publish to npm with lerna

• کنترل فایل های منتشر شده Control published files

• تعهدات متعارف Conventional commits

• تعهدات متعارف Conventional commits

• لینت متعهد می شود Lint commits

• لینت متعهد می شود Lint commits

• ایجاد تغییرات با lerna Generate changelogs with lerna

انتشار در npm Publish to npm

• با lerna در npm منتشر کنید Publish to npm with lerna

• کنترل فایل های منتشر شده Control published files

• ایجاد تغییرات با lerna Generate changelogs with lerna

اقدامات Github/CI/CD Github actions / CI / CD

• تنظیم گردش کار اقدامات github Setup github actions workflow

• تنظیم گردش کار اقدامات github Setup github actions workflow

• رفع مشکلات ساخت در CI Fix build issues on CI

• خودکار رنگی با اقدامات github Automate chromatic with github actions

• استقرار کتاب داستان برای Netlify Deploy storybook to netlify

• استقرار کتاب داستان برای Netlify Deploy storybook to netlify

اقدامات Github/CI/CD Github actions / CI / CD

• رفع مشکلات ساخت در CI Fix build issues on CI

• خودکار رنگی با اقدامات github Automate chromatic with github actions