بوتکمپ React - راهنمای کامل
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت وب اپلیکیشنهای مدرن و واکنشگرا با استفاده از React از ابتدا
- درک عمیق مفاهیم پایه React (کامپوننتها، props و state و هوکها)
- مدیریت مؤثر state گلوبال با Redux Toolkit
- پیادهسازی ناوبری سمت کلاینت با React Router
- یکپارچهسازی Firebase برای سرویسهای بکاند، از جمله احراز هویت و مجوز
- کار با پایگاه داده Firestore برای ذخیره و بازیابی داده به صورت بلادرنگ
- مدیریت لاگین کاربر، رجیستریشن کاربر و مسیرهای امن با صفحات محافظت شده
- یادگیری بهترین شیوهها برای ساختار پوشهها و سازماندهی تمیز پروژه
- ساخت و استقرار یک پروژه واقعی تجارت الکترونیک به صورت گامبهگام
- افزودن قابلیتهایی مانند سبد خرید، چکاوت، لیست محصولات و مدیریت سفارشها
- بهدست آوردن اعتمادبهنفس برای ساخت و راهاندازی پروژههای React خود
پیشنیازهای دوره
- درک پایه از HTML و CSS و JavaScript
- نیازی به دانش قبلی از React و Redux یا Firebase نیست. همه موارد را گامبهگام پوشش میدهیم.
- یک کامپیوتر با دسترسی به اینترنت و تمایل به یادگیری از طریق ساخت پروژهها
توضیحات دوره
آیا آمادهاید مهارتهای JavaScript خود را به سطح بالاتری ببرید و به توسعهدهنده مطمئن React تبدیل شوید؟ این بوتکمپ React طوری طراحی شده که شما را گامبهگام با همه مواردی که برای تسلط به React و Redux و React Router و Firebase نیاز دارید همراهی کند. آن هم در حالی که یک پروژه واقعی تجارت الکترونیک را از ابتدا میسازید.
ما با اصول React شروع میکنیم تا حتی اگر با فریمورکهای فرانتاند تازهکار باشید، خیلی زود احساس آشنایی کنید. از آنجا به سراغ موضوعات پیشرفتهتر مانند مدیریت state با Redux Toolkit، مسیریابی سمت کلاینت با React Router و احراز هویت و مجوز کاربر با Firebase میروید. در طول مسیر، یاد میگیرید چگونه کد خود را ساختاردهی کنید، بهترین شیوهها را رعایت کنید و قابلیتهایی بسازید که اپلیکیشنهای واقعی هر روز از آنها استفاده میکنند.
در پایان دوره، فقط نمیآموزید React چگونه کار میکند بلکه یک اپلیکیشن تجارت الکترونیک کاملاً تابعی با لیست محصولات، سبد خرید، چکاوت، احراز هویت و صفحات امن ساخته و منتشر کردهاید. مهمتر از همه، اعتمادبهنفس لازم را به دست میآورید تا پروژههای خودتان را بسازید و منتشر کنید یا این مهارتها را مستقیماً در شغل خود به کار بگیرید.
چرا این دوره را بگذرانید؟
- یادگیری مبتنی بر پروژه: به جای تئوری صرف، یک اپلیکیشن تجارت الکترونیک واقعی را گامبهگام میسازید.
- نقشه راه جامع : React و Redux و React Router و Firebase در یک بوتکمپ ساختارمند آموزش داده میشوند بدون نیاز به کنار هم گذاشتن چندین دوره مختلف
- کدنویسی عملی: هر مفهوم با مثالهای کاربردی و تمرینهای واقعی کدنویسی تقویت میشود.
- مبتدیپسند و در عین حال جامع: از مبانی شروع میکنیم و بدون حذف مراحل مهم، به قابلیتهای پیشرفته میرسیم.
اگر میخواهید وقت خود را با جابهجایی بین آموزشهای پراکنده هدر ندهید و در عوض React را با ساخت یک پروژه واقعی و قابل ارائه یاد بگیرید، این دوره برای شما ساخته شده است.
این دوره برای چه کسانی مناسب است؟
- مبتدیهایی که میخواهند React را با ساخت پروژههای واقعی و گامبهگام یاد بگیرند.
- توسعهدهندگان JavaScript که میخواهند با توسعه فرانتاند مدرن مهارتهای خود را به سطح بالاتری ببرند.
- دانشجویانی که به دنبال یک روش ساختارمند و عملی برای یادگیری React و Redux و React Router هستند.
- توسعهدهندگانی که علاقهمند هستند یاد بگیرند چگونه Firebase را برای احراز هویت، مجوز و ذخیرهسازی پایگاه داده یکپارچه کنند
- کسی که میخواهد یک اپلیکیشن تجارت الکترونیک واقعی را از ابتدا بسازد و منتشر کند.
- افرادی که برای نقشهای توسعهدهنده فرانتاند آماده میشوند یا میخواهند رزومه خود را با تجربه React تقویت کنند.
بوتکمپ React - راهنمای کامل
-
خوشآمدگویی 03:01
-
چرا باید React یاد بگیرید؟ 02:54
-
دموی پروژه نهایی 06:21
-
نصب Visual Studio Code 01:38
-
نصب Node JS 01:13
-
ایجاد پروژه 06:22
-
بررسی فایلها و پوشهها 04:09
-
strict mode 02:02
-
React چگونه bind میکند؟ 01:35
-
React توصیفی است 03:23
-
تابع در React 01:50
-
جداسازی Root 01:28
-
کامپوننت React 03:35
-
Prettier 00:59
-
کامپوننت والد و فرزند 02:01
-
تکلیف 1 - کامپوننتها 01:29
-
فایل اولیه JavaScript 02:16
-
متغیرها 02:26
-
درونیابی رشته 02:38
-
توابع Arrow 04:34
-
عملگر REST 07:06
-
عملگر Spread 04:39
-
Truthy و Falsy 05:24
-
Find و Find Index 03:35
-
فیلتر 03:31
-
مرتبسازی 04:52
-
ForEach و Map 04:32
-
Map در آرایهای از آبجکتها 03:33
-
قابلتغییر و غیرقابلتغییر 03:02
-
تغییر پروژه 00:26
-
استایلها در React 02:56
-
آبجکتهای استایل 01:43
-
کلاس در JavaScript 02:50
-
ایمپورت استایل شیت آبشاری (CSS) در React 02:00
-
متغیرها در JSX 02:28
-
متغیرهای بیشتر و تکلیف 2 03:08
-
ورودی و React 02:27
-
محل ذخیره تصویر در React 05:28
-
کامپوننتها در React 03:23
-
تکلیف 2 - جداسازی کامپوننتها 00:39
-
کامپوننت دانشجو 02:22
-
اکسپورت نامگذاری شده در برابر اکسپورت پیشفرض 02:34
-
نمایش تصویر برای دانشجو 02:23
-
تکلیف 3 - جداسازی کامپوننت 00:30
-
راهحل تکلیف 3 - جداسازی کامپوننتها 01:11
-
ارسال مقدار به کامپوننت فرزند 03:14
-
تکلیف 4 - props 01:03
-
ارسال کامپوننت به عنوان فرزندان 05:03
-
توابع Arrow 02:22
-
تمرین 5 - ایجاد پروژه React 00:59
-
راهحل تکلیف 5 - ایجاد پروژه 02:28
-
افزودن Bootstrap و تصاویر 01:13
-
کامپوننت هدر و فوتر 04:10
-
کامپوننت شمارنده 02:08
-
OnClick درونخطی 01:23
-
شمارنده در رابط کاربری بروزرسانی نمیشود 03:31
-
تعریف state 03:11
-
بروزرسانی state 03:09
-
بهترین شیوهها برای state 03:44
-
بروزرسانیهای رابط کاربری 02:59
-
پخش تصادفی و ریست 02:52
-
تکلیف 6 - state 02:06
-
راهحل تکلیف 6 - state 02:04
-
بروزرسانی state تودرتو مناسب نیست 02:18
-
هوک useEffect 03:22
-
رندرینگ شرطی 03:02
-
آبجکت پیچیده state 05:14
-
پیچیدگی state به صورت آبجکت 03:23
-
راهاندازی پروژه 05:19
-
لیست مخاطبها 02:28
-
طرحبندی رابط کاربری 02:31
-
کامپوننت مخاطب موردعلاقه 03:02
-
رابط کاربری ایندکس مخاطب 06:10
-
رندرینگ چندباره کامپوننت مخاطب 04:39
-
اطلاعات پویای مخاطب 02:28
-
تکلیف 6 - مخاطب عمومی 00:49
-
راهحل تکلیف 6 - مخاطب عمومی 01:38
-
رنگ دکمه علاقهمندی 01:43
-
کامپوننت فرزند نمیتواند props را بروزرسانی کند 03:48
-
فراخوانی تابع کامپوننت والد از کامپوننت فرزند 02:21
-
علاقهمندی در عمل 03:21
-
تکلیف 7 - حذف مخاطب 00:59
-
راهحل تکلیف 7 - حذف مخاطب 03:26
-
افزودن رابط کاربری فرم مخاطب 04:50
-
مدیریت ارسال فرم 03:14
-
داده فرم 01:55
-
چکباکس و دکمه رادیویی در FormData 06:08
-
اکشنها در React 19 01:44
-
افزودن state برای پیامها 02:57
-
افزودن مخاطب در عمل 03:05
-
پیام خطا و موفقیت 02:24
-
اعتبارسنجی فرم 02:34
-
Prop Drilling 01:34
-
کامپوننت کنترل شده 05:37
-
تکلیف 8 - حذف همه مخاطبها 00:48
-
راهحل تکلیف 8 - حذف همه مخاطبها 00:59
-
تمرین 9 - باگ 01:37
-
بروزرسانی مخاطب - بخش 1 04:08
-
دکمه لغو و تکلیف 10 03:39
-
تکلیف 10 - دکمه لغو در عمل 01:27
-
نمایش جزئیات مخاطب برای بروزرسانی 03:26
-
بروزرسانی مخاطب - بخش 2 06:03
-
بهترین شیوهها 01:32
-
Utility برای فراخوانی API 02:25
-
فراخوانی API در عمل 02:37
-
فرمتبندی کاربر 02:19
-
axios 02:31
-
افزودن مخاطب تصادفی در عمل 01:49
-
ایجاد پروژه 01:33
-
راهاندازی اولیه 06:07
-
UseEffect هنگام بارگذاری 03:45
-
UseEffect و پاکسازی 03:00
-
مشاهده ویژگی با useEffect 03:00
-
بروزرسانیهای اولین رندر 04:16
-
دسترسی به عنصر DOM 01:48
-
ردیابی تعداد کل رندرها 02:25
-
ردیابی مقدار قبلی با useRef 02:14
-
تغییر نام پروژه 01:10
-
ایجاد پروژه 04:06
-
پاکسازی 01:16
-
کامپوننت اپلیکیشن 02:19
-
افزودن نوار ناوبری 03:56
-
افزودن Browser Router 03:17
-
مسیریابی در عمل 04:13
-
لینکهای ناوبری 03:36
-
ناوبری برنامهای 02:19
-
تکلیف 11 - افزودن لینک 00:28
-
راهحل تکلیف 11 - افزودن لینک 00:59
-
Not Found 02:17
-
صفحه لیست محصولات 03:26
-
نمایش همه محصولات 04:08
-
ناوبری پویا 03:30
-
فیلتر محصول بر اساس پارامترها 04:19
-
صفحات مسیریابی تودرتو 01:58
-
مسیرهای تودرتو 04:22
-
مسیرهای تودرتو در عمل 03:31
-
کامپوننتهای تودرتو در عمل 05:04
-
بازگشت به صفحه قبلی 01:48
-
مسیرهای نسبی 01:14
-
افزودن کامپوننت لاگین 04:39
-
لاگین فیک 02:00
-
Utility احراز هویت 05:51
-
utility helper بیشتر 01:56
-
خروج از سیستم در عمل 03:26
-
مسیر محافظت شده 03:32
-
مسیریابی مبتنی بر نقش 04:25
-
ریدایرکشن پس از لاگین 04:40
-
تکلیف 12 - تاگل مسیرها بر اساس دسترسی 00:58
-
راهحل تکلیف 12 - تاگل مسیرها و نمایش پویا 05:32
-
ایجاد پروژه 03:08
-
Redux Toolkit 01:45
-
افزودن Redux Store 04:43
-
ایجاد اولین reducer و اکشنها 07:55
-
هوک UseSelector 03:14
-
Dispatching اکشن از کامپوننت React 04:02
-
تکلیف 13 - ضریب شمارنده 03:45
-
راهحل تکلیف 13 - ضریب شمارنده 02:50
-
افزودن اسلایس مقصد 03:29
-
تکلیف 14 - لیست مقصدها 02:55
-
راهحل تکلیف 14 - لیست مقصدها 02:59
-
انتخاب مقصد 03:23
-
نمایش مقصد انتخاب شده 02:42
-
تکلیف 15 - ریست اپلیکیشن 01:14
-
راهحل تکلیف 15 - ریست اپلیکیشن 02:10
-
Listen کردن به اکشن یک reducer دیگر 03:42
-
به magic strings نه بگویید 00:43
-
اکشنهای سفارشی 03:23
-
ایجاد پروژه 02:10
-
طرحبندی اولیه 02:19
-
افزودن رابط کاربری مقصد 04:34
-
نصب Json Server 07:24
-
ایجاد API مقصد 06:48
-
افزودن API Provider 02:25
-
دریافت اندپوینت در عمل 04:36
-
افزودن اکشن فرم مقصد 03:07
-
افزودن mutation 04:42
-
فراخوانی POST mutation 03:46
-
کش کردن با کوئری RTK 03:32
-
تگها 05:05
-
رابط کاربری لیست مقصدها 02:12
-
تمرین 16 - حذف مقصد 02:47
-
شناسه مقصد جدید 02:10
-
پاسخ از کوئری و transform 01:59
-
جداسازی مقصد تکی 01:56
-
تکلیف 17 - قابلیت ویرایش - بخش 2 02:51
-
تکلیف 17 - قابلیت ویرایش - بخش 3 07:15
-
یکپارچهسازی کوئری RTK با Redux Store 04:27
-
افزودن API مقصد تصادفی 03:38
-
افزودن مقصد تصادفی در رابط کاربری 04:38
-
تقریباً تمام شد 00:46
-
ایجاد پروژه 00:58
-
نصب پکیجهای node 04:20
-
پاکسازی اپلیکیشن 00:55
-
افزودن Bootstrap 01:30
-
ساختار پایه پوشهها 03:04
-
هدر و فوتر 05:53
-
افزودن مسیریابی 05:46
-
مسیریابی در کامپوننت هدر 06:49
-
راهاندازی Firebase 06:59
-
راهاندازی API پایه برای Firebase 03:40
-
افزودن اندپوینت API محصول 06:31
-
قالبهای محصول 05:55
-
تاگل مودال 03:37
-
کامپوننتهای فرم کنترل شده 08:03
-
تاگل isLoading 02:00
-
اعتبارسنجیها در عمل 08:07
-
فراخوانی firebase mutation 03:13
-
رجیستر provider مربوط به react redux 02:20
-
کوئری برای بازیابی محصولات 02:37
-
ایجاد محصول در عمل 03:33
-
بازیابی محصولات در کوئری 03:51
-
جدول محصول 04:43
-
فیلتر محصولات 05:00
-
ویرایش محصول - بخش 1 04:59
-
ویرایش محصول - بخش 2 04:57
-
تگها با کوئری 01:49
-
ویرایش محصول در عمل 04:41
-
افزودن نوتیفیکیشنهای Toast 03:01
-
طعم و موجودی در جدول محصول 02:48
-
افزودن mutation برای حذف محصول 01:22
-
حذف محصول 03:24
-
Sweetalert 02:23
-
تصویر Cloudinary 03:15
-
توضیح کوتاه 01:26
-
افزودن قالبها 04:11
-
فیلترها - بخش 1 05:34
-
فیلترها - بخش 2 04:24
-
نمایش محصولات 04:53
-
رابط کاربری صفحه اصلی 02:06
-
فیلترها در عمل 05:28
-
تاگل جزئیات محصول 05:12
-
مودال جزئیات محصول 03:13
-
اسلایس سبد خرید و ذخیرهسازی محلی 06:18
-
افزودن به سبد خرید در عمل 05:59
-
قالبهای سبد خرید 02:21
-
آیتمهای سبد خرید و ابزارهای توسعه 03:24
-
بارگذاری state از ذخیرهسازی محلی 02:35
-
سبد خرید پویا 06:48
-
اکشنهای سبد خرید 03:47
-
فراخوانی اکشنهای سبد خرید 03:07
-
تمرین - اشکالزدایی 06:02
-
تعداد سبد خرید در هدر 02:26
-
رابط کاربری چکاوت 07:00
-
سرویس رجیستر - بخش 1 04:56
-
سرویس رجیستر - بخش 2 05:37
-
قالبها 01:07
-
رابط کاربری رجیستر - بخش 1 04:31
-
اعتبارسنجیها 03:06
-
رجیستر در عمل 03:30
-
پاکسازی رجیستر 01:37
-
افزودن اسلایس احراز هویت 05:50
-
مشاهده state احرازهویت در Redux 01:34
-
تاگل هدر بر اساس احراز هویت 02:54
-
اتصال احراز هویت Redux و Firebase 08:19
-
خروج از سیستم در عمل 04:38
-
mutation لاگین 03:45
-
لاگین در عمل 03:57
-
نقش کاربر 01:52
-
مسیریابی مبتنی بر نقش - بخش 1 04:04
-
مسیریابی مبتنی بر نقش - بخش 2 07:41
-
صفحات احراز هویت شده 01:07
-
پاکسازی مجوز 01:57
-
ریدایرکشن پس از لاگین 01:58
-
API سفارش - ایجاد سفارشها 04:12
-
API سفارش - اندپوینتها 05:59
-
قالب تأیید سفارش 01:32
-
ایجاد سفارش و تأیید سفارش 08:56
-
جدول سفارش 06:46
-
مدیریت سفارش 04:12
-
کلاس پویا و قالب مودال 03:07
-
تاگل مودال 02:35
-
جزئیات سفارش - بخش 2 04:22
-
جزئیات سفارش - بخش 3 06:06
-
بروزرسانی سفارش در عمل 05:06
-
سفارشهای من 06:09
-
تکلیف نهایی 01:43
-
راهحل تکلیف نهایی 08:17
-
قالبهای رابط کاربری 02:16
-
باگهای کوچک 04:53
-
باگ تم 01:45
-
استقرار در Vercel 02:38
مشخصات آموزش
بوتکمپ React - راهنمای کامل
- تاریخ به روز رسانی: 1405/04/02
- سطح دوره:Alls
- تعداد درس:281
- مدت زمان :16:10:00
- حجم :7.48GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy