با استفاده از React، این فریمورک فوق العاده محبوب JavaScript، می توان وب سایت ها و اپلیکیشن های موجود را بهبود بخشید. در این دوره با روش های عملی برای ترکیب React با طرح های وب در دنیای واقعی می پردازیم. این دوره همچنین سه پروژه ی کوچک React را با عناوین زیر ارائه می دهد: یک مدیر تولید که state، props و رویدادهای React را نشان می دهد؛ ایجاد یک دایرکتوری کارمند با استفاده از فرم ها و انیمیشن React؛ و یک برد وضعیت که از React برای برقراری تماس API خارجی استفاده می کند. هر یک از این پروژه ها، دلایل جذابیت و سودمندی React را برای طراحان وب نشان می دهد و راه حل هایی را برای چند چالش منحصر به فرد مانند کار بدون ابزار ساخت را فراهم می کند.

مباحث دوره:

  • جعبه ابزار React
  • نصب ابزارهای توسعه دهنده React
  • استقرار props و states
  • مدیریت رویدادها
  • ساختن فرم ها
  • پاسخ به به روز رسانی های فرم
  • متحرک سازی
  • گنجاندن داده live با REST APIs

سرفصل ها:

  • مقدمه
  • آنچه که باید بدانید
  • استفاده از فایل های تمرینی
  • معرفی React
  • React چیست و برای چه کاری مفید است؟
  • جعبه ابزار React: ES6، JSX و غیره
  • React، داده را مدیریت می کند و نمایش می دهد
  • همه چیز، کامپوننت ها و عناصر هستند
  • روند ساخت React
  • React و CSS: یک رابطه ویژه
  • نصب ابزار های توسعه دهنده React
  • پروژه اول: Customizer
  • نصب React در یک سایت
  • شناسایی کامپوننت ها و داده ی
  • تنظیم اولین کامپوننت ساده
  • شروع به استفاده از JSX با Babel Help
  • ایجاد کامپوننت جدید با داده ی آرایه
  • پیاده سازی props
  • پیاده سازی state
  • افزودن انتخابگر رنگ
  • تغییر گزینه ها و مشاهده ی واکنش ها
  • چالش: فعال سازی انتخابگر رنگ
  • راه حل : فعال سازی انتخابگر رنگ
  • پروژه دوم: مرورگر دایرکتوری
  • ساختن یک طرح
  • کامپوننت های اولیه Scaffold
  • کامپوننت های عملکردی
  • ساخت فرم فیلترها
  • فرم ها در React: کنترل شده یا نشده
  • تکمیل فرم فیلترها
  • پاسخ به روز رسانی فرم فیلتر
  • متحرک سازی با React Transition Group
  • چالش: قابلیت استفاده و انیمیشن بهتر
  • راه حل: قابلیت استفاده و انیمیشن بهتر
  • سومین پروژه: به روز رسان وضعیت
  • گنجاندن داده live از طریق REST APIs
  • اولین تماس API در یک متد چرخه عمر
  • افزودن یک بارگذار با استفاده از رندرکردن شرطی
  • Hook up فرم برای ارسال یک به روز رسانی
  • “Lifting state” برای شفافیت وضعیت
  • تکمیل به روز رسان وضعیت
  • نتایج
  • مراحل بعدی: موارد بیشتر درمورد React