دوره آموزشی ری‌اکت تعاملی برای وب

دوره آموزشی ری‌اکت تعاملی برای وب

3 ساعت 13 دقیقهمتوسط2025-06-12

مدرسین

Joe Chellman

Joe Chellman

Web Designer, Author, Trainer

جزئیات دوره

ری‌اکت (React) یکی از پایه‌های اصلی وب تو چند سال اخیر بوده و هنوز هم یکی از محبوب‌ترین فریم‌ورک‌های جاوااسکریپت به حساب میاد. تو این دوره یاد می‌گیری چطوری به ساخت برنامه‌ها با استفاده از کامپوننت‌ها فکر کنی؛ همون قطعات کوچک و قابل استفاده‌ای که یک پروژه React رو می‌سازن.

توی چند پروژه کوچیک، «جو چلمن» بهت نشون می‌ده چطوری داده‌های تعاملی تو هر کامپوننت رو مدیریت کنی و با کد بنویسی که هر قسمت چطوری باید نسبت به تغییرات بخش‌های دیگه واکنش نشون بده. یاد گرفتن React کلی در رو به فرصت‌های جدید باز می‌کنه، چه خودت بخوای پروژه بزنی و چه بخوای تو تیمی که React استفاده می‌کنه سریع‌تر کار کنی و پیش بری.

🎯 اهداف یادگیری:
ساخت قطعات تعاملی پیچیده در پروژه‌های بزرگ‌تر با React.
آماده شدن برای پیوستن به تیم‌های توسعه‌دهنده پروژه‌های React و سرعت گرفتن در یادگیری.
تفکر و طراحی پروژه‌های تعاملی به صورت مبتنی بر کامپوننت.

مهارت ها

React.jsMetaFront-End Web DevelopmentWeb DevelopmentOne-Off

سرفصل ها

مقدمه

  • React قدرتمند و محبوب است
  • نحوه استفاده از فایل‌های تمرین در GitHub Codespaces

ری‌اکت چیست؟

  • معرفی React - چیست و چه کاربردی دارد؟
  • جعبه ابزار React - جاوا اسکریپت مدرن و موارد دیگر
  • اصطلاحات مهم React
  • قطعات - داده‌ها، اجزا و عناصر
  • فرآیند ساخت ما در Codespaces
  • چگونه می‌توان از CSS در React استفاده کرد
  • نصب و استفاده از ابزارهای توسعه‌دهنده React

پروژه اول - سفارشی‌سازی محصول

  • نصب React با استفاده از تگ‌های اسکریپت
  • اضافه کردن JSX برای کد ساده‌تر
  • شناسایی اجزا و داده‌ها
  • ایجاد یک کامپوننت جدید و آرایه‌ای از داده‌ها
  • معرفی props برای ارسال داده‌ها
  • معرفی قلاب useState برای مدیریت داده‌های محلی
  • اضافه کردن انتخابگر رنگ
  • پیاده‌سازی یک کنترل‌کننده رویداد برای به‌روزرسانی وضعیت
  • راه حل - انتخابگر رنگ را فعال کنید

پروژه دوم - مرورگر دایرکتوری

  • تصمیم‌گیری بر اساس مدل اولیه
  • آشنایی با کد اولیه و اجزای scaffolding
  • افزودن کامپوننت‌ها برای نمایش منبع داده‌های افراد
  • ایجاد فرم فیلترها
  • تصمیم‌گیری در مورد کنترل‌شده کردن فرم‌ها
  • ایجاد حالت به‌روزرسانی فرم فیلتر
  • تبدیل حالت فرم به یک شیء واحد
  • به‌روزرسانی نتایج دایرکتوری بر اساس فیلترهای فعال
  • استفاده از انیمیشن برای افزایش بازخورد بصری
  • راه حل - فرم را بهتر کنید و انیمیشن بیشتری ایجاد کنید

پروژه سوم - به‌روزرسانی‌های وضعیت انتشار

  • مصرف داده‌های زنده با استفاده از REST API
  • بررسی کد شروع
  • انجام اولین فراخوانی API در یک هوک useEffect
  • ارائه بازخورد از طریق رندر شرطی
  • اتصال فرم وضعیت برای ارسال به‌روزرسانی
  • ارسال پیام جدید به API
  • بالا بردن وضعیت برای قابل استفاده کردن داده‌ها در سراسر برنامه
  • فهرست پیام‌ها را از حالت محلی پس از ارسال به‌روزرسانی کنید
  • شکستن یک فایل بزرگ به اجزای جداگانه
  • راه حل - تاریخ و زمان را قابل ویرایش کنید

نتیجه‌گیری

  • مراحل بعدی
۸۰,۰۰۰ تومان