دوره آموزشی تمرین 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
دوره های مرتبط
- دوره آموزشی یادگیری Next.js
- دوره آموزشی تستگیری در React: فراتر از تستهای واحد (Unit Test)
- دوره آموزشی ساخت رابط های کاربری مدرن با React Router v6
- دوره آموزشی درس ماندولین: بخش دوم ایده و شروع تک نفره
- دوره آموزشی هوش مصنوعی عملی: ساخت و انتشار یک وبسایت با v0 و Vercel
- دوره آموزشی بازاریابی در لینکدین
- دوره آموزشی انتشار در لینکدین برای دانشجویان و متخصصان جوان
- دوره آموزشی تبلیغات در لینکدین: نکات و ترفندهای هوشمندانه برای دستیابی به نتایج بهتر
مسیرهای مرتبط
- مسیر آموزشی مهارت های خود را در وردپرس ارتقا دهید
- مسیر آموزشی از تحلیلگر داده به یک دانشمند داده تبدیل شوید
- مسیر آموزشی طراحی و توسعه برای دسترسپذیری دیجیتال
- مسیر آموزشی کاوش بهترین روشهای دسترسی (a11y)
- مسیر آموزشی برترین مهارت های حال حاضر مهندسی
- مسیر آموزشی آماده شدن برای گواهینامه Google Associate Android Developer
- مسیر آموزشی توسعه دادن مهارت تجزیه و تحلیل داده های خود
- مسیر آموزشی مدرک حرفهای بازاریابی دیجیتال