آموزش با Material-UI و ReactJS، طرح های با دقت بالا را پیاده سازی کنید

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

معرفی Introduction

• خوش آمدی! Welcome!

• چرا Material-UI؟ Why Material-UI?

• بررسی اجمالی دوره Course Overview

• الزامات دوره Course Requirements

• مهم - اطلاعات به روز رسانی MUI IMPORTANT - MUI UPDATE INFO

• راه اندازی محیط Environment Setup

• فایل ها و منابع پروژه Project Files and Resources

آن را از بالا بگیرید - سرصفحه ها و ناوبری Take It From The Top - Headers and Navigation

• بخش 2 مقدمه Section 2 Intro

• بررسی اجمالی پروژه Project Overview

• بررسی اجمالی پروژه ادامه دارد Project Overview Continued

• بهینه سازی تصویر Image Optimization

• تمیز کردن دیگ بخار Boilerplate Cleanup

• جزء AppBar The AppBar Component

• AppBar Transitions AppBar Transitions

• رفع مهم IMPORTANT FIX

• یک ظاهر طراحی - تم (تنظیم) Styling - Themes (Setup)

• یک ظاهر طراحی - طرح‌های زمینه (طرح زمینه پیش‌فرض) Styling - Themes (Default Theme)

• استایل - تم ها (پالت) Styling - Themes (Palette)

• استایل - تم ها (تایپوگرافی) Styling - Themes (Typography)

• یک ظاهر طراحی شده - درون خطی Styling - Inline

• لوگوی AppBar AppBar Logo

• فاویکون Favicon

• مرور کلی زبانه ها Tabs Overview

• استفاده از Tabs Using Tabs

• نمای کلی دکمه ها Buttons Overview

• با استفاده از دکمه ها Using Buttons

• حالت دادن به برگه فعال Styling The Active Tab

• ناوبری با روتر React Navigation With React Router

• رفع نوسازی برگه فعال Active Tab Refresh Fix

افزودن ویژگی های هدر - منوها و طراحی پاسخگو Adding Header Features - Menus and Responsive Design

• بخش 3 مقدمه Section 3 Intro

• نمای کلی منوها Menus Overview

• مرور کلی منوها ادامه دارد Menus Overview Continued

• استفاده از منوها - راه اندازی Using Menus - Setup

• استفاده از منوها - پیمایش Using Menus - Navigation

• استفاده از منوها - یک ظاهر طراحی Using Menus - Styling

• استفاده از منوها - انتخاب Using Menus - Selection

• استفاده از منوها - رفع نوسازی Using Menus - Refresh Fix

• بررسی اجمالی طراحی پاسخگو Responsive Design Overview

• طراحی واکنشگرا ادامه دارد Responsive Design Continued

• شفاف سازی واحدهای پاسخگو -- کدام مورد استفاده شود Responsive Units Clarification -- Which To Use

• استفاده از پرسش های رسانه ای Using Media Queries

• نمای کلی کشوها Drawers Overview

• استفاده از کشوها Using Drawers

• فهرست اجمالی Lists Overview

• استفاده از لیست ها - راه اندازی Using Lists - Setup

• استفاده از لیست ها - یک ظاهر طراحی Using Lists - Styling

• استفاده از لیست ها - انتخاب Using Lists - Selection

• پاکسازی بخش Section Cleanup

• پاکسازی بخش ادامه دارد Section Cleanup Continued

• AppBar بریده شده Clipped AppBar

پایین به بالا! پاورقی ها و چیدمان های اولیه Bottoms Up! Footers and Basic Layouts

• بخش 4 مقدمه Section 4 Intro

• راه اندازی پاورقی Footer Setup

• نمای کلی شبکه Grid Overview

• نمای کلی شبکه ادامه دارد Grid Overview Continued

• استفاده از Grids - راه اندازی Using Grids - Setup

• استفاده از شبکه ها - ناوبری Using Grids - Navigation

• Refactor پاورقی Active Tab Active Tab Footer Refactor

• شبکه های پاسخگو Responsive Grids

• آیکون های رسانه های اجتماعی Social Media Icons

Hitting The Ground Running - انیمیشن ها و صفحه فرود Hitting The Ground Running - Animations and The Landing Page

• بخش 5 مقدمه Section 5 Intro

• صادرات انیمیشن و Bodymovin Animation Export & Bodymovin

• پیکربندی انیمیشن Animation Configuration

• واکنش نشان می دهد react-lottie

• ایجاد بلوک قهرمان Creating The Hero Block

