دوره آموزشی ریاکت تعاملی برای وب
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
سرفصل ها
۰. مقدمه
- 01 - React قدرتمند و محبوب است
- 02 - نحوه استفاده از فایلهای تمرین در GitHub Codespaces
۱. ریاکت چیست؟
- 03 - معرفی React - چیست و چه کاربردی دارد؟
- 04 - جعبه ابزار React - جاوا اسکریپت مدرن و موارد دیگر
- 05 - اصطلاحات مهم React
- 06 - قطعات - دادهها، اجزا و عناصر
- 07 - فرآیند ساخت ما در Codespaces
- 08 - چگونه میتوان از CSS در React استفاده کرد
- 09 - نصب و استفاده از ابزارهای توسعهدهنده React
۲. پروژه اول - سفارشیسازی محصول
- 10 - نصب React با استفاده از تگهای اسکریپت
- 11 - اضافه کردن JSX برای کد سادهتر
- 12- شناسایی اجزا و دادهها
- 13 - ایجاد یک کامپوننت جدید و آرایهای از دادهها
- 14 - معرفی props برای ارسال دادهها
- 15 - معرفی قلاب useState برای مدیریت دادههای محلی
- 16 - اضافه کردن انتخابگر رنگ
- 17 - پیادهسازی یک کنترلکننده رویداد برای بهروزرسانی وضعیت
- 18 - راه حل - انتخابگر رنگ را فعال کنید
۳. پروژه دوم - مرورگر دایرکتوری
- 19 - تصمیمگیری بر اساس مدل اولیه
- 20- آشنایی با کد اولیه و اجزای scaffolding
- 21 - افزودن کامپوننتها برای نمایش منبع دادههای افراد
- 22 - ایجاد فرم فیلترها
- 23 - تصمیمگیری در مورد کنترلشده کردن فرمها
- 24 - ایجاد حالت بهروزرسانی فرم فیلتر
- 25 - تبدیل حالت فرم به یک شیء واحد
- 26 - بهروزرسانی نتایج دایرکتوری بر اساس فیلترهای فعال
- 27- استفاده از انیمیشن برای افزایش بازخورد بصری
- 28 - راه حل - فرم را بهتر کنید و انیمیشن بیشتری ایجاد کنید
۴. پروژه سوم - بهروزرسانیهای وضعیت انتشار
- 29 - مصرف دادههای زنده با استفاده از REST API
- 30 - بررسی کد شروع
- 31 - انجام اولین فراخوانی API در یک هوک useEffect
- 32 - ارائه بازخورد از طریق رندر شرطی
- 33 - اتصال فرم وضعیت برای ارسال بهروزرسانی
- 34 - ارسال پیام جدید به API
- 35 - بالا بردن وضعیت برای قابل استفاده کردن دادهها در سراسر برنامه
- 36 - فهرست پیامها را از حالت محلی پس از ارسال بهروزرسانی کنید
- 37 - شکستن یک فایل بزرگ به اجزای جداگانه
- 38 - راه حل - تاریخ و زمان را قابل ویرایش کنید
نتیجهگیری
- 39 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی ساخت کتابخانههای مقیاسپذیر کامپوننتهای رابط کاربری React با استفاده از Storybook
- دوره آموزشی چالشهای کدنویسی پیشرفته React
- دوره آموزشی احراز هویت در React
- دوره آموزشی رندر کردن دادهها در React
- دوره آموزشی تمرین React برای مبتدیها: ساخت و تغییر کامپوننتهای پایه
- دوره آموزشی الگوهای طراحی React
- دوره آموزشی معماری میکرو فرانتاند با React
- دوره آموزشی React در عمل: از تنظیمات تا استقرار