دوره آموزشی React Styled Components (V5)

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

معرفی Introduction

معرفی Introduction

• Styled-Components چیست؟ What Are Styled-Components

• Styled-Components چیست؟ What Are Styled-Components

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

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

• VS Code Setup VS Code Setup

• VS Code Setup VS Code Setup

• رفع ویدیو با کیفیت پایین Low Quality Video Fix

• رفع ویدیو با کیفیت پایین Low Quality Video Fix

• بررسی دوره Course Review

• بررسی دوره Course Review

آموزش Styled Components Styled Components Tutorial

• Styled Components را نصب کنید Install Styled Components

• اولین کامپوننت سبک First Styled Component

• جزء دکمه Button Component

• لوازم ساده Simple Props

• سایر گزینه های لوازم جانبی Other Props Options

• نحو جایگزین Alternative Syntax

• کلاس های جهانی Global Classes

• نمونه مرز سفارشی Custom Border Example

• کارت - راه اندازی Card - Setup

• کارت - تودرتو Card - Nesting

• موضوع بندی Theming

• "ع" سرپا 'AS' Prop

• به روز رسانی مهم! Important Update!

• تابع کمکی CSS CSS Helper Function

• ATTRS - مثال دکمه ATTRS - Button Example

• سبک های دکمه ارسال Submit Button Styles

آموزش Styled Components Styled Components Tutorial

• کد منبع Source Code

• کد منبع Source Code

• ایجاد پروژه جدید Create New Project

• ایجاد پروژه جدید Create New Project

• Styled Components را نصب کنید Install Styled Components

• سبک های درون خطی و CSS جهانی Inline Styles and Global CSS

• سبک های درون خطی و CSS جهانی Inline Styles and Global CSS

• ایرادات عمده Major Flaws

• ایرادات عمده Major Flaws

• اولین کامپوننت سبک First Styled Component

• راه اندازی در جزئیات Setup in Detail

• راه اندازی در جزئیات Setup in Detail

• جزء دکمه Button Component

• جدا کردن فایل ها Separate Files

• جدا کردن فایل ها Separate Files

• لوازم ساده Simple Props

• سایر گزینه های لوازم جانبی Other Props Options

• Extend Styled Component Extend Styled Component

• Extend Styled Component Extend Styled Component

• گسترش React Components Extend React Components

• گسترش React Components Extend React Components

• جزء پیچیده تر More Complex Component

• جزء پیچیده تر More Complex Component

• نحو جایگزین Alternative Syntax

• کلاس های جهانی Global Classes

• متغیرهای CSS CSS Variables

• متغیرهای CSS CSS Variables

• رویکرد Utils Utils Approach

• رویکرد Utils Utils Approach

• نمونه مرز سفارشی Custom Border Example

• کارت - راه اندازی Card - Setup

• کارت - ظرف سبک Card - Style Container

• کارت - ظرف سبک Card - Style Container

• کارت - تودرتو Card - Nesting

• کارت - پرس و جوهای رسانه، عناصر شناور و شبه Card - Media Queries, Hover and Pseudo Elements

• کارت - پرس و جوهای رسانه، عناصر شناور و شبه Card - Media Queries, Hover and Pseudo Elements

• سبک های جهانی Global Styles

• سبک های جهانی Global Styles

• موضوع بندی Theming

• تصاوير متحرك Animations

• تصاوير متحرك Animations

• "ع" سرپا 'AS' Prop

• به روز رسانی مهم! Important Update!

• ماکرو و CSS Prop Macro and 'CSS' Prop

• ماکرو و CSS Prop Macro and 'CSS' Prop

• تابع کمکی CSS CSS Helper Function

• تنظیم فرم Form Setup

• تنظیم فرم Form Setup

• ATTRS - مثال دکمه ATTRS - Button Example

• سبک های دکمه ارسال Submit Button Styles

• ATTRS - نمونه ورودی ATTRS - Input Example

• ATTRS - نمونه ورودی ATTRS - Input Example

• لوازم پیچیده تر - مثال لیست More Complex Props - List Example

• لوازم پیچیده تر - مثال لیست More Complex Props - List Example

• لوازم پیچیده تر - نمونه محصولات More Complex Props - Products Example

• لوازم پیچیده تر - نمونه محصولات More Complex Props - Products Example

جایزه Bonus

جایزه Bonus

• جایزه Bonus

• جایزه Bonus