• یک ظاهر طراحی شده به بلوک قهرمان Styling The Hero Block

• استایلینگ The Hero Block ادامه دارد Styling The Hero Block Continued

• ایجاد بلوک خدمات - نرم افزار سفارشی Creating The Services Block - Custom Software

• ایجاد بلوک خدمات - نرم افزار سفارشی ادامه دارد Creating The Services Block - Custom Software Continued

• ایجاد بلوک خدمات - توسعه برنامه iOS/Mobile Creating The Services Block - iOS/Mobile App Development

• ایجاد بلوک خدمات - توسعه وب سایت Creating The Services Block - Website Development

• نمای کلی کارت ها Cards Overview

• ایجاد بلوک انقلاب Creating The Revolution Block

• ایجاد بلوک انقلاب ادامه دارد Creating The Revolution Block Continued

• ایجاد بلوک اطلاعاتی Creating The Information Block

• ایجاد بلوک اطلاعات ادامه دارد Creating The Information Block Continued

• ایجاد دعوت به اقدام Creating The Call To Action

• ایجاد فراخوان برای اقدام ادامه دارد Creating The Call To Action Continued

• اتمام فراخوان برای اقدام Finishing The Call To Action

• پاکسازی بخش Section Cleanup

• پاکسازی بخش ادامه دارد Section Cleanup Continued

چیدمان های پیچیده Complex Layouts

• بخش 6 مقدمه Section 6 Intro

• صفحه خدمات - نمای کلی Services Page - Overview

• صفحه خدمات - راه اندازی Services Page - Setup

• صفحه خدمات - طراحی واکنشگرا Services Page - Responsive Design

• صفحه توسعه نرم افزار سفارشی - نمای کلی Custom Software Development Page - Overview

• صفحه توسعه نرم افزار سفارشی - راه اندازی Custom Software Development Page - Setup

• صفحه توسعه نرم افزار سفارشی - نمادهای میانی Custom Software Development Page - Middle Icons

• صفحه توسعه نرم افزار سفارشی - ردیف 1 انیمیشن ها Custom Software Development Page - Animations Row 1

• صفحه توسعه نرم افزار سفارشی - ردیف 2 Custom Software Development Page - Row 2

• صفحه توسعه نرم افزار سفارشی - طراحی پاسخگو Custom Software Development Page - Responsive Design

• صفحه توسعه نرم افزار سفارشی - طراحی پاسخگو ادامه دارد Custom Software Development Page - Responsive Design Continued

• صفحه توسعه برنامه iOS/Android - نمای کلی iOS/Android App Development Page - Overview

• صفحه توسعه برنامه iOS/Android - راه اندازی iOS/Android App Development Page - Setup

• صفحه توسعه برنامه iOS/Android - طراحی پاسخگو iOS/Android App Development Page - Responsive Design

• صفحه توسعه وب سایت - نمای کلی Website Development Page - Overview

• صفحه توسعه وب سایت - راه اندازی Website Development Page - Setup

• صفحه توسعه وب سایت - طراحی واکنش گرا Website Development Page - Responsive Design

• صفحه انقلاب - بررسی اجمالی The Revolution Page - Overview

• صفحه انقلاب - فناوری و چشم انداز The Revolution Page - Technology & Vision

• صفحه انقلاب - فرآیند The Revolution Page - Process

• صفحه انقلاب - روند ادامه دارد The Revolution Page - Process Continued

• صفحه انقلاب - طراحی واکنشگرا The Revolution Page - Responsive Design

• صفحه درباره ما - نمای کلی About Us Page - Overview

• صفحه درباره ما - راه اندازی About Us Page - Setup

• صفحه درباره ما - تیم About Us Page - Team

• صفحه درباره ما - طراحی واکنشگرا About Us Page - Responsive Design

ورودی ها، اعتبارسنجی و تأیید Inputs, Validation, and Confirmation

• بخش 7 مقدمه Section 7 Intro

• نمای کلی TextField TextField Overview

• استفاده از TextFields - Setup Using TextFields - Setup

• اطلاعات تماس Contact Information

• استفاده از فیلدهای متنی - مقادیر کنترل شده حالت Using TextFields - State Controlled Values

• استفاده از TextFields - Styling Using TextFields - Styling

• استفاده از TextFields - یک ظاهر طراحی شده ادامه دارد Using TextFields - Styling Continued

• استفاده از TextFields - طراحی واکنشگرا Using TextFields - Responsive Design

• استفاده از TextFields - اعتبار سنجی Using TextFields - Validation

