آموزش استفاده از TypeScript با React

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

معرفی Introduction

• معرفی Introduction

• معرفی Introduction

• TypeScript چیست و چرا به آن نیاز داریم؟ What is TypeScript and why we need it?

• نصب TypeScript به صورت جهانی و محلی Installing TypeScript globally and locally

• نصب TypeScript به صورت جهانی و محلی Installing TypeScript globally and locally

• گزینه های رایج کامپایلر TypeScript و tsconfig Common TypeScript compiler and tsconfig options

• گزینه های رایج کامپایلر TypeScript و tsconfig Common TypeScript compiler and tsconfig options

معرفی Introduction

• TypeScript چیست و چرا به آن نیاز داریم؟ What is TypeScript and why we need it?

TypeScript TypeScript

• معرفی بخش TypeScript TypeScript Section Introduction

• نکته ای در مورد سخنرانی بعدی برای دانشجویانی که از ویندوز استفاده می کنند A note regarding the next lecture for students who use Windows

• راه اندازی یک پروژه TypeScript ساده Setting Up a Simple TypeScript Project

• ماژول ها Modules

• ماژول ها Modules

• ماژول ها - آزمون Modules - Quiz

• انواع Types

• انواع - آزمون Types - Quiz

• انواع - آزمون Types - Quiz

• رابط ها Interfaces

• کارکرد Functions

• کلاس ها Classes

• کلاس ها - آزمون Classes - Quiz

• فیلدهای خصوصی ECMAScript ECMAScript Private Fields

• پیاده سازی رابط ها Implementing Interfaces

• پیاده سازی رابط ها Implementing Interfaces

• توصیف کلاس ها با استفاده از رابط ها Describing Classes Using Interfaces

• ژنریک ها Generics

• Generics - آزمون Generics - Quiz

• نوع اتحادیه Union Type

• نوع اتحادیه Union Type

• نوع اتحادیه - آزمون Union Type - Quiz

• نوع اتحادیه - آزمون Union Type - Quiz

• نوع تقاطع Intersection Type

• نوع تقاطع Intersection Type

• نوع تقاطع - آزمون Intersection Type - Quiz

• نوع تقاطع - آزمون Intersection Type - Quiz

• نام مستعار را تایپ کنید Type Alias

• نوع مستعار - امتحان Type Alias - Quiz

• استفاده از بسته های خارجی و انواع آنها Using External Packages and Their Types

• ادغام اعلامیه Declaration Merging

• انواع ابزار Utility Types

• انواع ابزار Utility Types

• انواع نقشه برداری شده Mapped Types

• انواع مشروط Conditional Types

• انواع مشروط Conditional Types

• نکات TypeScript TypeScript Tips

TypeScript TypeScript

• معرفی بخش TypeScript TypeScript Section Introduction

• نکته ای در مورد سخنرانی بعدی برای دانشجویانی که از ویندوز استفاده می کنند A note regarding the next lecture for students who use Windows

• راه اندازی یک پروژه TypeScript ساده Setting Up a Simple TypeScript Project

• ماژول ها - آزمون Modules - Quiz

• انواع Types

• رابط ها Interfaces

• کارکرد Functions

• کلاس ها Classes

• کلاس ها - آزمون Classes - Quiz

• فیلدهای خصوصی ECMAScript ECMAScript Private Fields

• توصیف کلاس ها با استفاده از رابط ها Describing Classes Using Interfaces

• ژنریک ها Generics

• Generics - آزمون Generics - Quiz

• نام مستعار را تایپ کنید Type Alias

• نوع مستعار - امتحان Type Alias - Quiz

• استفاده از بسته های خارجی و انواع آنها Using External Packages and Their Types

• ادغام اعلامیه Declaration Merging

• انواع نقشه برداری شده Mapped Types

• نکات TypeScript TypeScript Tips

TypeScript با React TypeScript With React

• اطلاعات بخش Section info

• اطلاعات بخش Section info

• TypeScript با معرفی بخش React TypeScript with React Section Introduction

• وب پک چیست؟ What is webpack?

• وب پک چیست؟ What is webpack?

• راه اندازی پروژه وب پک Setting up a webpack project

• راه اندازی پروژه وب پک Setting up a webpack project

• گزینه های تنظیم TypeScript TypeScript setup options

• راه اندازی TypeScript با استفاده از ts-loader Setting up TypeScript using ts-loader

• راه اندازی TypeScript با استفاده از babel-loader Setting up TypeScript using babel-loader

• راه اندازی TypeScript با استفاده از babel-loader Setting up TypeScript using babel-loader

• افزودن React Adding React

• افزودن React Adding React

• اضافه کردن نقشه منبع Adding a source map

• اضافه کردن نقشه منبع Adding a source map

• اجزای تابع Function components

• اجزای تابع Function components

• مسابقه - اجزای تابع Quiz - Function components

• راه اندازی ماژول های CSS Setting up CSS Modules

• راه اندازی ماژول های CSS Setting up CSS Modules

