دوره کامل React JS - ساخت 15 پروژه وب با ریاکت
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت 15 پروژه واقعی با ریاکت 19 و Tailwind CSS 4 و CSS خالص، از اپلیکیشنهای مبتدی پسند تا وب اپلیکیشنهای پیشرفته
- تسلط به اصول ریاکت، هوکها، مدیریت state و مدیریت رویدادها از طریق تمرینهای کدنویسی عملی و پروژههای واقعی
- ایجاد رابطهای کاربری واکنشگرا و مدرن با استفاده از هر دو روش CSS خالص و Tailwind CSS 4، با مثالهای واقعی مانند هدرهای وبسایت، اسلایدرها و سبدهای خرید
- توسعه اپلیکیشنهای کامل با قابلیتهایی مانند چتبات هوش مصنوعی، اپلیکیشن هواشناسی، وبلاگ خبری و فرمهای احرازهویت با کارکرد واقعی و تعاملی
- یادگیری و اعمال شیوهها و تکنیکهای مدرن توسعه ریاکت که در مشاغل واقعی و اپلیکیشنهای تولید به کار میروند.
پیشنیازهای دوره
- دانش اولیه HTML و CSS برای دنبال کردن مباحث استایلدهی پروژهها لازم است.
- درک اساسی از جاوااسکریپت (متغیرها، توابع، آرایهها و غیره) برای ساخت ویژگیهای تعاملی ضروری است.
- تا حدی تجربه اولیه با ریاکت (کامپوننتها، props و JSX) مفید خواهد بود، اما الزاماً ضروری نیست.
- ویرایشگر کد مانند ویژوال استودیو کد و مرورگر وب مدرن (برای مثال کروم) باید نصب و آماده استفاده باشد.
- باید با استفاده از ترمینال و خط فرمان برای نصب پکیجها و اجرای سرورهای توسعه آشنا باشید.
توضیحات دوره
آیا از دورههای طولانی و خستهکننده نظری که هیچگاه به شما نشان نمیدهند چگونه اپلیکیشنهای واقعی بسازید خسته شدهاید؟
به دوره دوره کامل React JS - ساخت 15 پروژه وب با ریاکت 19 و Tailwind خوش آمدید، دورهای کاملاً عملی و کاربردی که هدف آن یادگیری ریاکت به شیوهای صحیح با ساخت وب اپلیکیشنهای واقعی و کارکردی از ابتدا است.
این دوره فقط یکی دیگر از دورههای ریاکت با ارائه اسلایدها و مفاهیم انتزاعی نیست، بلکه یک تجربه یادگیری مبتنی بر پروژه است که در آن با همراهی ما گامبهگام کدنویسی میکنید و مهارتهای واقعی را به دست میآورید که کارفرمایان واقعاً به دنبال آن هستند.
درباره این دوره چیست؟
در این دوره، شما 15 پروژه مدرن و واقعی را با استفاده از آخرین نسخه ریاکت (ریاکت 19) و نسخه جدید Tailwind CSS 4.0، به علاوه CSS خالص در بسیاری از بخشها برای ارائه اصول کامل استایلدهی کامل، ایجاد خواهید کرد.
ما از مبانی مانند ایجاد سربرها و اسلایدرها شروع میکنیم و تا پروژههای پیشرفته مانند ساخت فرمهای احرازهویت، ایجاد سبد خرید، اپلیکیشن هواشناسی با یکپارچهسازی API لایو، یک چتبات هوش مصنوعی کاملاً تابعی، اپلیکیشن وبلاگ خبری با رندرینگ پویا، اپلیکیشن تقویم و خیلی موارد دیگر پیش خواهیم رفت.
هر پروژه هدف واضحی دارد و یوزکیس واقعی را به همراه میآورد که نه تنها مهارتهای فنی بلکه اعتمادبهنفس لازم برای ساخت اپلیکیشنهای خود یا کار روی پروژههای ریاکت سطح حرفهای را فراهم میکند.
آنچه خواهید ساخت:
نگاه کوتاهی به برخی از پروژههای هیجانانگیزی که در این دوره خواهید ساخت:
- هدرها و طرحبندیهای وبسایت تمیز و واکنشگرا
- اسلایدرهای تصاویر و محتوای تعاملی
- اپلیکیشن هواشناسی لایو با استفاده از APIs واقعی
- فرمهای احرازهویت با اعتبارسنجی کامل ورودیها
- سبد خرید با قابلیت افزودن و حذف و مدیریت state
- اپلیکیشن تقویم شخصی با مدیریت تاریخ پویا
- چتبات مجهز به هوش مصنوعی با ابزارها و APIs مدرن
- اپلیکیشن وبلاگ خبری با رندرینگ پویا
- و بسیاری از مینی اپلیکیشنها و اپلیکیشنهای کامل کاربردی دیگر
هر پروژه طراحی شده تا تکنیکهای جدید را به شما بیاموزد، بهترین شیوهها را تقویت کند و اعتمادبهنفس شما را از طریق تکرار و چالش بسازد.
آنچه یاد خواهید گرفت:
- اصول اساسی ریاکت - کامپوننتها، props ،state و رویدادها
- هوکهای ریاکت مانند useState ،useEffect ،useRef و هوکهای سفارشی پیشرفته
- رویکردهای مدرن استایلدهی با Tailwind CSS 4 و CSS خالص
- نحوه ساختاردهی پروژههای ریاکت و سازماندهی آنها برای مقیاسپذیری
- اتصال به APIs و مدیریت داده بلادرنگ
- ایجاد کامپوننتهای قابل استفاده مجدد و مدیریت state مشترک
- اصول طراحی واکنشگرا و توسعه موبایل محور
- گردشکارها و ابزارهای عملی توسعه که در مشاغل واقعی استفاده میشوند.
این دوره با شیوههای مدرن توسعه، توضیحات روشن و کدنویسی تمیز پر است که واقعاً آن را درک خواهید کرد. چه هدف شما تبدیل شدن به توسعهدهنده ریاکت باشد، چه فریلنسر باشید یا بخواهید وب اپلیکیشنهای خود را بسازید، این دوره تجربه و اعتمادبهنفس لازم را برای پیشروی به شما ارائه میدهد.
مخاطبان دوره:
- مبتدیانی که هماکنون HTML ،CSS و جاوااسکریپت را میدانند.
- توسعهدهندگان مبتدی ریاکت که میخواهند اپلیکیشنهای واقعی بسازند.
- دانشجویانی که به دنبال تقویت پورتفولیوی خود با پروژههای مدرن هستند.
- دانشجویان خودآموز که یادگیری عملی و مبتنی بر پروژه را ترجیح میدهند.
- کسی که میخواهد ریاکت 19 و Tailwind CSS 4 را با ساخت اپلیکیشن یاد بگیرد.
ابزارها و فناوریهای استفاده شده:
- ریاکت 19 - جدیدترین و قدرتمندترین نسخه ریاکت
- Tailwind CSS 4.0 - استایلدهی مدرن utility-first
- CSS خالص - برای ارائهٔ انعطافپذیری و استایلدهی اساسی
- APIs لایو - برای یکپارچهسازی داده واقعی
در پایان دوره، نه تنها ریاکت و Tailwind CSS را درک میکنید، بلکه 15 پروژه پالیش شده دارید که میتوانید در پرتفولیو یا رزومه خود نشان دهید.
اگر آماده باشید تا به جای دیدن، شروع به ساخت کنید، این دوره برای شماست.
بیایید با هم کدنویسی و ایجاد کنیم.
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان وب که از HTML ،CSS و جاوااسکریپت آگاهی دارند و میخواهند با ریاکت مهارتهای خود را به سطح بعدی برسانند.
- توسعهدهندگان مبتدی ریاکت که به دنبال ساخت پروژههای واقعی و تقویت تجربهٔ عملی با ریاکت 19 هستند.
- توسعهدهندگان فرانتاند که میخواهند به Tailwind CSS 4 تسلط یافته و رابطهای کاربری زیبا و واکنشگرا در پروژههای واقعی بسازند.
- توسعهدهندگان خودآموخته که از تئوری خستهاند و به یک دورهٔ کاملاً عملی مبتنی بر پروژه ریاکت علاقهمند هستند.
- کسی که میخواهد با استفاده از ریاکت، CSS و Tailwind یک پورتفولیوی قوی از اپلیکیشنهای وب واقعی بسازد تا شغل توسعهدهنده پیدا کند.
دوره کامل React JS - ساخت 15 پروژه وب با ریاکت
-
مقدمه 03:46
-
پیشنمایش پروژه 02:39
-
راهاندازی پروژه 07:11
-
ایجاد JSX 09:38
-
سفارشیسازی و استایلدهی اپلیکیشن 44:14
-
ناوبری تقویم و روزها 24:52
-
بهبود پاپآپ رویداد و افزودن رویدادهای جدید 25:04
-
ویرایش و حذف رویدادهای موجود 25:54
-
ساخت پروژه واکنشگرا 13:19
-
پیشنمایش پروژه 02:57
-
راهاندازی پروژه 08:38
-
ایجاد JSX 08:25
-
استایلدهی و سفارشیسازی اپلیکیشن 22:03
-
واکشی داده بلادرنگ 09:04
-
نمایش لوکیشنها و جزییات آب و هوا 15:59
-
بروزرسانی تصاویر آب و هوا و پسزمینهها 09:01
-
نمایش تاریخ 05:39
-
برخورد با درخواست نامعتبر و افزودن یک لودر 07:55
-
پیشنمایش پروژه 02:30
-
راهاندازی پروژه 07:52
-
ایجاد صفحه نقل قولها 30:09
-
واکشی داده 07:24
-
ایجاد بخش علاقهمندیها 06:33
-
تابعی کردن بخش علاقهمندیها 12:58
-
ساخت پروژه واکنشگرا 06:47
-
پیشنمایش پروژه 05:21
-
راهاندازی پروژه 10:52
-
ایجاد صفحه شروع 11:55
-
ایجاد صفحه چت 30:51
-
ناوبری بین صفحات شروع و چت 09:50
-
ایجاد قابلیت چت 35:26
-
ایجاد چتهای جدید 26:10
-
فیکس کردن مشکل ایجاد چت جدید 07:00
-
یکپارچهسازی چتجیپیتی 28:50
-
افزودن انتخابگر ایموجی 11:32
-
افزودن ذخیرهسازی محلی 18:57
-
ساخت پروژه واکنشگرا 13:38
-
پیشنمایش پروژه 01:57
-
راهاندازی پروژه 09:18
-
ساخت مبدل رنگ - بخش 1 25:57
-
ساخت مبدل رنگ - بخش 2 29:20
-
پیشنمایش پروژه 14:52
-
راهاندازی پروژه 11:36
-
شروع کار 10:37
-
ایجاد طرحبندی پروژه 24:50
-
استایلدهی و سفارشیسازی هدر 09:29
-
استایلدهی و سفارشیسازی نوار ناوبری 11:11
-
ایجاد محتوای خبری 14:24
-
واکشی اخبار - بخش 1 05:15
-
واکشی اخبار - بخش 2 21:21
-
دریافت اخبار بر اساس دستهبندی 11:26
-
افزودن قابلیت جستجو 10:32
-
ایجاد مودال اخبار 17:19
-
تابعی کردن مودال 20:04
-
ایجاد مودال بوکمارکها 11:59
-
پیادهسازی ویژگی بوکمارککردن 26:45
-
ذخیره بوکمارکها در ذخیرهسازی محلی 07:39
-
ایجاد JSX برای ویجت آب و هوا 06:01
-
استایلدهی و سفارشیسازی ویجت آب و هوا 09:23
-
تابعی کردن ویجت آب و هوا 41:19
-
ایجاد JSX برای تقویم 13:30
-
تابعی کردن تقویم 30:28
-
ایجاد فوتر 04:09
-
ایجاد و سفارشیسازی بخش وبلاگها 18:19
-
ایجاد و سفارشیسازی فرم 16:44
-
ناوبری بین بخشها 11:38
-
ایجاد و سفارشیسازی بخش وبلاگهای من 14:56
-
ارسال و نمایش پستهای کاربری 32:51
-
نمایش پیام ارسال و اعتبارسنجی فرمها 29:27
-
ذخیره وبلاگها در ذخیرهسازی محلی 06:43
-
نمایش پستهای بلاگ در مودال 21:34
-
ویرایش و حذف پستهای بلاگ 30:43
-
ساخت پروژه واکنشگرا 32:43
-
پیشنمایش پروژه 02:26
-
نصب و راهاندازی 09:04
-
راهاندازی هدر سوالات متداول و کنترلهای آن 13:05
-
پیادهسازی سوئیچ تم تاریک و تم روشن 11:36
-
نمایش سوالات و پاسخها 12:16
-
پیادهسازی قابلیت بازشو و بسته شدن 30:55
-
افزودن قابلیت ذخیرهسازی محلی 03:48
-
پیشنمایش پروژه 02:36
-
نصب و راهاندازی 07:12
-
ایجاد تاگل تم تاریک و تم روشن 11:12
-
ایجاد عناصر پسزمینه 09:18
-
طراحی عناصر بنر 48:05
-
نشانهای پرشی و ذخیرهسازی محلی 11:04
-
پیشنمایش پروژه 03:50
-
نصب و راهاندازی 05:49
-
نمایش محصولات 07:10
-
ایجاد کامپوننت CartItem 08:31
-
پیادهسازی Context API 12:00
-
پیادهسازی قابلیت افزودن به سبد خرید و حذف از آن 22:32
-
مدیریت State سبد خرید و بروزرسانی مقادیر 06:28
-
ایجاد رابط کاربری سبد خرید 18:13
-
افزودن و حذف آیتمهای سبد خرید 13:57
-
محاسبه مجموع قیمت 11:20
-
افزودن قابلیت ذخیرهسازی محلی 20:40
-
واکنشگرا کردن پروژه 04:29
-
پیشنمایش پروژه 05:12
-
نصب و راهاندازی 08:57
-
پیادهسازی قابلیت زوم 13:17
-
ایجاد نوار ناوبری 21:00
-
ساخت صفحه اصلی 10:34
-
ایجاد صفحه آیفونها 12:09
-
ایجاد صفحه MacBook 37:48
-
ایجاد صفحه Apple Watch 17:04
-
ایجاد صفحه iMac 25:50
-
پیادهسازی ترنزیشنهای هموار بین صفحات 23:27
-
افزودن طراحی واکنشگرا 10:30
-
ایجاد نوار ناوبری تابعی موبایل 14:15
-
پیشنمایش پروژه 06:13
-
نصب و راهاندازی 08:11
-
ایجاد نوار ناوبری و راهاندازی بخش Hero 13:14
-
افزودن افکتهای هاور به 'Hello' در بخش Hero 13:33
-
افزودن انیمیشن چرخش 15:03
-
تقویت بخش Hero با انیمیشنها 30:00
-
پیادهسازی تم تاریک و تم روشن 32:47
-
ایجاد بخش سرویسها 40:43
-
ایجاد بخش تماس با ما 08:19
-
ایجاد دایرههای ناوبری 07:57
-
عملیاتی کردن ناوبری 20:57
-
ساخت پروژه واکنشگرا 07:35
-
افزودن لودر 08:40
-
پیشنمایش پروژه 01:01
-
نصب و راهاندازی 09:13
-
ایجاد سیستم امتیازدهی 28:52
-
ساخت اسلایدر تصاویر 26:59
-
پیشنمایش پروژه 03:30
-
نصب و راهاندازی 05:39
-
ایجاد فرمهای احرازهویت 43:33
-
ساخت مودال سفر 39:39
مشخصات آموزش
دوره کامل React JS - ساخت 15 پروژه وب با ریاکت
- تاریخ به روز رسانی: 1404/09/07
- سطح دوره:همه سطوح
- تعداد درس:131
- مدت زمان :33:46:29
- حجم :27.63GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy