آموزش Remix.js - راهنمای عملی

سرفصل ها و درس ها

معرفی Introduction

• به دوره خوش آمدید! Welcome to the Course!

• به دوره خوش آمدید! Welcome to the Course!

• ریمیکس چیست؟ و چرا از ریمیکس استفاده می کنید؟ What Is Remix? And Why Would You Use Remix?

• ریمیکس در مقابل NextJS Remix vs NextJS

• ریمیکس در مقابل NextJS Remix vs NextJS

• درباره دوره About The Course

• چگونه از این دوره بیشترین بهره را ببرید How To Get The Most Out Of This Course

• چگونه از این دوره بیشترین بهره را ببرید How To Get The Most Out Of This Course

• انجمن پیوست ها و اختلاف Attachments & Discord Community

معرفی Introduction

• ریمیکس چیست؟ و چرا از ریمیکس استفاده می کنید؟ What Is Remix? And Why Would You Use Remix?

• درباره دوره About The Course

• انجمن پیوست ها و اختلاف Attachments & Discord Community

Remix Essentials - Core Concepts Remix Essentials - Core Concepts

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• ایجاد یک پروژه ریمیکس Creating a Remix Project

• تجزیه و تحلیل پروژه ایجاد شده Analyzing the Created Project

• تجزیه و تحلیل پروژه ایجاد شده Analyzing the Created Project

• حل مشکلات با راه اندازی سرور توسعه Solving Issues with Starting the Development Server

• شروع به کار با مسیریابی مبتنی بر فایل Getting Started with File-based Routing

• افزودن لینک و ساخت SPA (برنامه تک صفحه ای) Adding Links & Building a SPA (Single-Page Application)

• افزودن لینک و ساخت SPA (برنامه تک صفحه ای) Adding Links & Building a SPA (Single-Page Application)

• پیش به سوی یک پروژه بهتر Onwards to a Better Project

• پیش به سوی یک پروژه بهتر Onwards to a Better Project

• استایل کردن صفحات و درک مسیر ریشه Styling Pages & Understanding the Root Route

• استایل کردن صفحات و درک مسیر ریشه Styling Pages & Understanding the Root Route

• سبک های کامپوننت روکش Surfacing Component Styles

• سبک های کامپوننت روکش Surfacing Component Styles

• سبک دادن به پیوندهای فعال از طریق NavLink Styling Active Links via NavLink

• سبک دادن به پیوندهای فعال از طریق NavLink Styling Active Links via NavLink

• نحوه ارسال فرم ها How Form Submissions Work

• نحوه ارسال فرم ها How Form Submissions Work

• مدیریت فرم سمت سرور از طریق action() Server-side Form Handling via action()

• اضافه کردن کد Backend و تغییر مسیر Adding Backend Code & Redirecting

• واکشی داده های صفحه از طریق loader() Fetching Page Data via loader()

• واکشی داده های صفحه از طریق loader() Fetching Page Data via loader()

• برگرداندن و استفاده از داده های واکشی شده Returning & Using Fetched Data

• برگرداندن و استفاده از داده های واکشی شده Returning & Using Fetched Data

• از <form> تا <Form> From <form> to <Form>

• ارائه بازخورد کاربر از طریق useNavigation Providing User Feedback via useNavigation

• اعتبارسنجی ورودی و برگرداندن داده در عمل () Validating Input & Returning Data in action()

• اعتبارسنجی ورودی و برگرداندن داده در عمل () Validating Input & Returning Data in action()

• مدیریت خطا از طریق ErrorBoundary Error Handling via ErrorBoundary

• مدیریت خطا از طریق ErrorBoundary Error Handling via ErrorBoundary

• رسیدگی به پاسخ های خطا از طریق CatchBoundary Handling Error Responses via CatchBoundary

• افزودن مسیرهای پویا و مسیرهای مشخص شده با نقطه Adding Dynamic Routes & Dot-delimited Routes

• واکشی داده برای مسیرهای پویا Fetching Data for Dynamic Routes

• یک مثال دیگر از CatchBoundary Another CatchBoundary Example

• تنظیم فراداده صفحه Setting Page Metadata

• تنظیم فراداده صفحه Setting Page Metadata

• خلاصه Summary

• خلاصه Summary

Remix Essentials - Core Concepts Remix Essentials - Core Concepts

• معرفی ماژول Module Introduction

• ایجاد یک پروژه ریمیکس Creating a Remix Project

• حل مشکلات با راه اندازی سرور توسعه Solving Issues with Starting the Development Server

• شروع به کار با مسیریابی مبتنی بر فایل Getting Started with File-based Routing

• مدیریت فرم سمت سرور از طریق action() Server-side Form Handling via action()