• وارد کردن SVG - اضافه کردن لوگو Importing SVGs - adding a logo

• وارد کردن SVG - اضافه کردن لوگو Importing SVGs - adding a logo

• اجزای کلاس Class components

• مدیریت رویدادها با استفاده از React Handling events using React

• مدیریت رویدادها با استفاده از React Handling events using React

• مسابقه - اجزای کلاس و مدیریت رویداد Quiz - Class components and event handling

• مسابقه - اجزای کلاس و مدیریت رویداد Quiz - Class components and event handling

• با استفاده از زمینه React و قلاب useState Using React context and the useState hook

• با استفاده از زمینه React و قلاب useState Using React context and the useState hook

• جایگزینی setState با useReducer Replacing setState with useReducer

• جایگزینی setState با useReducer Replacing setState with useReducer

• ذخیره اطلاعات سبد خرید در حافظه محلی (قلاب useEffect) Store cart data in local storage (useEffect hook)

• ذخیره اطلاعات سبد خرید در حافظه محلی (قلاب useEffect) Store cart data in local storage (useEffect hook)

• ایجاد یک جزء مرتبه بالاتر - بخش 1 Creating a Higher Order Component - part 1

• ایجاد یک جزء مرتبه بالاتر - بخش 2 Creating a Higher Order Component - part 2

• ایجاد یک جزء مرتبه بالاتر - بخش 2 Creating a Higher Order Component - part 2

• ایجاد کامپوننت Render Props Creating a Render Props component

• ایجاد یک قلاب سفارشی Creating a custom hook

• مدیریت رویدادهای DOM اصلی Handling original DOM events

TypeScript با React TypeScript With React

• TypeScript با معرفی بخش React TypeScript with React Section Introduction

• گزینه های تنظیم TypeScript TypeScript setup options

• راه اندازی TypeScript با استفاده از ts-loader Setting up TypeScript using ts-loader

• مسابقه - اجزای تابع Quiz - Function components

• اجزای کلاس Class components

• ایجاد یک جزء مرتبه بالاتر - بخش 1 Creating a Higher Order Component - part 1

• ایجاد کامپوننت Render Props Creating a Render Props component

• ایجاد یک قلاب سفارشی Creating a custom hook

• مدیریت رویدادهای DOM اصلی Handling original DOM events

ساخت اپلیکیشن React Redux Building a React Redux App

• معرفی بخش React Redux App Building a React Redux App Section Introduction

• معرفی بخش React Redux App Building a React Redux App Section Introduction

• اگر قبلا از Redux استفاده نکرده باشید چه؟ What if you haven't used Redux before?

• راه اندازی اولیه Initial Setup

• امتحان - راه اندازی اولیه Quiz - Initial Setup

• امتحان - راه اندازی اولیه Quiz - Initial Setup

• راه اندازی یک سرور جعلی Setting Up a Fake Server

• راه اندازی Redux Setting Up Redux

• امتحان - راه اندازی Redux Quiz - Setting Up Redux

• امتحان - راه اندازی Redux Quiz - Setting Up Redux

• ایجاد جزء ضبط Creating the Recorder Component

• ایجاد جزء ضبط Creating the Recorder Component

• مسابقه - ایجاد جزء ضبط Quiz - Creating the Recorder Component

• ایجاد مؤلفه فهرست رویداد Creating the Event List Component

• ایجاد مؤلفه فهرست رویداد Creating the Event List Component

• بارگیری رویدادها - قسمت 1 Loading Events - Part 1

• مسابقه - بارگیری رویدادها - قسمت 1 Quiz - Loading Events - Part 1

• مهم - لطفاً قبل از ادامه دادن به سخنرانی بعدی، این سخنرانی را بخوانید IMPORTANT - please read this lecture before continuing to the next one

• بارگیری رویدادها - قسمت 2 (با استفاده از اتصال) Loading Events - Part 2 (using connect)

• بارگیری رویدادها - قسمت 2 (با استفاده از اتصال) Loading Events - Part 2 (using connect)

• مسابقه - بارگیری رویدادها - قسمت 2 Quiz - Loading Events - Part 2

• ایجاد رویدادها Creating Events

• ایجاد رویدادها Creating Events

• مسابقه - ایجاد رویدادها Quiz - Creating Events

• مسابقه - ایجاد رویدادها Quiz - Creating Events

• حذف رویدادها Deleting Events

• ویرایش عناوین Editing Titles

• ویرایش عناوین Editing Titles

• لینک های مفید Useful Links

ساخت اپلیکیشن React Redux Building a React Redux App

• اگر قبلا از Redux استفاده نکرده باشید چه؟ What if you haven't used Redux before?

• راه اندازی اولیه Initial Setup

• راه اندازی یک سرور جعلی Setting Up a Fake Server

• راه اندازی Redux Setting Up Redux

• مسابقه - ایجاد جزء ضبط Quiz - Creating the Recorder Component

• بارگیری رویدادها - قسمت 1 Loading Events - Part 1

• مسابقه - بارگیری رویدادها - قسمت 1 Quiz - Loading Events - Part 1