• استفاده از TextFields - اعتبار سنجی ادامه دارد Using TextFields - Validation Continued

• بررسی اجمالی گفتگوها Dialogs Overview

• استفاده از Dialogs - Setup Using Dialogs - Setup

• استفاده از Dialogs - Styling Using Dialogs - Styling

• پاکسازی بخش Section Cleanup

توابع Google Cloud Google Cloud Functions

• بخش 8 مقدمه Section 8 Intro

• نمای کلی Firebase Firebase Overview

• راه اندازی Firebase Firebase Setup

• نمای کلی Nodemailer Nodemailer Overview

• تغییر خط مشی صورتحساب Firebase Firebase Billing Policy Change

• با استفاده از Nodemailer Using Nodemailer

• رفع نود میلر Nodemailer Fix

درخواست های شبکه Network Requests

• بخش 9 مقدمه Section 9 Intro

• بررسی اجمالی و راه اندازی Axios Axios Overview & Setup

• مروری بر شاخص های پیشرفت Progress Indicators Overview

• استفاده از پیشرفت دایره ای Using Circular Progress

• بررسی اجمالی اسنک بارها Snackbars Overview

• استفاده از اسنک بار Using Snackbars

• ارسال مقادیر فرم Sending The Form Values

قرار دادن همه چیز در کنار هم - صفحه برآورد Putting It All Together - Estimate Page

• بخش 10 مقدمه Section 10 Intro

• تخمین صفحه - راه اندازی Estimate Page - Setup

• صفحه برآورد - راه اندازی ادامه دارد Estimate Page - Setup Continued

• صفحه برآورد - سوالات پویا Estimate Page - Dynamic Questions

• ناوبری سوال Question Navigation

• پیمایش سوال ادامه دارد Question Navigation Continued

• رفع ناوبری سوال Question Navigation Fix

• انتخاب چند گزینه ای Multiple Option Selection

• انتخاب تک گزینه Single Option Selection

• گفتگوی برآورد Estimate Dialog

• محاسبه برآورد هزینه Calculate Estimate Cost

• بررسی انتخاب Selection Review

• بررسی گزینش ادامه دارد Selection Review Continued

• ویژگی های بررسی انتخاب Selection Review Features

• پایان بررسی انتخاب Finishing Selection Review

• بررسی انتخاب وب سایت ها رفع می شود Selection Review Websites Fix

• طراحی واکنشگرا ادامه دارد Responsive Design Continued

• ارسال تخمین Sending The Estimate

• ارسال برآورد ادامه دارد Sending The Estimate Continued

• غیرفعال کردن دکمه تخمین Disabling The Estimate Button

• ارسال The Estimate Cleanup Sending The Estimate Cleanup

بهینه سازی موتورهای جستجو (SEO) Search Engine Optimization (SEO)

• بخش 11 مقدمه Section 11 Intro

• نمای کلی Next.js Next.js Overview

• رفع مهم NEXTJS IMPORTANT NEXTJS FIX

• مهاجرت از create-react-app به Next.js Migrate From create-react-app To Next.js

• استفاده از تصاویر استاتیک Using Static Images

• استفاده از تصاویر استاتیک ادامه دارد Using Static Images Continued

• بهینه سازی تصاویر در Next.js Optimize Images In Next.js

• افزودن پاورقی و سربرگ به Next.js Adding Footer & Header to Next.js

• رفع FOUC FOUC Fix

• برچسب های عنوان خوب Good Title Tags

• برچسب های توضیحات متا Meta Description Tags

• برچسب های OpenGraph OpenGraph Tags

• برچسب های متعارف Canonical Tags

• Robots.txt و Sitemap.xml Robots.txt and Sitemap.xml

پشتیبانی از مرورگرهای مختلف Cross-Browser Support

• بخش 12 مقدمه Section 12 Intro

• نکته مهم - برای همه مرورگرها تماشا کنید! Important Note - Watch For All Browsers!

• پشتیبانی سافاری Safari Support

• پشتیبانی سافاری ادامه دارد Safari Support Continued

• پشتیبانی فایرفاکس Firefox Support

• پشتیبانی مایکروسافت اج Microsoft Edge Support

• پشتیبانی از اینترنت اکسپلورر Internet Explorer Support

گسترش Deployment

• بخش 13 مقدمه Section 13 Intro

• هیروکو Heroku

• URL های سفارشی در Heroku Custom URLs on Heroku

• اکنون Now

تجزیه و تحلیل ترافیک گوگل Google Analytics

• مهم - به‌روزرسانی Google Analytics IMPORTANT - Google Analytics Update

