آموزش کامپوننت‌های استایل‌دار واکنش‌دهنده/مؤلفه‌های استایل‌دار [V5 EDITION]

React styled components / styled-components [V5 EDITION]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: شیوه نامه های CSS را کنار بگذارید! CSS را در JS بیاموزید تا با کتابخانه کامپوننت های استایل دهی شده به کامپوننت های React سریع و تمیز استایل دهید. ارزش خود را به عنوان یک توسعه دهنده React افزایش دهید. با استفاده از کتابخانه CSS-in-JS styled-components، برنامه های React جدید را تبدیل یا ایجاد کنید. برنامه‌های Styled React را با استفاده از روش‌های جدیدتر، تمیزتر و کارآمدتر با Styled Components تنظیم کنید. استفاده از انیمیشن‌ها با مؤلفه‌های استایل‌دار ایجاد تغییرات مؤلفه‌ها با استفاده از لوازم (مانند دکمه بزرگ/کوچک/اصلی/ثانویه) ایجاد تم‌های مختلف با مؤلفه تغییر موضوع برای اعمال تم روشن و تاریک پیاده‌سازی فونت‌های شخص ثالث با استفاده از فونت‌های Google بیاموزید که چگونه مؤلفه‌های استایل‌دار می‌توانند با آنها تعامل داشته باشند. کامپوننت‌های معمولی React و قلاب‌های React ایجاد یک طرح‌بندی پاسخ‌گوی اولین موبایل پیش نیازها: شما باید قبلاً برخی از نحو ساده ES6 را بدانید و قبلاً با چارچوب React کار کرده باشید.

**دوره آموزشی به‌روزرسانی شده به نسخه 5 React styled-components.**

این دوره آموزشی با مولفه‌های سبک، گام بعدی برای توسعه‌دهندگان React است که می‌خواهند با حذف نام‌ها و ساختارهای کلاس‌های CSS، واردات نامرتب CSS و نام‌گذاری کلاس CSS با برنامه‌های React خود، ارزش خود را به عنوان یک توسعه‌دهنده فرانت‌اند افزایش دهند. می‌خواهید با کتابخانه CSS-in-JS Styled Components از بهترین راه برای استایل‌سازی برنامه‌های React استفاده کنید!

چارچوب styled-components به شما امکان می‌دهد CSS واقعی را در جاوا اسکریپت خود بنویسید. این بدان معناست که می‌توانید از تمام ویژگی‌های CSS که استفاده می‌کنید و دوست دارید با مؤلفه‌های استایل‌گذاری شده، از جمله (اما نه محدود به) پرسش‌های رسانه، همه شبه انتخاب‌کننده‌ها، تودرتو و غیره استفاده کنید.

در این دوره آموزشی کامپوننت‌های سبک، ما با استفاده از Create-React-app، یک برنامه 2 صفحه‌ای بسیار ابتدایی برای موبایل ایجاد می‌کنیم. ما از مؤلفه‌های استایل‌دار برای استایل دادن به کل برنامه‌مان استفاده می‌کنیم، از جمله اعمال سبک‌های جهانی، پیاده‌سازی فونت‌های شخص ثالث با استفاده از فونت‌های Google، ایجاد یک چیدمان مشترک و پاسخ‌گوی تلفن همراه، ایجاد تغییرات برای مؤلفه‌ها از طریق props (مثلاً یک دکمه بزرگ یا کوچک). )، اجرای یک جزء تغییر موضوع و تغییر برنامه ما بین حالت "روشن" و "تاریک"، و همچنین پیاده سازی انیمیشن ها با اجزای سبک.

React رویکرد سنتی دیدگاه/viewmodel را برای توسعه وب در نظر گرفت و هر دو را در یک واحد ترکیب کرد، در حالی که همچنان کد ماژولار و تک مسئولیتی را حفظ کرد. Styled Components را می‌توان به‌عنوان پسوندی از آن در نظر گرفت و استایل را به فایل JS نیز وارد می‌کند. همه آنها روابط یک به یک دارند، بنابراین ترکیب آنها تا زمانی که مدولار هستند منطقی است. این دوره آموزشی مؤلفه‌های سبک React به شما کمک می‌کند تا قدرت این رویکرد را درک کنید و نحوه ساخت چنین مؤلفه‌هایی را به شما نشان دهد.


دانش‌آموزان دیگر درباره این دوره آموزشی React Styled Components چه می‌گویند:

5/5 ستاره - "دوره خوب، درک من از Styled-components را بهبود بخشید." - آزبورن تونده


5/5 ستاره - "من دوره ای را دوست داشتم که برای من بسیار مفید بود و به من کمک کرد تا در نهایت بفهمم که چگونه styled-components کار می کند. بدون هیچ شکی، من این دوره را توصیه می کنم و به دوره های آینده تام باز خواهم گشت. یک مربی عالی است. متشکرم!" - الکس پاولوف