• مهم - لطفاً قبل از ادامه دادن به سخنرانی بعدی، این سخنرانی را بخوانید IMPORTANT - please read this lecture before continuing to the next one

• مسابقه - بارگیری رویدادها - قسمت 2 Quiz - Loading Events - Part 2

• حذف رویدادها Deleting Events

• لینک های مفید Useful Links

ساخت اپلیکیشن Tasks Building the Tasks App

• مقدمه بخش ساخت اپلیکیشن Tasks Building the Tasks App Section Introduction

• منابعی برای کمک به شما برای شروع با Next.js (اختیاری) Resources to help you get started with Next.js (Optional)

• نکات بخش (اختیاری) Section tips (Optional)

• نکات بخش (اختیاری) Section tips (Optional)

• راه اندازی یک پروژه Next.js با TypeScript Setting up a Next.js project with TypeScript

• راه اندازی یک پروژه Next.js با TypeScript Setting up a Next.js project with TypeScript

• توضیح گزینه های tsconfig Explaining the tsconfig options

• توضیح گزینه esModuleInterop Explaining the esModuleInterop option

• توضیح گزینه esModuleInterop Explaining the esModuleInterop option

• مهم: به روز رسانی کتابخانه. لطفا ابتدا این مقاله را بخوانید Important: library updates. Please read this article first

• مهم: به روز رسانی کتابخانه. لطفا ابتدا این مقاله را بخوانید Important: library updates. Please read this article first

• راه اندازی مسیر GraphQL API Setting up the GraphQL API route

• راه اندازی یک سرور محلی MySQL Setting up a local MySQL server

• راه اندازی یک سرور محلی MySQL Setting up a local MySQL server

• ایجاد حل‌کننده‌ها برای پرس و جو "وظایف" و جهش "createTask". Creating resolvers for the "tasks" query and "createTask" mutation

• اضافه کردن تولید کننده کد GraphQL برای قسمت پشتی Adding GraphQL code generator for the back end

• اتمام API GraphQL Finishing the GraphQL API

• راه اندازی آپولو کلاینت Setting up Apollo Client

• راه اندازی آپولو کلاینت Setting up Apollo Client

• تولید انواع برای قسمت جلویی Generating types for the front end

• تولید انواع برای قسمت جلویی Generating types for the front end

• اضافه کردن سبک ها Adding styles

• اضافه کردن سبک ها Adding styles

• افزودن فرم برای ایجاد وظایف Adding the form for creating tasks

• افزودن فرم برای ایجاد وظایف Adding the form for creating tasks

• اجرای جهش "createTask". Running the "createTask" mutation

• اجرای جهش "createTask". Running the "createTask" mutation

• افزودن فرم برای به روز رسانی وظایف Adding the form for updating tasks

• اجرای جهش "updateTask". Running the "updateTask" mutation

• اجرای جهش "updateTask". Running the "updateTask" mutation

• حذف وظایف Deleting tasks

• فیلتر کردن وظایف بر اساس وضعیت کار Filtering tasks by task status

• فیلتر کردن وظایف بر اساس وضعیت کار Filtering tasks by task status

• علامت گذاری وظایف به عنوان انجام شده Marking the tasks as completed

• استفاده از یک صفحه برای ارائه لیست وظایف Using a single page to render the tasks list

• استفاده از یک صفحه برای ارائه لیست وظایف Using a single page to render the tasks list

ساخت اپلیکیشن Tasks Building the Tasks App

• مقدمه بخش ساخت اپلیکیشن Tasks Building the Tasks App Section Introduction

• منابعی برای کمک به شما برای شروع با Next.js (اختیاری) Resources to help you get started with Next.js (Optional)

• توضیح گزینه های tsconfig Explaining the tsconfig options

• راه اندازی مسیر GraphQL API Setting up the GraphQL API route

• ایجاد حل‌کننده‌ها برای پرس و جو "وظایف" و جهش "createTask". Creating resolvers for the "tasks" query and "createTask" mutation

• اضافه کردن تولید کننده کد GraphQL برای قسمت پشتی Adding GraphQL code generator for the back end

• اتمام API GraphQL Finishing the GraphQL API

• افزودن فرم برای به روز رسانی وظایف Adding the form for updating tasks

• حذف وظایف Deleting tasks

• علامت گذاری وظایف به عنوان انجام شده Marking the tasks as completed

چیت شیت ها Cheatsheets

• استفاده از TypeScript با React Using TypeScript with React

• استفاده از TypeScript با React Using TypeScript with React

• استفاده از TypeScript با Next.js (به روز شده) Using TypeScript with Next.js (Updated)

• استفاده از TypeScript با Next.js (به روز شده) Using TypeScript with Next.js (Updated)

• [LEGACY] با استفاده از TypeScript با Next.js [LEGACY] Using TypeScript with Next.js

• [LEGACY] با استفاده از TypeScript با Next.js [LEGACY] Using TypeScript with Next.js

چیت شیت ها Cheatsheets