دوره آموزشی تمرین React برای مبتدی‌ها: ساخت و تغییر کامپوننت‌های پایه

دوره آموزشی تمرین React برای مبتدی‌ها: ساخت و تغییر کامپوننت‌های پایه

35 دقیقهمبتدی2025-05-01

مدرسین

Maaike van Putten

Maaike van Putten

Trainer and Developer for Java, Python, Spring Boot, and More

جزئیات دوره

تو این دوره به صورت عملی با React و JSX کار می‌کنی. همراه با مدرس دوره، مایک فان پوتن، یاد می‌گیری چطور از صفر یک رابط کاربری داینامیک بسازی و از ویژگی‌های مهم React مثل کامپوننت‌های تابعی، props و مدیریت وضعیت با useState استفاده کنی.
همچنین نحوه مدیریت فرم‌ها و رویدادها رو یاد می‌گیری، طوری که بتونی فرم‌ها رو به راحتی کنترل کنی و اطلاعات کاربر رو بگیری. می‌بینی چطور لیستی از داده‌ها رو به صورت داینامیک روی صفحه نمایش بدی و در نهایت، با استفاده از styled components ظاهر برنامه‌ات رو حرفه‌ای و زیبا کنی.
هر بخش دوره با یک چالش کوتاه تموم می‌شه تا بتونی مفاهیمی که یاد گرفتی رو تمرین کنی و دست به کار بشی.

اهداف یادگیری
ساخت و سازماندهی رابط‌های کاربری با JSX، کامپوننت‌های تابعی، props و مدیریت رویدادها
ایجاد کامپوننت‌های داینامیک با استفاده از useState برای مدیریت وضعیت محلی
نمایش لیست‌های داده، مدیریت فرم‌ها و استفاده از styled components برای طراحی ظاهر زیبا

مهارت ها

React.jsMetaFront-End Web DevelopmentWeb DevelopmentOne-Off

سرفصل ها

مقدمه

  • چرا باید ساخت و تغییر کامپوننت‌های پایه در React را تمرین کنیم؟
  • آنچه باید بدانید
  • تور CoderPad

درک React و JSX

  • کار با React
  • رندر کردن عناصر رابط کاربری با JSX
  • راه حل - ایجاد یک HelloComponent

استفاده از کامپوننت‌ها و props

  • تعریف اجزای عملکردی
  • ارسال داده از طریق props
  • راه حل - ساخت کارت کاربر

مدیریت وضعیت با هوک‌ها (useState)

  • مدیریت وضعیت یک کامپوننت با استفاده از useState
  • راه حل - ایجاد یک شمارنده

مدیریت فرم‌ها و ورودی کاربر

  • اتصال ورودی‌های فرم به وضعیت
  • ارسال یک فرم ساده
  • راه حل - ایجاد فرم تماس

افزودن مدیریت رویدادهای پایه

  • استفاده از event handlerها در کامپوننت‌های تابعی
  • راه حل - ایجاد یک متن ضامن دار

فهرست‌های رندرینگ

  • استفاده از map برای رندر کردن آرایه‌های داده
  • راه حل - نمایش لیستی از موارد

کار با کامپوننت‌های استایل‌دار

  • کار با کامپوننت‌های استایل‌دار
  • تبدیل یک عنصر JSX ساده به یک کامپوننت استایل‌دار
  • راه حل - تبدیل یک دکمه ساده به یک دکمه استایل‌دار

نتیجه‌گیری

  • یادگیری بیشتر در مورد React
۴۰,۰۰۰ تومان