دوره آموزشی ریاکت تعاملی برای وب
3 ساعت 13 دقیقهمتوسط2025-06-12
مدرسین

Joe Chellman
Web Designer, Author, Trainer
جزئیات دوره
ریاکت (React) یکی از پایههای اصلی وب تو چند سال اخیر بوده و هنوز هم یکی از محبوبترین فریمورکهای جاوااسکریپت به حساب میاد. تو این دوره یاد میگیری چطوری به ساخت برنامهها با استفاده از کامپوننتها فکر کنی؛ همون قطعات کوچک و قابل استفادهای که یک پروژه React رو میسازن.
توی چند پروژه کوچیک، «جو چلمن» بهت نشون میده چطوری دادههای تعاملی تو هر کامپوننت رو مدیریت کنی و با کد بنویسی که هر قسمت چطوری باید نسبت به تغییرات بخشهای دیگه واکنش نشون بده. یاد گرفتن React کلی در رو به فرصتهای جدید باز میکنه، چه خودت بخوای پروژه بزنی و چه بخوای تو تیمی که React استفاده میکنه سریعتر کار کنی و پیش بری.
🎯 اهداف یادگیری:
ساخت قطعات تعاملی پیچیده در پروژههای بزرگتر با 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
- بالا بردن وضعیت برای قابل استفاده کردن دادهها در سراسر برنامه
- فهرست پیامها را از حالت محلی پس از ارسال بهروزرسانی کنید
- شکستن یک فایل بزرگ به اجزای جداگانه
- راه حل - تاریخ و زمان را قابل ویرایش کنید
نتیجهگیری
- مراحل بعدی