نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
شیوه نامه های 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
نمایش نظرات