• بخش 14 مقدمه Section 14 Intro

• راه اندازی حساب و react-ga Account Setup and react-ga

• فیلتر کردن و ردیابی صفحه Filtering and Page Tracking

• ردیابی رویداد Event Tracking

• ردیابی تبدیل Conversion Tracking

مدیر پروژه Project Manager

• بخش 15 مقدمه Section 15 Intro

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

• نمای کلی سوئیچ ها Switches Overview

• استفاده از سوئیچ ها Using Switches

• نمای کلی جداول Tables Overview

• استفاده از جداول Using Tables

• طراحی میز Table Styling

• بررسی اجمالی Pickers Pickers Overview

• مشکل وابستگی Pickers -- رفع Pickers Dependency Problem -- FIX

• با استفاده از DatePicker Using DatePicker

• استفاده از DatePicker ادامه دارد Using DatePicker Continued

• نمای کلی دکمه های رادیویی Radio Buttons Overview

• استفاده از رادیوها Using Radios

• نمای کلی را انتخاب کنید Select Overview

• با استفاده از Select Using Select

• افزودن یک پروژه Adding A Project

• افزودن یک پروژه ادامه دارد Adding A Project Continued

• رفع اضافه کردن وب سایت Fix Adding Website

• فیلتر کردن جدول بر اساس جستجو Filtering Table By Search

• نمای کلی مرتب سازی جدول Table Sorting Overview

• راه اندازی مرتب سازی جدول Table Sorting Setup

• رفع مرتب سازی جدول Table Sorting Fixes

• رفع مرتب سازی جدول ادامه دارد Table Sorting Fixes Continued

• مروری بر راهنمای ابزار Tooltip Overview

• حذف ردیف ها Deleting Rows

• لغو حذف Undo Delete

• واگرد حذف ادامه دارد Undo Delete Continued

• جدول فیلتر با سوئیچ Filtering Table With Switches

• فیلتر کردن مجموع بر اساس محدوده Filtering Total By Range

• فیلتر کردن مجموع بر اساس محدوده ادامه دارد Filtering Total By Range Continued

• فیلتر کردن مجموع بر اساس محدوده به پایان رسید Filtering Total By Range Finished

• بررسی اجمالی چیپس Chips Overview

• استفاده از تراشه ها Using Chips

• استفاده از تراشه ها ادامه دارد Using Chips Continued

• طراحی تعاملی Responsive Design

• طراحی تعاملی Responsive Design

• طراحی واکنشگرا ادامه دارد Responsive Design Continued

• بسته بندی طراحی واکنشگرا Responsive Design Wrap Up

ویدیوهای بیشتر، محتوای اضافی MORE VIDEOS, EXTRA CONTENT

• تصحیح انتخاب سوال تخمین بزنید Estimate Question Selection Fix

• تصحیح انتخاب سوال تخمینی ادامه دارد Estimate Question Selection Fix Continued

• تغییر صفحه به عنوان سوال Snap Page to Question Title

• سبک های زیبای موبایل Fine Tune Mobile Styles

• Fine Tune Styles Mobile ادامه دارد Fine Tune Mobile Styles Continued

• Refactor انقلاب The Revolution Refactor

• نمای کلی منوی پیشرفته Advanced Menu Overview

• نمای کلی منوی پیشرفته ادامه دارد Advanced Menu Overview Continued

• با استفاده از منوی پیشرفته Using the Advanced Menu

• استفاده از منوی پیشرفته ادامه دارد Using The Advanced Menu Continued

• افکاری در مورد مولفه های سبک Thoughts on styled-components

• کامپوننت های استایل شده را به Material-UI تبدیل کنید Convert styled-components to Material-UI

• تبدیل کامپوننت های استایل به Material-UI ادامه دارد Convert styled-components to Material-UI Continued

• نمای کلی پانل های توسعه Expansion Panels Overview

• استفاده از پانل های توسعه Using Expansion Panels

• استفاده از پانل های توسعه ادامه دارد Using Expansion Panels Continued

• استفاده از پانل های توسعه به پایان رسید Using Expansion Panels Finished

• نمای کلی اسکلت Skeleton Overview

• فونت های گوگل را مسدود نمی کند Non-Blocking Google Fonts

• نمای کلی بارگذاری تنبل Lazy Loading Overview

• اجرای Lazy Loading Implement Lazy Loading

• رویکرد برگه فعال بهتر Better Active Tab Approach

• Better Active Tab Approach ادامه دارد Better Active Tab Approach Continued