آموزش Material UI - The Complete Guide With React (2023) Edition

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

معرفی Introduction

• به دوره آموزشی Material UI خوش آمدید! Welcome To Material UI Course!

• معرفی Introduction

• به انجمن Discord For Engagements بپیوندید Join Discord Community For Engagements

راه اندازی محیط Setting Up Environment

• ایجاد اپلیکیشن Fresh React Creating Fresh React App

• نصب رابط کاربری Material Installing Material UI

• راه اندازی کامل شد Setup Complete

• منابع Resources

غواصی به اجزای UI Material یکی یکی Diving into Material UI Components One By One

• تایپوگرافی Typography

• دکمه ها Buttons

• TextFields - ورودی متن TextFields - Text Input

رسیدگی به فرم Form Handling

• مدیریت فرم با فیلدهای متنی Form Handling With TextFields

• مدیریت فرم - چک باکس ها Form Handling - Checkboxes

• مدیریت فرم - کشویی را انتخاب کنید Form Handling - Select Dropdown

• مدیریت فرم - دکمه های رادیویی Form Handling - Radio Buttons

• خلاصه Summary

اجزای نوار ناوبری هدر Header Navigation Bar Components

• App Bar And Toolbar AppBar And Toolbar

• زبانه ها Tabs

• اجزای منو و آیتم منو برای فهرست منو Menu and MenuItem Components For Menu List

• خلاصه Summary

اجزای پیشرفته Advance Components

• کارت Card

• گفتگو Dialog

• مدال ها Modals

• ارتباط دادن Link

• ظرف Container

• فهرست کنید List

• آکاردئون Accordion

• تکمیل خودکار Autocomplete

• کشو Drawer

• هشدار Alert

• اسنک بار Snackbar

• نوار پیشرفت Progress Bar

• رتبه بندی Rating

• ImageList ImageList

اعتبارسنجی پیشرفته با فرم React Hook Advanced Validations With React Hook Form

• اعتبار سنجی با فرم React Hook Validation With React Hook Form

شبکه داده Data Grid

• شبکه داده Data Grid

شبکه داده های پیشرفته با پروژه Advanced Data Grid With Project

• معرفی و نسخه ی نمایشی پروژه Project Intro And Demo

• دریافت داده های ساختگی برای پروژه Getting Dummy Data For Project

• تعریف عملکرد سفارشی برای ردیف ها با RenderCell Defining Custom Functionality For Rows With RenderCell

• فعال کردن عملکردهای پویا با RenderCell Enabling Dynamic Functionalities With RenderCell

• صادرات داده های DataGrid Exporting Data Of DataGrid

• افزودن فیلترهای جستجو و ردیف Adding Search And Row Filters

• فعال کردن سفارشی سازی های بیشتر DataGrid با استفاده از کامپوننت ها/اسلات ها Enabling More Customizations of DataGrid Using Components/Slots

• تکمیل پروژه با سفارشی سازی های بیشتر Completing Project With More Customizations

• خلاصه Summary

تم و استایل Theming and Styling

• تم ارائه دهنده ThemeProvider

• عملکرد مدل دار Styled Function

یک ظاهر طراحی پیشرفته با عملکرد مدل‌دهی شده Advance Styling with styled function

• یک ظاهر طراحی پیشرفته کامپوننت با موضوع Advance Component Styling With Theme

• تفاوت بین sx prop و styled function The difference between sx prop and styled function

حالت تاریک/حالت روشن Dark Mode / Light Mode

• حالت تاریک و روشن Dark and Light Mode

نمادها Icons

• آیکون ها چیست؟ What are icons?

• نمادهای رابط کاربری مواد Material UI Icons

سیستم شبکه ای Grid System

• سیستم شبکه ای Grid System

پیشرفته - سبک های پاسخگو Advanced - Responsive Styles

• معرفی Introduction

• همه چیز درباره پاسخگویی و تنظیم متن پاسخگو All About Responsiveness & Setting Responsive Text

• پاسخگو کردن هر جزء Making Any Component Responsive

• استفاده از سبک های پرس و جو رسانه - useMediaQuery Hook Using Media Query Styles - useMediaQuery Hook

پروژه GRID - نوار ناوبری پاسخگو با رابط کاربری متریال بسازید GRID Project - Build Responsive Navigation Bar With Material UI

• نمای کلی سیستم GRID GRID System Overview

• مقدمه و بررسی اجمالی Introduction and Overview

• راه اندازی محیط توسعه Setting up development environment

• هدر پاسخگو ساختمان Building Responsive Header

• تکمیل درخواست Completing Application

(Material UI Official) نوار ناوبری پاسخگو با Flexbox (Material UI Official) Responsive Navigation bar With Flexbox

• مقدمه و بررسی اجمالی Introduction and Overview

• راه اندازی محیط توسعه Setting Up Development Environment

• ایجاد هدر با نوار ابزار و نوار ابزار Creating Header with Navbar and Toolbar

• اضافه کردن لینک ها و دکمه ها Adding Links and Buttons

• پاسخگو کردن - اضافه کردن کشو Making it Responsive - Adding Drawer

• با استفاده از پرس و جو رسانه و نقاط شکست Using Media query and Breakpoints

صفحه ورود/ثبت نام با رابط کاربری Material Login / Signup Page With Material UI

• طراحی فرم ورود و ثبت نام Login And Signup Form Design

• مقدمه و بررسی اجمالی Introduction and Overview