5/5 ستاره - "من این دوره را بسیار دوست دارم، تام در مورد سوال دانشجو بسیار پاسخگو است. بدون کد کپی پیست، که می دانیم همه دانش آموزان آن را دوست ندارند. اطلاعات جدید و یک روش مدرن بسیار زیاد است. برای نوشتن یک کامپوننت، من آن را بسیار دوست دارم و آن را در پروژه هایم پیاده خواهم کرد :) از توم تشکر می کنم که به ما کمک کردی! - کادک پرادنیانا


5/5 ستاره - "معرفی عالی برای کامپوننت‌های سبک‌دهی شده در React. هر یک از رایج‌ترین سناریوها را طی می‌کند تا به شما در شروع ساختن کمک کند. دوره عالی!" - یادداشت رامیرز


5/5 ستاره - "معرفی عالی برای روش استایل سازی اجزای React." - ایان تایت


5/5 ستاره - "من نمی دانستم که این امکان پذیر است. شگفت انگیز" (ترجمه شده) - Alex


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

معرفی و نصب Introduction and installation

  • مهم: قبل از شروع این دوره Important: Before you begin this course

  • مقدمه ای بر React styled-components Introduction to React styled-components

  • مقایسه سایر کتابخانه های CSS-in-JS Comparing other CSS-in-JS libraries

  • نصب کامپوننت های استایلد + پلاگین ها و نکات مربوطه Installing styled components + relevant plugins and tips

مبانی کامپوننت‌های مدل‌دهی شده Basics of styled-components

  • ایجاد اولین React styled-component ما Creating our first React styled-component

  • اضافه کردن سبک های جهانی با استفاده از createGlobalStyle + افزودن فونت های گوگل Adding global styles using createGlobalStyle + adding Google fonts

  • سبک های شرطی بر اساس لوازم Conditional styles based on props

  • چگونه اجزای سبک کار می کنند "زیر کاپوت" How styled components works "under the hood"

  • سبک های انبوه با استفاده از کمک کننده "css" styled-components Bulk styles using the styled-components "css" helper

ساخت برنامه ما - طرح و هدر Building out our app - layout & header

  • نصب react-router-dom و اضافه کردن مسیرهای خانه و ورود به سیستم Installing react-router-dom and adding our home and login routes

  • ایجاد طرح بندی صفحه و اجزای هدر Creating the page layout and header components

  • حالت دادن به مؤلفه‌های React معمولی + گسترش سبک‌های مؤلفه‌های مدل‌دهی‌شده موجود Styling normal React components + extending existing styled component styles

  • پیوندها بر اساس مسیرها (با قلاب useLocation از react-router-dom) Styling links based on routes (with useLocation hook from react-router-dom)

  • پرس و جوهای رسانه با استفاده از مؤلفه های سبک Media queries using styled components

  • قلاب useState React با نماد منو + کنترل‌کننده رویداد با مولفه‌های مدل‌دهی شده useState React hook with menu icon + event handlers with styled-components

ساخت برنامه ما - صفحه ورود Building out our app - login page

  • ایجاد مؤلفه سبک ورودی Creating the Input styled component

  • ایجاد یک کامپوننت سبک PasswordInput با کمک کننده attrs Creating a PasswordInput styled component with the attrs helper

  • پیاده سازی تغییر رمز عبور نمایش/پنهان کردن Implementing the show / hide password toggle

  • افزودن دکمه ها و بارگیری/ارسال وضعیت به فرم Adding the buttons and loading / submit state to the form

  • انیمیشن با اجزای سبک با استفاده از کمک کننده فریم های کلیدی (لودینگ اسپینر) Animation with styled components using the keyframes helper (loading spinner)

متغیرها و قالب‌بندی با مؤلفه‌های مدل‌دهی‌شده و طرح‌های زمینه‌ای Variables & theming with styled components and styled-theming

  • مبانی تم ها و متغیرها Themes and variables basics

  • ایجاد کامپوننت به سبک تغییر موضوع Creating the theme toggle styled component

  • پایان دادن به تغییر موضوع با useContext و ThemeContext Finishing the toggle theme with useContext and ThemeContext

  • به روز رسانی GlobalStyles و منوها برای استفاده از رنگ های تم Updating GlobalStyles and menus to use theme colors

پیشرفته Advanced

  • ارجاع به یک مؤلفه استایل‌دار در مؤلفه استایل‌گذاری‌شده دیگر Referencing a styled component within another styled component

  • توابع درون یابی برای پاکسازی منطق سبک Interpolating functions to clean up style logic

  • استفاده از PropType با کامپوننت های استایل دار Using PropTypes with styled components

منابع Resources

  • مخزن Github Github Repository

  • جایزه BONUS

نمایش نظرات

آموزش کامپوننت‌های استایل‌دار واکنش‌دهنده/مؤلفه‌های استایل‌دار [V5 EDITION]
جزییات دوره
2 hours
29
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
10,420
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Tom Phillips Tom Phillips

بیش از یک دهه در توسعه وب جلویی

WebDevEducation (Tom Phillips) WebDevEducation (Tom Phillips)

ارزش خود را به عنوان یک توسعه دهنده وب جلویی افزایش دهید!