دوره آموزشی تمرین 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
سرفصل ها
۰. مقدمه
- 01 - چرا باید ساخت و تغییر کامپوننتهای پایه در React را تمرین کنیم؟
- 02 - آنچه باید بدانید
- 03 - تور CoderPad
۱. درک React و JSX
- 04 - کار با React
- 05 - رندر کردن عناصر رابط کاربری با JSX
- 06 - راه حل - ایجاد یک HelloComponent
۲. استفاده از کامپوننتها و props
- 07 - تعریف اجزای عملکردی
- 08 - ارسال داده از طریق props
- 09 - راه حل - ساخت کارت کاربر
۳. مدیریت وضعیت با هوکها (useState)
- 10 - مدیریت وضعیت یک کامپوننت با استفاده از useState
- 11 - راه حل - ایجاد یک شمارنده
۴. مدیریت فرمها و ورودی کاربر
- 12 - اتصال ورودیهای فرم به وضعیت
- 13 - ارسال یک فرم ساده
- 14 - راه حل - ایجاد فرم تماس
۵. افزودن مدیریت رویدادهای پایه
- 15 - استفاده از event handlerها در کامپوننتهای تابعی
- 16 - راه حل - ایجاد یک متن ضامن دار
۶. فهرستهای رندرینگ
- 17 - استفاده از map برای رندر کردن آرایههای داده
- 18 - راه حل - نمایش لیستی از موارد
۷. کار با کامپوننتهای استایلدار
- 19 - کار با کامپوننتهای استایلدار
- 20 - تبدیل یک عنصر JSX ساده به یک کامپوننت استایلدار
- 21 - راه حل - تبدیل یک دکمه ساده به یک دکمه استایلدار
نتیجهگیری
- 22 - یادگیری بیشتر در مورد React
دوره های مرتبط
- دوره آموزشی ساخت کتابخانههای مقیاسپذیر کامپوننتهای رابط کاربری React با استفاده از Storybook
- دوره آموزشی چالشهای کدنویسی پیشرفته React
- دوره آموزشی ریاکت تعاملی برای وب
- دوره آموزشی احراز هویت در React
- دوره آموزشی رندر کردن دادهها در React
- دوره آموزشی الگوهای طراحی React
- دوره آموزشی معماری میکرو فرانتاند با React
- دوره آموزشی React در عمل: از تنظیمات تا استقرار