آموزش ایجاد مactلفه های واکنش پذیر قابل استفاده مجدد

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

تصمیمات اصلی Core Decisions

• معرفی Intro

• دستور جلسه Agenda

• چرا اجزای قابل استفاده مجدد؟ Why Reusable Components?

• چرا اجزای وب نیست؟ Why Not Web Components?

• چرا واکنش نشان می دهیم؟ Why React?

• بررسی اجمالی تصمیم Decision Overview

• تصمیم 1: مخاطبان Decision 1: Audience

• تصمیم 2: سفت و سخت در مقابل انعطاف پذیر Decision 2: Rigid vs. Flexible

• هشدار: فاجعه عوام Warning: Tragedy of the Commons

• تصمیم 3: شخص ثالث پیوند ، بسته بندی یا چنگال؟ Decision 3: Link, Wrap, or Fork Third Parties?

• تصمیم 4: چه زمانی باید م Compلفه هایی را به کتابخانه خود اضافه کنم؟ Decision 4: When Should I Add Components to My Library?

• چگونه با نسخه های نمایشی و مسائل کنار می آیم How I'm Handling Demos and Issues

• خلاصه Summary

محیط توسعه Development Environment

• معرفی Intro

• کتابخانه در مقابل مستقل Library vs. Standalone

• گزینه محیطی 1: دیگ بخار Environment Option 1: Boilerplate

• گزینه محیط 2: ابزار مستند سازی Environment Option 2: Documentation Tool

• گزینه محیط 3: سفارشی Environment Option 3: Custom

• Node و Git را نصب کنید Install Node and Git

• نسخه ی نمایشی: مخزن GitHub ایجاد کنید Demo: Create GitHub Repository

• نسخه ی نمایشی: با ایجاد React App پروژه ایجاد کنید Demo: Create Project with Create React App

• نسخه ی نمایشی: ایجاد برنامه React را خاموش کنید Demo: Eject Create React App

• خلاصه Summary

مستندات Documentation

• معرفی Intro

• اهداف اسناد Documentation Goals

• چرا اسناد ایجاد کنید؟ Why Generate Documentation?

• ابزار اسناد Documentation Tools

• رویکرد ایجاد مستندات سفارشی Custom Documentation Generation Approach

• نسخه ی نمایشی: تنظیم چارچوب مستندات Demo: Documentation Framework Setup

• نسخه ی نمایشی: متادیتای کامپوننت را ایجاد کنید Demo: Generate Component Metadata

• نسخه ی نمایشی: اسکریپت های npm Demo: npm Scripts

• نسخه ی نمایشی: مولفه HelloWorld را ایجاد کنید Demo: Create HelloWorld Component

• نسخه ی نمایشی: مولفه سندنگار را ایجاد کنید Demo: Create Docs Component

• نسخه ی نمایشی: مولفه ناوبری ایجاد کنید Demo: Create Navigation Component

• نسخه ی نمایشی: ComponentPage Component ایجاد کنید Demo: Create ComponentPage Component

• نسخه ی نمایشی: مولفه مثال ایجاد کنید Demo: Create Example Component

• نسخه ی نمایشی: کامپوننت Props را ایجاد کنید Demo: Create Props Component

• نسخه ی نمایشی: HelloWorld را با نظرات بهبود بخشید Demo: Enhance HelloWorld with Comments

• نسخه ی نمایشی: Webpack Alias Demo: Webpack Alias

• برجسته سازی نحو Syntax Highlighting

• نسخه ی نمایشی: برجسته سازی نحو Demo: Syntax Highlighting

• پیشرفت های بالقوه Potential Enhancements

• خلاصه Summary

طراحی مجدد قطعات Reusable Component Design

• معرفی Intro

• نکته 1: از عناصر ضعیف خودداری کنید Tip 1: Avoid Weak Elements

• نکته 2: انواع PropPyle را اعلام کنید Tip 2: Declare PropTypes

• نکته 3: شناسه های HTML را کد سخت نکنید Tip 3: Don’t Hard Code HTML IDs

• نکته 4: پیش فرضهای منطقی را اعلام کنید Tip 4: Declare Logical Defaults

• نکته 5: قابلیت دسترسی را در نظر بگیرید Tip 5: Consider Accessibility

• نکته 6: اشیا Conf پیکربندی را در نظر بگیرید Tip 6: Consider Configuration Objects

• نکته 7: رندر سمت سرور را در نظر بگیرید Tip 7: Consider Server-side Rendering

• نکته 8: رعایت اصل مسئولیت منفرد Tip 8: Honor the Single Responsibility Principle

• طراحی اتمی چیست؟ What Is Atomic Design?

• چرا طراحی اتمی؟ Why Atomic Design?

• خلاصه Summary

اتم ها Atoms

• معرفی Intro

• اتم چیست؟ What's an Atom?

• تصمیم 1: HTML اولیه را بسته بندی کنید؟ Decision 1: Wrap HTML Primitives?

• تصمیم 2: ساختار پوشه Decision 2: Folder Structure

• نکته 1: Native API را احترام بگذارید Tip 1: Honor the Native API

• نکته 2: از طریق Spread تجهیزات Prop را عبور دهید Tip 2: Pass Props via Spread

• نکته 3: از Spread with Destructionuring استفاده کنید Tip 3: Use Spread with Destructuring

• نکته 4: م Formلفه های قالب بندی را ایجاد کنید Tip 4: Create Formatting Components