• اضافه کردن کد Backend و تغییر مسیر Adding Backend Code & Redirecting

• از <form> تا <Form> From <form> to <Form>

• ارائه بازخورد کاربر از طریق useNavigation Providing User Feedback via useNavigation

• رسیدگی به پاسخ های خطا از طریق CatchBoundary Handling Error Responses via CatchBoundary

• افزودن مسیرهای پویا و مسیرهای مشخص شده با نقطه Adding Dynamic Routes & Dot-delimited Routes

• واکشی داده برای مسیرهای پویا Fetching Data for Dynamic Routes

• یک مثال دیگر از CatchBoundary Another CatchBoundary Example

مسیریابی و طرح‌بندی - شیرجه عمیق Routing & Layouts - Deep Dive

• معرفی ماژول Module Introduction

• آنچه ما خواهیم ساخت - نسخه ی نمایشی What We'll Build - A Demo

• برنامه ریزی و ایجاد پروژه Project Planning & Creation

• ایجاد مسیرهای پروژه - یک تجدید کننده Creating Project Routes - A Refresher

• ایجاد مسیرهای پروژه - یک تجدید کننده Creating Project Routes - A Refresher

• مسیرهای تودرتو - یک رویکرد جایگزین Nested Paths - An Alternative Approach

• مسیرهای طرح بندی Layout Routes

• مسیرهای طرح بندی Layout Routes

• افزودن اجزا و استایل Adding Components & Styling

• افزودن اجزا و استایل Adding Components & Styling

• استفاده از فونت های سفارشی Using Custom Fonts

• استفاده از فونت های سفارشی Using Custom Fonts

• کار بر روی مسیرهای بیشتر Working on More Routes

• صفحات بازاریابی و تصاویر ثابت Marketing Pages & Static Images

• صفحات بازاریابی و تصاویر ثابت Marketing Pages & Static Images

• استفاده از طرح‌بندی‌ها Leveraging Layouts

• استفاده از طرح‌بندی‌ها Leveraging Layouts

• ارائه یک صفحه مودال (صفحه همپوشانی) Rendering a Modal Page (Overlay Page)

• افزودن لینک ها Adding Links

• مسیرها: مطلق در مقابل نسبی Paths: Absolute vs Relative

• پیمایش به صورت برنامه ای Navigating Programmatically

• پیمایش به صورت برنامه ای Navigating Programmatically

• افزودن NavLinks Adding NavLinks

• افزودن NavLinks Adding NavLinks

• معرفی Pathless Layout Routes Introducing Pathless Layout Routes

• معرفی Pathless Layout Routes Introducing Pathless Layout Routes

• انجام کارهای بیشتر با Pathless Layout Routes Doing More with Pathless Layout Routes

• معرفی مسیرهای منابع Introducing Resource Routes

• معرفی مسیرهای منابع Introducing Resource Routes

• درک مسیرهای Splat Understanding Splat Routes

• درک مسیرهای Splat Understanding Splat Routes

• کار با پارامترهای جستجوی URL (پارامترهای پرس و جو) Working with URL Search Parameters (Query Parameters)

• کار با پارامترهای جستجوی URL (پارامترهای پرس و جو) Working with URL Search Parameters (Query Parameters)

• افزودن لینک های مرتبط با هزینه بیشتر Adding More Expense-related Links

• افزودن لینک های مرتبط با هزینه بیشتر Adding More Expense-related Links

• خلاصه ماژول Module Summary

مسیریابی و طرح‌بندی - شیرجه عمیق Routing & Layouts - Deep Dive

• معرفی ماژول Module Introduction

• آنچه ما خواهیم ساخت - نسخه ی نمایشی What We'll Build - A Demo

• برنامه ریزی و ایجاد پروژه Project Planning & Creation

• مسیرهای تودرتو - یک رویکرد جایگزین Nested Paths - An Alternative Approach

• کار بر روی مسیرهای بیشتر Working on More Routes

• ارائه یک صفحه مودال (صفحه همپوشانی) Rendering a Modal Page (Overlay Page)

• افزودن لینک ها Adding Links

• مسیرها: مطلق در مقابل نسبی Paths: Absolute vs Relative

• انجام کارهای بیشتر با Pathless Layout Routes Doing More with Pathless Layout Routes

• خلاصه ماژول Module Summary

واکشی داده و جهش - شیرجه عمیق Data Fetching & Mutations - Deep Dive

• معرفی ماژول Module Introduction

• راه اندازی پروژه و پایگاه داده (MongoDB). Project & Database (MongoDB) Setup

• افزودن پریسما (بسته ای برای پرس و جو از پایگاه داده) Adding Prisma (A Package For Querying the Database)

