دوره آموزشی تمرین React برای مبتدیها: ساخت و تغییر کامپوننتهای پایه
35 دقیقهمبتدی2025-05-01
مدرسین
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 برای طراحی ظاهر زیبا
همچنین نحوه مدیریت فرمها و رویدادها رو یاد میگیری، طوری که بتونی فرمها رو به راحتی کنترل کنی و اطلاعات کاربر رو بگیری. میبینی چطور لیستی از دادهها رو به صورت داینامیک روی صفحه نمایش بدی و در نهایت، با استفاده از 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