دوره آموزشی
دوبله زبان فارسی
آموزش ریاکت مدرن از ابتدا
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- یادگیری اصول ریاکت (کامپوننتها، استیت، هوکها، context API و غیره)
- ساخت پروژهها (وبسایت پورتفولیو، اپلیکیشن نوت، UI سبد خرید، اپلیکیشن اشتراکگذاری ایده و غیره)
- ریاکت روتر v7 - حالت Declarative و فریمورک با SSR
- TanStack Router و TanStack Query برای کار با APIها
- وبسایت پورتفولیو با ادغام Strapi Headless CMS
- اپلیکیشن فول استک MERN با توکنهای Refresh برای احراز هویت
- یادگیری هوکها مانند useState ،useEffect ،useRef ،useContext
- مناسب برای مبتدیان و متوسط
پیش نیازهای دوره
- شما باید اصول JavaScript را بدانید.
توضیحات دوره
پتانسیل کامل ریاکت را در سال 2025 با این دوره جامع و دوستانه برای مبتدیان که فراتر از اصول اولیه میرود، باز کنید. چه شما کاملاً تازهکار در ریاکت باشید و چه بخواهید درک خود را از ویژگیهای مدرن آن عمیقتر کنید، این دوره به شما مهارتهای عملی لازم را برای ساخت برنامههای واقعی با استفاده از بهترین شیوههای امروزی خواهد داد.
شما با یادگیری اصول ریاکت در قالبی بسیار ساختیافته و آسان برای درک شروع میکنید. ما پروژهها را در حین یادگیری میسازیم.
اینها برخی از مفاهیم هستند که خواهید آموخت:
- اصول اولیه: JSX، کامپوننتها، props، استیت ، و رویدادها
- تمام چرخه عمر یک کامپوننت ریاکت
- تمام هوکهای اصلی ریاکت – useState ،useEffect ،useRef ،useContext و غیره
- بهترین شیوهها برای کامپوننتهای کاربردی در ریاکت مدرن
- الگوهای رندر شرطی (ternary در مقابل &&)
- سازماندهی فایلها، کامپوننتهای قابلاستفاده مجدد و معماری تمیز
- مسیر یابی پیشرفته با ریاکت روتر v7 شامل حالت declarative و فریمورک با SSR
- واکشی و کش کردن دادهها با TanStack Query
- اشکالزدایی واقعی با استفاده از React DevTools، تب شبکه و لاگکردن
- احراز هویت ایمن با توکنهای دسترسی و تازهسازی با استفاده از کوکیهای HTTP-only
- توسعه فول استک MERN
- استقرار با استفاده از Vercel (فرانتاند) و Render (بکاند)
پروژهها:
این دوره حاوی تعدادی پروژه کوچک تا متوسط است که میتوانید برای پورتفولیوی خود بسازید:
- UI امتیازدهی/بازخورد - UI ساده ستارهای برای یادگیری اصول اولیه. رویدادها، props، استیت و غیره
- اپلیکیشن نوت - ایجاد و حذف نوتها از حافظه محلی. یادگیری در مورد فرمها و استیت
- زمین بازی چرخه عمر - سندباکس برای یادگیری در مورد چرخه عمر کامپوننت و هوک useEffect
- تایمر ساده - یادگیری در مورد هوک useRef و نگهداشتن دادهها در طول بارگذاری صفحات
- GitHub Finder - استفاده از TanStack Query برای دریافت و ارسال دادهها به و از Github API
- Crypto Dash - استفاده از API CoinGecko برای ایجاد داشبوردی برای دریافت قیمتها و اطلاعات دیگر از ارزهای دیجیتال
- IdeaDrop - اپلیکیشن فول استک MERN با TanStack Router در فرانتاند
- The Friendly Dev - وبسایت پورتفولیو و بلاگ ساخته شده با ریاکت روتر v7 و Strapi headless CMS
این دوره برای چه کسانی مناسب است؟
- هر کسی که میخواهد ریاکت یاد بگیرد یا نحوه استفاده از محیطهای مدرن ریاکت مانند تاناستک و ریاکت روتر را یاد بگیرد.
آموزش ریاکت مدرن از ابتدا
-
به دوره خوش آمدید 03:44
-
چگونه این دوره را بگذرانید؟ 05:15
-
ریاکت چیست؟ 05:39
-
معماری اپلیکیشن ریاکت 05:35
-
توسعه مبتنی بر کامپوننت 04:56
-
ریاکت در مقابل Vanilla JavaScript 08:34
-
اکوسیستم ریاکت 06:55
-
چگونه ریاکت در پشت صحنه کار میکند؟ 06:18
-
راه اندازی محیط توسعه 06:25
-
مقدمه بخش 03:06
-
توابع Arrow 08:46
-
Template Literals 05:38
-
رندر Ternary و مدار کوتاه 07:39
-
تخریب ساختار و Rest Operator 08:00
-
متدهای آرایه 10:08
-
زنجیرهگذاری اختیاری و اپراتور تجمیع Nullish 04:35
-
تغییرناپذیری و اپراتور Spread 06:45
-
Promises و Async Await 07:55
-
آزمون بخش None
-
مقدمه بخش 03:36
-
راه اندازی سریع ریاکت و createElement 09:19
-
مقدمهای بر JSX (XML جاوا اسکریپت) 12:10
-
راه اندازی ابزار ساخت Vite 09:51
-
ساخت کامپوننتها 04:58
-
استایلدهی در ریاکت 06:16
-
لیستها 05:44
-
مدیریت رویدادها 05:48
-
مقدمهای بر استیت 07:45
-
استیت امتیازدهی 05:22
-
اطلاعات بیشتر در مورد هوک UseState 05:33
-
رندر شرطی و استایلدهی 06:00
-
props 07:20
-
کامپوزیشن کامپوننت 12:40
-
ارسال امتیاز 06:35
-
کامپوزیشن کامپوننت مودال 05:21
-
انتقال داده به عنوان فرزند 06:05
-
آزمون بخش None
-
مقدمه بخش 01:40
-
راه اندازی اپلیکیشن و Tailwind (v4) 05:08
-
ورودیهای کنترل شده 12:24
-
شیء دادههای فرم 05:34
-
ارسال فرم و استیت سراسری 07:28
-
نمایش نوتها 05:43
-
قابل جمع شدن فرم را بسازید 06:36
-
کامپوننتهای ورودی قابلاستفاده مجدد 11:06
-
حذف نوتها 04:45
-
چالش رندر شرطی 02:40
-
Prop Drilling 05:18
-
آزمون بخش None
-
مقدمه بخش 03:24
-
توضیح چرخه عمر کامپوننت 05:11
-
کلاسها و متدهای چرخه عمر 13:49
-
چرخه عمر و useEffect 09:12
-
عوارض جانبی LocalStorage 05:45
-
آزمون بخش None
-
مقدمه بخش 01:50
-
هوک useRef چیست و راه اندازی پروژه 04:42
-
استفاده از useRef در عمل و ورودیهای بدون کنترل 06:59
-
پایداری تایمر در طول Re-Renders 11:06
-
چالش کامپوزیشن کامپوننت 05:53
-
دکمه شروع با تمرکز خودکار 02:52
-
ذخیره تایمر در حافظه محلی 03:38
-
آزمون بخش None
-
مقدمه بخش و مقدمه پروژه 02:13
-
اطلاعات API و تنظیمات پروژه 06:16
-
انجام درخواستهای HTTP 08:34
-
Async/Await در useEffect 03:13
-
نمایش دادههای سکه 08:28
-
متغیرهای محیطی 07:36
-
انتخابگر محدودیت 05:11
-
فیلتر سکهها 06:41
-
انتخابگر ترتیب مرتبسازی 11:13
-
آزمون بخش None
-
مقدمهای بر مسیر یابی 05:03
-
سینتکس ریاکت روتر 03:04
-
مسیر صفحه اصلی 10:56
-
صفحه درباره و کامپوننت لینک 05:43
-
صفحه پیدا نشد 04:53
-
واکشی جزئیات سکه 09:22
-
نمایش جزئیات سکه 13:33
-
افزودن Loading Spinner 05:23
-
دریافت و فرمت دادههای چارت 13:14
-
نمایش نمودار 05:36
-
آزمون بخش None
-
مقدمه بخش 01:45
-
درک فرآیند Build 03:31
-
فرمان Build 06:55
-
استقرار در Vercel 06:21
-
آزمون بخش None
-
مقدمه بخش 02:16
-
Context API چیست؟ 04:27
-
راه اندازی پروژه 04:40
-
راه اندازی سرور JSON 06:03
-
نمایش دادههای محصول 12:33
-
راه اندازی پروکسی 04:25
-
کانتکست محصول 10:58
-
کانتکست سبد خرید 04:34
-
دکمه افزودن به سبد خرید 08:18
-
هدر و شمارش سبد 08:18
-
کشوی اقلام سبد خرید 08:57
-
حذف اقلام و پاک کردن سبد خرید 05:27
-
ذخیره اقلام سبد خرید در حافظه محلی 02:59
-
آزمون بخش None
-
مقدمه بخش و مقدمه پروژه 03:15
-
راه اندازی پروژه و ساختار فایل 07:44
-
ساخت مسیرها 10:24
-
رفع خطای کنسول Devtools 03:03
-
SSR و هیدراسیون کلاینت 06:22
-
لینکها و ناوبری 07:31
-
استایلدهی به لینک فعال 03:05
-
منوی واکنشگرا 06:35
-
کامپوننت Hero 07:10
-
مقدمهای بر انواع (TypeScript) 16:44
-
مسیرهای لایهبندی 08:39
-
آزمون بخش None
-
بررسی اجمالی Loaders 03:59
-
واکشی پروژهها با Loader 06:17
-
ایجاد نوع پروژه 03:33
-
نمایش دادههای Loader 08:40
-
مسیر دینامیک و Loader کلاینت 08:00
-
خروجی صفحه جزئیات 07:19
-
صفحهبندی پروژه 09:08
-
کامپوننت صفحهبندی 06:22
-
فیلتر دستهبندی پروژه 09:51
-
انیمیشن فیلتر پروژه 06:16
-
پروژههای ویژه 11:36
-
آزمون بخش None
-
صفحه درباره 11:43
-
JSX صفحه تماس 06:12
-
مثال Actions ریاکت روتر 08:47
-
اعتبارسنجی فرم با اکشن ها 07:38
-
صفحه پیدا نشد 04:59
-
Markdown چیست؟ 04:33
-
واکشی متای پست 08:31
-
نمایش متای پست 06:26
-
پست واحد و Markdown 11:25
-
نمایش صفحه جزئیات 07:15
-
مرتبسازی پستها بر اساس تاریخ 02:43
-
استفاده دوباره از کامپوننت صفحهبندی 04:36
-
فیلتر پستهای بلاگ 09:37
-
آخرین پستهای بلاگ 14:48
-
آزمون بخش None
-
توضیح Headless CMS 04:31
-
ساختار پوشه فول استک 05:06
-
ایجاد پروژه Strapi 04:26
-
راه اندازی پایگاه داده و Strapi Admin 05:14
-
نوع محتوای پروژه 08:22
-
دسترسی به API 03:57
-
واکشی پروژهها از Strapi 06:08
-
نوع پروژه Strapi 04:10
-
واکشی پروژه فردی از Strapi 07:38
-
پروژههای ویژه صفحه اصلی 07:05
-
نوع محتوای پست 06:15
-
واکشی پستها از Strapi 08:02
-
واکشی جزئیات پست از Strapi 09:32
-
پستهای صفحه اصلی از Strapi 05:26
-
آزمون بخش None
-
آپلود تصاویر به Cloudinary 14:21
-
فرم تماس Formspree.io 04:43
-
استقرار Strapi به Render.com 08:20
-
استقرار فرانتاند در Vercel 03:28
-
آزمون بخش None
-
مقدمه بخش و مقدمه پروژه 02:17
-
TanStack Query چیست؟ 08:17
-
راه اندازی پروژه و کلاینت کوئری 05:29
-
ادغام GitHub API 05:20
-
ایجاد کوئری ها با هوک useQuery 12:04
-
پاکسازی کد 05:50
-
نصب ابزارهای توسعه React Query 03:48
-
ویژگی جستجوهای اخیر 11:52
-
بگذارید درباره استیت صحبت کنیم 03:09
-
پیشواکشی دادهها با TanStack Query 03:47
-
ذخیره کاربران اخیر در حافظه محلی 03:45
-
نمایش پیشنهادات کاربر 12:08
-
کامپوننت کشویی پیشنهادات 07:36
-
توکن API و اطلاعات امنیتی مهم 04:07
-
بررسی کنید که آیا کاربر در حال دنبال کردن است 09:54
-
تغییرات - دنبال کردن کاربر 07:04
-
تغییرات - لغو فالو کردن کاربر 03:52
-
Toast Notifications 03:36
-
آزمون بخش None
-
مقدمه بخش و مقدمه پروژه 03:45
-
مقدمهای بر TanStack Router 06:21
-
راه اندازی پروژه 07:42
-
ساخت مسیرها 06:29
-
Head و متا 03:51
-
Mock REST API 03:51
-
واکشی داده با TanStack Router Loaders 05:44
-
پروکسی Vite و رفع خطاهای Config 05:27
-
راه اندازی TanStack Query و QueryClient 06:03
-
استفاده از TanStack Query برای واکشی ایده 09:34
-
نصب و استفاده از Axios 04:40
-
واکشی و نمایش ایدهها 09:37
-
هدر و طرح اصلی 07:04
-
صفحه پیدا نشد 02:57
-
چالش صفحه اصلی 10:15
-
کامپوننت IdeaCard 07:04
-
ایجاد فرم ایده 03:52
-
ایجاد جهش ایده 09:36
-
حذف ایدهها 08:47
-
فرم ویرایش ایده 12:02
-
بهروزرسانی تغییر ایده 07:44
-
آزمون بخش None
-
مقدمه بخش 03:26
-
MERN چیست؟ 02:20
-
Monorepo در مقابل Separate Repos 03:47
-
راه اندازی سرور اکسپرس پایه 10:55
-
ساخت اندپوینت های سرور 11:52
-
فایلهای مسیر 05:32
-
مدیر خطای سفارشی 06:42
-
راه اندازی MongoDB Atlas (پایگاه داده ابری) 05:36
-
راه اندازی MongoDB Compass و ایمپورت کردن دادهها 03:44
-
اتصال به پایگاه داده با استفاده از Mongoose 04:06
-
مدل و واکشی ایدهها 08:36
-
ایجاد ایده جدید 07:02
-
حذف و بهروزرسانی ایدهها 09:33
-
ادغام فرانتاند و بکاند 04:48
-
محدود کردن و مرتبسازی در سطح API 07:16
-
آزمون بخش None
-
JWTها چیست؟ 04:31
-
توضیح استراتژی توکنهای دسترسی و Refresh 05:08
-
مدل کاربر و هش رمز عبور 08:27
-
اندپوینت ثبتنام کاربر 08:14
-
ایجاد توکنهای دسترسی و Refresh 11:09
-
اندپوینت خروج و پاک کردن کوکی 02:30
-
اندپوینت لاگین 07:22
-
استفاده از توکن Refresh 07:44
-
محافظت از مسیرها 12:36
-
احراز هویت کاربر و کنترل دسترسی 13:25
-
آزمون بخش None
-
توضیح فرایند احراز هویت فول استک 02:31
-
صفحات احراز هویت و طرحبندی 12:42
-
کانتکست احراز هویت 08:22
-
ثبتنام کاربر 12:41
-
ورود کاربر 07:00
-
لینکهای ناوبری شرطی 04:20
-
خروج کاربر 05:22
-
Refresh کردن توکن در هنگام رفرش کردن صفحه 05:14
-
ارسال توکن با درخواست با استفاده از Axios Interceptor 08:28
-
Refresh کردن توکن هنگام انقضا 09:38
-
پنهان کردن کنترلها 02:25
-
آزمون بخش None
-
آمادهسازی برای استقرار 05:08
-
استقرار API بکاند 03:55
-
استقرار فرانتاند 06:34
-
آزمون بخش None
مشخصات آموزش
آموزش ریاکت مدرن از ابتدا
- تاریخ به روز رسانی: 1404/06/21
- سطح دوره:مقدماتی
- تعداد درس:246
- مدت زمان :25:30:13
- حجم :11.28GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy
آموزش های مرتبط
The Great Courses
2,495,000
499,000 تومان
- زمان: 06:19:16
- تعداد درس: 40
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
6,787,000
1,357,400 تومان
- زمان: 17:11:52
- تعداد درس: 113
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
8,360,500
1,672,100 تومان
- زمان: 21:10:47
- تعداد درس: 202
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
5,720,500
1,144,100 تومان
- زمان: 14:29:26
- تعداد درس: 36
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,206,500
841,300 تومان
- زمان: 10:39:08
- تعداد درس: 64
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
4,391,000
878,200 تومان
- زمان: 11:07:45
- تعداد درس: 63
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
7,261,000
1,452,200 تومان
- زمان: 18:23:18
- تعداد درس: 103
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:57:00
- تعداد درس: 20
-
سطح دوره:
-
زبان: دوبله فارسی
The Great Courses
490,000
98,000 تومان
- زمان: 00:41:00
- تعداد درس: 9
-
سطح دوره:
-
زبان: دوبله فارسی