• اضافه کردن یک مدل داده هزینه Adding an Expense Data Model

• تهیه کد برای ارسال فرم Preparing the Code for Form Submissions

• اضافه کردن یک تابع "addExpense" سمت سرور Adding a Server-side "addExpense" Function

• اضافه کردن یک تابع "addExpense" سمت سرور Adding a Server-side "addExpense" Function

• اضافه کردن هزینه ها به پایگاه داده (از طریق action()) Adding Expenses to the Database (via action())

• افزودن اعتبار سنجی سمت سرور Adding Server-side Validation

• ارسال فرم ها به صورت برنامه ای Submitting Forms Programmatically

• افزودن بازخورد ارسال تصویری Adding Visual Submission Feedback

• افزودن بازخورد ارسال تصویری Adding Visual Submission Feedback

• واکشی هزینه ها (از طریق لودر()) Fetching Expenses (via loader())

• لودرها - نگاهی دقیق تر Loaders - A Closer Look

• لودرها - نگاهی دقیق تر Loaders - A Closer Look

• بارگیری یک هزینه واحد (از طریق پارامترهای مسیر پویا) Loading a Single Expense (via Dynamic Route Parameters)

• بارگیری یک هزینه واحد (از طریق پارامترهای مسیر پویا) Loading a Single Expense (via Dynamic Route Parameters)

• لودرهای تودرتو چگونه اجرا می شوند How Nested Loaders Are Executed

• لودرهای تودرتو چگونه اجرا می شوند How Nested Loaders Are Executed

• استفاده از داده های بارگذار والد از طریق useMatches() Using Parent Loader Data via useMatches()

• به روز رسانی داده ها Updating Data

• حذف داده ها Deleting Data

• حذف داده ها Deleting Data

• یک اقدام - چند فرم One Action - Multiple Forms

• یک اقدام - چند فرم One Action - Multiple Forms

• ارسال برنامه‌ای "Behind-the-Scenes" از طریق useFetcher() Programmatic "Behind-the-Scenes" Submission via useFetcher()

• استخراج پارامترهای جستجو Extracting Search Parameters

• استخراج پارامترهای جستجو Extracting Search Parameters

• افزودن بازخورد بصری به فرم احراز هویت Adding Visual Feedback to the Authentication Form

• افزودن بازخورد بصری به فرم احراز هویت Adding Visual Feedback to the Authentication Form

• افزودن یک سند ریشه مشترک Adding a Shared Root Document

• افزودن پیش‌فرض منطق مدیریت خطا Adding Default Error Handling Logic

• مدیریت خطاها بدون ErrorBoundary یا CatchBoundary Handling Errors Without ErrorBoundary or CatchBoundary

• مدیریت خطاهای درون کامپوننت ها Managing Errors Inside Components

• مدیریت خطاهای درون کامپوننت ها Managing Errors Inside Components

• زمان تمرین - چالش Practice Time - Challenge

• زمان تمرین - چالش Practice Time - Challenge

• زمان تمرین - راه حل Practice Time - Solution

• زمان تمرین - راه حل Practice Time - Solution

• به روز رسانی هزینه ها/مسیر خام Updating the expenses/raw Route

• به روز رسانی هزینه ها/مسیر خام Updating the expenses/raw Route

• خلاصه ماژول Module Summary

واکشی داده و جهش - شیرجه عمیق Data Fetching & Mutations - Deep Dive

• معرفی ماژول Module Introduction

• راه اندازی پروژه و پایگاه داده (MongoDB). Project & Database (MongoDB) Setup

• افزودن پریسما (بسته ای برای پرس و جو از پایگاه داده) Adding Prisma (A Package For Querying the Database)

• اضافه کردن یک مدل داده هزینه Adding an Expense Data Model

• تهیه کد برای ارسال فرم Preparing the Code for Form Submissions

• اضافه کردن هزینه ها به پایگاه داده (از طریق action()) Adding Expenses to the Database (via action())

• افزودن اعتبار سنجی سمت سرور Adding Server-side Validation

• ارسال فرم ها به صورت برنامه ای Submitting Forms Programmatically

• واکشی هزینه ها (از طریق لودر()) Fetching Expenses (via loader())

• استفاده از داده های بارگذار والد از طریق useMatches() Using Parent Loader Data via useMatches()

• به روز رسانی داده ها Updating Data

• ارسال برنامه‌ای "Behind-the-Scenes" از طریق useFetcher() Programmatic "Behind-the-Scenes" Submission via useFetcher()

• افزودن یک سند ریشه مشترک Adding a Shared Root Document

• افزودن پیش‌فرض منطق مدیریت خطا Adding Default Error Handling Logic

