آموزش Mendix: ساخت ویجت های قابل اتصال با React Hooks

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

گیرش Giriş

• چه چیزی یاد خواهید گرفت؟ What You'll Learn?

• تاسیسات Installations

• برنامه های افزودنی کد VS ضروری Necessary VS Code Extensions

• چگونه به کدهای سخنرانی دسترسی پیدا کنیم؟ How To Access To Lecture Codes?

• آدرس دانلود Mendix 9.9.1 Mendix 9.9.1 Download URL

معرفی React Hooks React Hooks Introduction

• React چیست؟ What is React?

• پروژه First React را ایجاد کنید Create First React Project

• ساختار پروژه Project Structure

• درخت جزء Component Tree

اجزای یک ظاهر طراحی شده Styling Components

• اضافه کردن بوت استرپ Adding Bootstrap

• کامپوننت کاربر کدنویسی Coding User Component

• اجزای کارت و لوازم جانبی Card Component & Props

• کامپوننت کارت Refactor Refactor Card Component

• حلقه مولفه کارت Looping Card Component

• یک ظاهر طراحی کامپوننت ها Styling of Components

استفاده از ایالت useState

• ازState Hook استفاده کنید و UI را دوباره ترسیم کنید useState Hook and re-draw UI

• رفتارهای به‌روزرسانی وضعیت مؤلفه مادر Parent Component State Update Behaviours

• رفتار به‌روزرسانی وضعیت مؤلفه کودک Child Component State Update Behaviour

• به روز رسانی وضعیت مؤلفه والد از فرزند Update Parent Component State From Child

useContext useContext

• Prop Drilling و useContext Prop Drilling and useContext

• به روز رسانی وضعیت تغییرناپذیر Immutable State Update

استفاده از کاهش دهنده useReducer

• مقدمه ای بر استفاده از Reducer Hook Introduction to useReducer Hook

• useReducer Hook Implementation useReducer Hook Implementation

• useReducer Refactor useReducer Refactor

• استفاده از Reducer & Immer useReducer & Immer

• افزودن محصول تصادفی Add Random Product

قلاب های سفارشی Custom Hooks

• قلاب های سفارشی قابل استفاده مجدد Reusable Custom Hooks

• کامپوننت کاربر Refactor با هوک سفارشی Refactor User Component with Custom Hook

• جزء اصلی Refactor با هوک سفارشی Refactor Main Component with Custom Hook

useEffect useEffect

• معرفی useEffect useEffect Introduction

• useEffect با آرایه خالی useEffect with empty array

• useRef Hook useRef Hook

• useEffect با متغیر وابستگی useEffect with dependency variable

• استفاده از اجرای PassFirstMount usePassFirstMount implementation

مقدمه ای بر توسعه ویجت مندیکس Introduction to Mendix Widget Development

• Yeoman و Widget Generator را نصب کنید Install Yeoman and Widget Generator

• ایجاد اولین پروژه ویجت Creating First Widget Project

• آماده سازی ساختار پروژه Preparing Project Structure

انواع ویجت استاتیک Static Widget Types

• انواع ویجت استاتیک - رشته Static Widget Types - String

• همه انواع ویجت استاتیک All Static Widget Types

• نمایش انواع ویجت استاتیک Showing Static Widget Types

انواع ویجت جزء Component Widget Types

• نماد مولفه نوع ویجت Icon Component Widget Type

• انواع اجزای تصویر Image Component Types

• استفاده از عناصر از پیش تعریف شده مندیکس Using Predefined Mendix Elements

انواع ویجت پویا Dynamic Widget Types

• نوع بیان Expression Type

• نوع الگوی متن Text Template Type

• نوع ویجت جزء Component Widget Type

• نوع ویجت اقدام Action Widget Type

• نوع ویجت مشخصه Attribute Widget Type

• تنظیم مقدار ویژگی در ویجت - Big Js Set Attribute Value inside Widget - Big Js

• نوع ویجت شی Object Widget Type

ویجت - DataGrid Widget - DataGrid

• راه اندازی پروژه ویجت Setting Up Widget Project

• ایجاد مولفه طرح Layout Component Creation

• تولید داده های محصول Generate Product Data

• نوع ویجت منبع داده DataSource Widget Type

• دسترسی به لیست ویژگی های شی Accessing List Of Object Attributes

• افزودن تمام ویژگی های مرتبط Adding All Linked Attributes

• نمایش لیست محصولات در رابط کاربری Showing List Of Products On UI

• پیاده سازی هدر DataGrid DataGrid Header Implementation

• SetOffset و SetLimit SetOffset And SetLimit

• نوار بالای شبکه داده Data Grid Topbar

• قابلیت صفحه بندی Pagination Functionality

• استفاده از CSS بیشتر Applying CSS More

• شی انتخاب شده Selected Object

• اضافه کردن ویرایش حذف توابع Add Edit Remove Functions

• Microflow را اضافه کنید Add Microflow

• انتقال پارامترها به Microflow برای ویرایش Passing Params to Microflow for Editing

• حذف عملکرد Remove Functionality

ویجت - شبکه قالب قابل مرتب سازی Widget - Sortable Template Grid

• شبکه قالب قابل مرتب سازی Sortable Template Grid

بخش پاداش BONUS SECTION

• سایر دوره های مندیکس من My Other Mendix Courses