• نسخه ی نمایشی: ProgressBar Atom Demo: ProgressBar Atom

• نسخه ی نمایشی: Label Atom Demo: Label Atom

• نسخه ی نمایشی: نماد اتم Demo: Icon Atom

• خلاصه Summary

مولکول ها Molecules

• معرفی Intro

• مولکول چیست؟ What's a Molecule?

• نسخه ی نمایشی: TextInput Molecule Demo: TextInput Molecule

• بررسی TextInput TextInput Review

• نسخه ی نمایشی: PasswordInput Demo: PasswordInput

• مرور رمز ورود PasswordInput Review

• خلاصه Summary

موجودات زنده Organisms

• معرفی Intro

• ارگانیسم چیست؟ ' What's an Organism?'

• نکته 1: نظرات قوی یک ویژگی است Tip 1: Strong Opinions Are a Feature

• نکته 2: ارگانیسم ها را لال نگه دارید Tip 2: Keep Organisms Dumb

• نسخه ی نمایشی: ثبت نام فرم ارگانیسم Demo: RegistrationForm Organism

• خلاصه Summary

یک ظاهر طراحی شده و قالب بندی Styling and Theming

• معرفی Intro

• CSS تدوین شده Compiled CSS

• طرح های نامگذاری Naming Schemes

• نسخه ی نمایشی: CSS با BEM Demo: CSS with BEM

• واکنش به سبک های درون خطی React Inline Styles

• ماژول های CSS CSS Modules

• نسخه ی نمایشی: ماژول های CSS Demo: CSS Modules

• CSS در JS CSS in JS

• نسخه ی نمایشی: CSS در JS از طریق Styled-components Demo: CSS in JS via Styled-components

• تصمیم: رویکرد یک ظاهر طراحی شده Decision: Styling Approach

• تصمیم گیری: سبک ناپذیر ، اجباری یا موضوعی؟ Decision: Unstyled, Enforced, or Themeable?

• رویکردهای گرم Theming Approaches

• خلاصه Summary

آزمایش کردن Testing

• معرفی Intro

• تصمیم 1: چارچوب Decision 1: Framework

• تصمیم 2: انواع آزمایش Decision 2: Testing Types

• تصمیم 3: کتابخانه ادعا Decision 3: Assertion Library

• تصمیم 4: کتابخانه های کمک کننده Decision 4: Helper Libraries

• تصمیم 5: تست ها را کجا اجرا کنید Decision 5: Where to Run Tests

• تصمیم 6: فایلهای آزمایشی را کجا قرار دهید Decision 6: Where to Place Test Files

• تصمیم 7: چه زمانی تست ها را اجرا کنید Decision 7: When to Run Tests

• نسخه ی نمایشی: تست واحد Demo: Unit Test

• نسخه ی نمایشی: تست عکس فوری Demo: Snapshot Test

• نسخه ی نمایشی: آزمون تعامل Demo: Interaction Test

• ادغام مداوم Continuous Integration

• نسخه ی نمایشی: ادغام مداوم Demo: Continuous Integration

• خلاصه Summary

تصمیمات توزیع Distribution Decisions

• معرفی Intro

• تصمیم 1: منبع باز ، بسته یا داخلی؟ Decision 1: Open, Closed, or Inner Source?

• تصمیم 2: میزبانی بسته Decision 2: Package Hosting

• تصمیم 3: رویکردهای واردات Decision 3: Import Approaches

• تصمیم 4: اعلام فایلهای بسته Decision 4: Declaring Package Files

• تصمیم 5: فرمت خروجی Decision 5: Output Format

• ساخت ماژول ES ES Module Build

• UMD ساخت UMD Build

• تصمیم 6: میزبانی اسناد Decision 6: Documentation Hosting

• خلاصه Summary

انتشارات Publishing

• معرفی Intro

• نسخه ی نمایشی: اسناد را از طریق صفحات GitHub منتشر کنید Demo: Publish Docs via GitHub Pages

• نسخه ی نمایشی: Readme را تنظیم کنید Demo: Set up Readme

• نسخه ی نمایشی: پیکربندی npm اولیه Demo: Initial npm Configuration

• نسخه ی نمایشی: ساخت م Libraryلفه تولید کتابخانه Demo: Production Component Library Build

• در حال آماده سازی pack.json برای انتشار Preparing package.json for Publish

• نسخه ی نمایشی: پشتیبانی واردات نامگذاری شده را اضافه کنید Demo: Add Named Import Support

• نسخه ی نمایشی: pack.json را برای انتشار آماده کنید Demo: Prepare package.json for Publish

• نسخه ی نمایشی: بسته npm را منتشر کنید Demo: Publish npm Package

• نسخه ی نمایشی: بسته npm را مصرف کنید Demo: Consume npm Package

• نسخه ی نمایشی: رویکردهای واردات را مقایسه کنید Demo: Compare Import Approaches

• تصمیم: رویکرد واردات مستقیم را انتخاب کنید Decision: Pick a Direct Import Approach

• افزودن پشتیبانی کوتاه واردات مستقیم Adding Short Direct Import Support

• نسخه ی نمایشی: پشتیبانی کوتاه مستقیم از واردات را اضافه کنید Demo: Add Short Direct Import Support

• نسخه ی نمایشی: منتشر می شود Demo: Releases

• نسخه سازی معنایی Semantic Versioning

• پذیرش مشارکت ها Accepting Contributions

• الهام Inspiration

• چالش Challenge