• مدیریت خطاها بدون ErrorBoundary یا CatchBoundary Handling Errors Without ErrorBoundary or CatchBoundary

افزودن احراز هویت کاربر Adding User Authentication

• معرفی ماژول Module Introduction

• راه اندازی پروژه Project Setup

• احراز هویت کاربر چگونه کار می کند؟ How Does User Authentication Work?

• احراز هویت کاربر چگونه کار می کند؟ How Does User Authentication Work?

• آماده سازی پایگاه داده Preparing the Database

• افزودن اعتبارسنجی سمت سرور Adding Server-side Credentials Validation

• افزودن اعتبارسنجی سمت سرور Adding Server-side Credentials Validation

• کاربران و ایمیل های موجود را بررسی کنید Check for Existing Users & Emails

• کاربران و ایمیل های موجود را بررسی کنید Check for Existing Users & Emails

• ثبت نام کاربر و هش کردن رمز عبور User Signup & Password Hashing

• ثبت نام کاربر و هش کردن رمز عبور User Signup & Password Hashing

• شروع با ورود کاربر Getting Started with User Login

• شروع با ورود کاربر Getting Started with User Login

• جلسات و کوکی ها - آماده سازی Sessions & Cookies - Preparation

• جلسات و کوکی ها - آماده سازی Sessions & Cookies - Preparation

• ایجاد کوکی های جلسه Creating Session Cookies

• استخراج داده‌های جلسه و ارائه رابط‌های کاربری مشروط Extracting Session Data & Rendering Conditional User Interfaces

• استخراج داده‌های جلسه و ارائه رابط‌های کاربری مشروط Extracting Session Data & Rendering Conditional User Interfaces

• اضافه کردن خروج Adding Logout

• اضافه کردن خروج Adding Logout

• حفاظت از مسیرها Protecting Routes

• حفاظت از مسیر بیشتر More Route Protection

• اتصال هزینه ها و کاربران Connecting Expenses & Users

• خلاصه ماژول Module Summary

• خلاصه ماژول Module Summary

افزودن احراز هویت کاربر Adding User Authentication

• معرفی ماژول Module Introduction

• راه اندازی پروژه Project Setup

• آماده سازی پایگاه داده Preparing the Database

• ایجاد کوکی های جلسه Creating Session Cookies

• حفاظت از مسیرها Protecting Routes

• حفاظت از مسیر بیشتر More Route Protection

• اتصال هزینه ها و کاربران Connecting Expenses & Users

• خلاصه ماژول Module Summary

بهینه سازی و استقرار برنامه های Remix Optimizing & Deploying Remix Applications

• معرفی ماژول Module Introduction

• معرفی ماژول Module Introduction

• افزودن متادیتا به مسیرها Adding Metadata To Routes

• چرا ممکن است به هدرهای پاسخ صفحه سفارشی نیاز داشته باشید؟ Why You Might Need Custom Page Response Headers

• تنظیم هدرهای پاسخ صفحه Setting Page Response Headers

• کار با هدرهای تودرتو Working with Nested Headers

• کار با هدرهای تودرتو Working with Nested Headers

• استفاده از هدرهای Action & Loader Using Action & Loader Headers

• استفاده از هدرهای Action & Loader Using Action & Loader Headers

• غیرفعال کردن جاوا اسکریپت برای برخی از صفحات Disabling JavaScript For Some Pages

• غیرفعال کردن جاوا اسکریپت برای برخی از صفحات Disabling JavaScript For Some Pages

• نگاهی کوتاه به فایل پیکربندی Remix A Brief Look at the Remix Config File

• نگاهی کوتاه به فایل پیکربندی Remix A Brief Look at the Remix Config File

• گزینه های استقرار Deployment Options

• گزینه های استقرار Deployment Options

• استقرار یک وب سایت ریمیکس - یک مثال (Netlify) Deploying a Remix Website - An Example (Netlify)

بهینه سازی و استقرار برنامه های Remix Optimizing & Deploying Remix Applications

• معرفی ماژول Module Introduction

• افزودن متادیتا به مسیرها Adding Metadata To Routes

• چرا ممکن است به هدرهای پاسخ صفحه سفارشی نیاز داشته باشید؟ Why You Might Need Custom Page Response Headers

• تنظیم هدرهای پاسخ صفحه Setting Page Response Headers

• استقرار یک وب سایت ریمیکس - یک مثال (Netlify) Deploying a Remix Website - An Example (Netlify)

خلاصه دوره Course Roundup

• خلاصه دوره Course Roundup

• سخنرانی پاداش Bonus Lecture

خلاصه دوره Course Roundup

• خلاصه دوره Course Roundup

• سخنرانی پاداش Bonus Lecture