• طراحی طرح بندی فرم Designing Form Layout

• افزودن حالت برای جابه‌جایی بین فرم‌ها Adding State To Switch Between Forms

• مدیریت داده های فرم Handling Form Data

• اضافه کردن آیکون ها Adding Icons

• خلاصه Summary

پروژه اصلی (طراحی صفحه اصلی UI UX مدرن یک برنامه نرم افزاری) Major Project (Design Modern UI UX Homepage of a Software Application)

• معرفی و نسخه ی نمایشی پروژه Introduction and Demo Of Project

• ایجاد اپلیکیشن Fresh React Creating Fresh React App

• هدر ساختمان افزودن نوار ناوبری و لوگو Building Header Adding Navbar and Logo

• هدر - رندر کردن پیوندها و دکمه ها Header - Rendering Links and Buttons

• اضافه کردن انیمیشن ها Adding Animations

• افزودن بخش نمای کلی محتوا Adding Content Overview Section

• بخش محتوای یک ظاهر طراحی شده Styling Content Section

• اضافه کردن پاورقی Adding Footer

• بهینه سازی 1 - هدر پاسخگو Optimization 1 - Responsive Header

• بهینه سازی 2 - اندازه فونت پاسخگو Optimization 2 - Responsive Font Sizes

• بهینه سازی 3 - رفع چینش محتوا Optimization 3 - Content Layout Fix

• بهینه سازی 4 - رفع پاورقی Optimization 4 - Footer Fix

• رفع اولیه Basic Fix

• GIFT - اضافه کردن فونت Google با مؤلفه سبک MUI GIFT - Adding Google Font With MUI Styled Component

• خلاصه Summary

رابط کاربری مواد با تایپ اسکریپت Material UI With Typescript

• MUI با معرفی Typescript MUI with Typescript Intro

• نصب برنامه جدید React با Typescript Installing New React App With Typescript

• ایجاد شی استایل جداگانه با انواع Creating separate styles object with types

• پذیرش لوازم MUI Accepting MUI props

یک پروژه بزرگ کامل (برنامه ارسال وبلاگ سفر) A Major Full Stack Project ( Travel Blog Posting Application )

• معرفی Introduction

• بررسی اجمالی موضوعات Backend Backend Topics Overview

• نرم افزار WorkFlow Application WorkFlow

• ایجاد Simple NodeJS و ExpressJS Application API Creating Simple NodeJS and ExpressJS Application API

• اتصال به MongoDB Connecting To MongoDB

• ایجاد مدل کاربر و مسیرها Creating User Model and Routes

• درخواست ثبت نام پست کاربر User Post Signup Request

• درخواست ورود کاربر به پست User Post Login Request

• انتقال به پست ها Moving Into Posts

• دریافت BlogPost با شناسه Getting BlogPost By ID

• به روز رسانی بلاگ پست Updating BlogPost

• حذف بلاگ پست Deleting BlogPost

• افزودن روابط و ارتباطات با کاربران و پست های وبلاگ Adding Relations and Connections With User and BlogPosts

• Backend کامل شد Backend Complete

• ایجاد React App Creating React App

• هدر پاسخگو ساختمان Building Responsive Header

• افزودن لینک به سربرگ Adding Links To Header

• افزودن روتر React برای ناوبری واقعی Adding React Router For Real Navigation

• ساخت صفحه اصلی - اضافه کردن تصویر ویژه Building HomePage - Adding Featured Image

• اضافه کردن فونت های گوگل برای فونت های مختلف Adding Google Fonts For Different Fonts

• اضافه کردن طرح کارت قابل استفاده مجدد برای پیاده سازی لیست Adding Reusable Card Layout For List Implementation

• طراحی کارت بلاگ پست Designing BlogPost Card

• فراخوانی API برای دریافت همه پست ها Calling API To get All Posts

• افزودن داده های واقعی در کارت ها Adding Real Data In Cards

• طراحی فرم احراز هویت Designing Authentication Form

• مدیریت دینامیک داده های فرم Handling Form Data Dynamically

• ارسال درخواست احراز هویت به Backend Sending Authentication Request To Backend

• پیاده سازی Redux State Management برای احراز هویت Implementing Redux State Management For Authentication

• ارسال شناسه ها به Redux و ذخیره شناسه ها در محل ذخیره سازی Dispatching IDs to Redux and Storing IDs in Local Storage

• به روز رسانی پویا لینک های هدر پس از احراز هویت Dynamically Updating Header Links After Authentication

• طراحی صفحه افزودن وبلاگ پست Designing Add Blogpost page

• رسیدگی به فرم افزودن Handling Add Form

• ارسال درخواست POST برای درج یک وبلاگ پست Sending POST Request To Insert a BlogPost

• دریافت پست ها از URL Fetching Posts From URL

• ارسال به روز رسانی/ویرایش درخواست BlogPost Sending Update / Edit BlogPost Request

• افزودن قابلیت حذف وبلاگ پست با اعلان ها Adding Delete Blogpost Functionality With Notifications

• تغییر کنترلر Backend برای دریافت جزئیات با پست های وبلاگ Modifying Backend Controller To Get Details With Blogposts

• طراحی صفحه پروفایل Designing Profile Page

• بهینه سازی 1 رفع محتوا، ساده کردن منطق Optimization 1 Fixing Content, Simplifying Logics

• بهینه سازی نهایی Final Optimization

• خلاصه Summary