آموزش Remix.js - راهنمای عملی
✅ سرفصل و جزئیات آموزش
آنچه یاد خواهید گرفت:
- ساخت وبسایتها و اپلیکیشنهای فولاستک React با Remix
- پیادهسازی صفحات پویا و تو در تو
- ساخت طرح بندیهای تو در تو با دریافت داده بهینه
- مدیریت ارسال فرمها بدون منطق جاوااسکریپت سمت کاربر
- پیادهسازی احراز هویت کاربر از طریق کوکیهای سشن
پیش نیازهای دوره
- دانش اولیه React مورد نیاز است.
- هیچ دانش قبلی از Remix مورد نیاز نیست.
- هیچ دانش پیشرفتهای از React مورد نیاز نیست.
توضیحات دوره
ریمیکس یک فریمورک React در حال رشد است که فرآیند ساخت اپلیکیشنها و وبسایتهای فولاستک React تعاملی و غنی را (به شدت!) ساده میکند.
با Remix، کدهای بکاند و فرانتاند به صورت یکپارچه با هم کار میکنند و توسعهدهنده نیازی به نگرانی درباره مدیریت پروژهها یا کدهای جداگانه ندارد. در عوض، منطق بکاند در کنار کد فرانتاند پیادهسازی میشود و Remix بقیه کارها را انجام میدهد.
در این دوره، دانشجویان یاد میگیرند که چگونه اپلیکیشنها و وبسایتهای فولاستک React.js را با Remix از پایه بسازند. تمام مفاهیم کلیدی Remix به صورت عمیق پوشش داده شده و گامبهگام آموزش داده میشوند. بنابراین تا پایان این دوره، دانشجویان قادر خواهند بود وبسایتهای فولاستک Remix خود را بسازند!
به عنوان بخشی از این دوره، دو پروژه دمو بزرگ ساخته خواهد شد، از جمله یک "وبسایت مدیریت هزینهها" که کاربران میتوانند در آن ثبتنام کنند، هزینههای خود را مدیریت کنند و تحلیل هزینهها را مشاهده کنند. در این پروژه، چگونگی انجام عملیات CRUD (ایجاد، خواندن، بروزرسانی، حذف) با Remix و چگونگی اتصال اپلیکیشن React به پایگاه داده آموزش داده میشود.
مفاهیم زیر با جزئیات دقیق در این دوره پوشش داده شدهاند:
- Remix چیست و چگونه کار میکند؟
- Remix در مقابل NextJS
- افزودن مسیرها و صفحات
- کار با مسیرهای تو در تو
- مدیریت طرح بندیها (احتمالاً تو در تو)
- ترکیب صفحات با کامپوننتهای غیر صفحهای
- استایلدهی به صفحات و کامپوننتها
- دریافت داده(همچنین برای صفحات تو در تو)
- ارسال داده - از طریق فرمها و به صورت برنامهنویسی
- مدیریت ارسال داده در بکاند
- ذخیره داده در پایگاه داده و دریافت داده از آن
- اعتبارسنجی ورودی کاربر
- احراز هویت کاربران (ثبتنام و ورود)
- مدیریت سشنها از طریق کوکیها
- بهینهسازی اپلیکیشنهای Remix
- استقرار کردن اپلیکیشنهای Remix
- و بسیاری موارد دیگر!
این دوره برای چه کسانی مناسب است؟
- توسعهدهندگان React که میخواهند با React اپلیکیشنهای فولاستک بسازند.
آموزش Remix.js - راهنمای عملی
-
به دوره خوش آمدید! 00:32
-
Remix چیست؟ و چرا باید از Remix استفاده کنید؟ 05:40
-
مقایسه Remix و NextJS 02:10
-
درباره دوره 01:23
-
چگونه بیشترین بهره را از این دوره ببرید؟ 03:36
-
معرفی ماژول 01:43
-
ایجاد یک پروژه Remix 03:35
-
تحلیل پروژه ایجاد شده 04:02
-
شروع کار با مسیریابی مبتنی بر فایل 03:46
-
افزودن لینکها و ساخت یک SPA (اپلیکیشن تکصفحهای) 05:11
-
پیش به سوی یک پروژه بهتر 03:06
-
استایلدهی صفحات و درک مسیر ریشه 09:05
-
اعمال استایلهای کامپوننت 06:44
-
استایلدهی لینکهای فعال با NavLink 03:02
-
ارسال فرمها چگونه کار میکند؟ 03:57
-
مدیریت فرم سمت سرور از طریق ()action 03:23
-
افزودن کد بکاند و ریدایرکت کردن 09:16
-
دریافت دادههای صفحه از طریق ()loader 04:59
-
بازگرداندن و استفاده از دادههای دریافت شده 07:51
-
از <form> به <Form> 04:49
-
ارائه بازخورد به کاربر از طریق useNavigation 03:59
-
اعتبارسنجی ورودی و بازگرداندن داده در ()action 06:04
-
مدیریت خطا از طریق ErrorBoundary 06:52
-
مدیریت پاسخهای خطا از طریق CatchBoundary 07:34
-
افزودن مسیرهای پویا و مسیرهای جدا شده با نقطه 07:53
-
دریافت داده برای مسیرهای پویا 04:07
-
یک مثال دیگر از CatchBoundary 01:41
-
تنظیم متادیتای صفحه 04:31
-
خلاصه 02:17
-
معرفی ماژول 01:33
-
آنچه خواهیم ساخت - یک دمو 02:04
-
برنامهریزی و ایجاد پروژه 03:54
-
ایجاد مسیرهای پروژه - یادآوری 10:11
-
مسیرهای تو در تو - یک رویکرد جایگزین 05:47
-
مسیرهای طرح بندی 07:54
-
افزودن کامپوننتها و استایلدهی 06:38
-
کار روی مسیرهای بیشتر 10:50
-
صفحات بازاریابی و تصاویر استاتیک 04:04
-
استفاده از طرح بندی ها 02:41
-
رندر کردن یک صفحه مودال (صفحه Overlay) 03:30
-
افزودن لینکها 05:13
-
مسیرها: مطلق در برابر نسبی 02:34
-
ناوبری به صورت برنامهنویسی 03:33
-
افزودن NavLinkها 03:32
-
معرفی مسیرهای طرح بندی بدون مسیر 08:56
-
انجام کارهای بیشتر با مسیرهای طرح بندی بدون مسیر 03:41
-
معرفی مسیرهای منابع 03:39
-
درک مسیرهای Splat 05:31
-
کار با پارامترهای جستجوی URL (پارامترهای کوئری) 09:29
-
افزودن لینکهای بیشتر مربوط به هزینهها 03:41
-
خلاصه ماژول 01:52
-
معرفی ماژول 01:04
-
راهاندازی پروژه و پایگاه داده (MongoDB) 03:40
-
افزودن Prisma (پکیجی برای کوئری گرفتن از پایگاه داده) 04:17
-
افزودن مدل داده هزینه 05:48
-
آمادهسازی کد برای ارسال فرم 07:09
-
افزودن تابع سمت سرور "addExpense" 06:08
-
افزودن هزینهها به پایگاه داده (از طریق ()action) 06:57
-
افزودن اعتبارسنجی سمت سرور 10:14
-
ارسال فرمها به صورت برنامهنویسی 05:09
-
افزودن بازخورد تصویری ارسال 05:28
-
دریافت هزینهها (از طریق ()loader) 09:16
-
نگاهی دقیقتر به Loaderها 05:27
-
بارگیری یک هزینه تکی (از طریق پارامترهای مسیر پویا) 08:47
-
چگونگی اجرای Loaderهای تو در تو 03:03
-
استفاده از دادههای Loader والد از طریق ()useMatches 06:27
-
بهروزرسانی دادهها 07:27
-
حذف دادهها 03:27
-
یک Action - چندین فرم 05:30
-
ارسال برنامهنویسیشده "پشت صحنه" از طریق ()useFetcher 09:31
-
استخراج پارامترهای جستجو 04:08
-
افزودن بازخورد تصویری به فرم احراز هویت 02:17
-
افزودن یک سند ریشه مشترک 07:25
-
افزودن منطق پیشفرض مدیریت خطا 04:24
-
مدیریت خطاها بدون ErrorBoundary یا CatchBoundary 05:54
-
مدیریت خطاها در داخل کامپوننتها 04:06
-
زمان تمرین - چالش 01:13
-
زمان تمرین - راه حل 05:27
-
خلاصه ماژول 03:11
-
معرفی ماژول 00:50
-
راهاندازی پروژه 01:01
-
احراز هویت کاربر چگونه کار میکند؟ 02:15
-
آمادهسازی پایگاه داده 05:16
-
افزودن اعتبارسنجی اعتبارنامهها در سمت سرور 04:28
-
بررسی کاربران و ایمیلهای موجود 03:32
-
ثبتنام کاربر و هش کردن رمز عبور 06:32
-
شروع کار با ورود کاربر 03:49
-
سشن ها و کوکیها - آمادهسازی 04:52
-
ایجاد کوکیهای سشن 08:05
-
استخراج داده سشن و رندر کردن رابطهای کاربری شرطی 06:52
-
افزودن خروج 06:36
-
محافظت از مسیرها 06:48
-
محافظت بیشتر از مسیرها 01:35
-
اتصال هزینهها و کاربران 08:31
-
خلاصه ماژول 01:18
-
معرفی ماژول 01:08
-
افزودن متادیتا به مسیرها 08:01
-
چرا ممکن است به هدرهای پاسخ صفحه سفارشی نیاز داشته باشید؟ 02:17
-
تنظیم هدرهای پاسخ صفحه 03:38
-
کار با هدرهای تو در تو 03:38
-
استفاده از هدرهای Action و Loader 02:49
-
غیرفعال کردن جاوااسکریپت برای برخی صفحات 06:49
-
نگاهی کوتاه به فایل پیکربندی Remix 04:48
-
گزینههای استقرار 02:02
-
استقرار کردن یک وبسایت Remix - یک مثال (Netlify) 07:04
-
جمعبندی دوره 00:58
مشخصات آموزش
آموزش Remix.js - راهنمای عملی
- تاریخ به روز رسانی: 1404/12/10
- سطح دوره:همه سطوح
- تعداد درس:106
- مدت زمان :08:35:49
- حجم :3.12GB
- زبان:دوبله زبان فارسی
- دوره آموزشی:AI Academy