لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
دوره آموزشی React Styled Components (V5)
React Styled Components Course (V5)
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
آموزش گام به گام Styled-Components با استفاده از Styled-Components در برنامه های React پیش نیازها: دانش اولیه React
چه خبر همه این جان از Coding Addict است و به دوره Styled Components من خوش آمدید.
همانطور که Max Stoiber یکی از سازندههای کامپوننتهای مدلسازی شده میگوید:
"ایده اصلی مولفههای سبکدهی شده این است که بهترین شیوهها را با حذف نگاشت بین سبکها و مؤلفهها اعمال کنند."
Styled Components بخشی از جنبش CSS inJS است که در آن ما میتوانیم مؤلفههایی ایجاد کنیم که دارای سبکهای کپسولهشده خود باشند. دیگر نیازی به ایجاد کامپوننت نداریم و در مورد انتخابگر تصمیم می گیریم و سپس به سمت برنامه css یا هر شیوه نامه دیگری برای نوشتن استایل های جداگانه برای آن جزء خاص عجله داریم. چیزی که Styled Components را بسیار جالب میکند، نحو الگوی برچسبگذاری شده عالی آنها است که اجازه میدهد تنها با تعریف سبکها، اجزای واکنش معمولی ایجاد کنید. با پیکربندی صفر، کامپوننتهای styled از ماژولار بودن css، متغیرها در css، تودرتو در css، گسترش سبکهای مؤلفهها و بسیاری موارد دیگر پشتیبانی میکنند. Styled Components همچنین به ما اجازه می دهد بدون نگرانی در مورد برخورد نام کلاس، CSS ساده را در اجزای خود بنویسیم
Styled-components یک چارچوب استایلسازی CSS-in-JS است که از الفاظ قالب برچسبگذاری شده در جاوا اسکریپت و قدرت CSS برای ارائه پلتفرمی استفاده میکند که به شما امکان میدهد CSS واقعی را برای استایل دادن به اجزای React بنویسید.
مؤلفههای استایلشده، مؤلفههای React آسانی هستند که با کتابخانه styled-components مینویسید، جایی که میتوانید مؤلفههای خود را با CSS ساده در داخل کد جاوا اسکریپت خود استایل دهید.
سرفصل ها و درس ها
معرفی
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
نمایش نظرات