React یک کتابخانه جاوا اسکریپت برای ساخت رابط کاربری است. و در جامعه توسعه جلویی محبوبیت زیادی به دست آورده است.
یکی از مزایای استفاده از React ادغام آن با CSS است که به توسعه دهندگان این امکان را می دهد تا سبک ها را به صورت ماژولار و قابل استفاده مجدد در اجزای خود اعمال کنند.در این آموزش، نحوه ادغام React با CSS را مانند یک حرفه ای با درک روش های مختلفی که می توانید استایل ها را در اجزای خود اعمال کنید، یاد خواهید گرفت. همچنین برخی از بهترین روش ها را برای سازماندهی و نگهداری کد CSS خود یاد خواهید گرفت.در پایان این آموزش، باید بتوانید با اطمینان به اجزای React خود استایل بدهید و رابط های کاربری جذابی بسازید.
در اینجا مواردی وجود دارد که یاد خواهید گرفت:
نحوه اعمال سبک های اولیه CSS برای اجزای React
نحوه استفاده از ماژول‌های CSS برای اعمال سبک‌های دامنه‌دار به اجزا
نحوه استفاده از کتابخانه های CSS-in-JS مانند styled-components برای استایل دادن به اجزای خود
چگونه با استفاده از پرسش‌های رسانه‌ای و سایر تکنیک‌های طراحی واکنش‌گرا، استایل‌های واکنش‌گرا را به اجزای خود اعمال کنید
چگونه از انیمیشن ها و انتقال های CSS برای گفت ن جلوه های بصری پویا به اجزای خود استفاده کنید
بهترین روش ها برای سازماندهی و نگهداری CSS هنگام کار با یک برنامه بزرگ React.
راه های مختلفی برای ادغام React با CSS وجود دارد. در اینجا چند رویکرد وجود دارد که ممکن است برای شما مفید باشد:
می‌توانید از ویژگی style
در کامپوننت‌های React خود برای تعیین استایل‌ها به صورت درون خطی استفاده کنید. اگر فقط نیاز به اعمال چند سبک برای یک عنصر داشته باشید، این می تواند راحت باشد.
import React from 'react'; function MyComponent() { return ( <div style={{color: 'red', fontSize: '32px'}}> This text is red and 32px </div> ); }
این یک مؤلفه کاربردی در React است که یک عنصر div را با استایل درون خطی برمی گرداند. استایل درون خطی رنگ متن را قرمز و اندازه قلم را روی 32 پیکسل تنظیم می کند. هنگامی که این کامپوننت در یک برنامه React رندر می شود، متنی قرمز رنگ با اندازه فونت 32 پیکسل همانطور که در این CodePen می بینید نمایش داده می شود.
شما می توانید یک فایل CSS ایجاد کرده و آن را به اجزای React خود وارد کنید. اگر مجموعه‌ای از سبک‌ها را دارید که می‌خواهید در چندین مؤلفه مجدداً استفاده کنید، این کار مفید است.
/* my-styles.css */ .red-text { color: red; } .large-text { font-size: 32px; }
این یک فایل CSS است که شامل دو انتخابگر کلاس .red-textو .large- .large-text<br/>
است که می تواند برای اعمال سبک های مربوطه به عناصر استفاده شود. کلاس .red-text
رنگ متن را قرمز و کلاس .large- .large-text
اندازه فونت را روی 32px تنظیم می کند.
برای استفاده از این کلاس ها در JSX، باید فایل stylesheet را در فایل کامپوننت وارد کنید و سپس className را به عناصر JSX اضافه کنید:
import React from 'react'; import './my-styles.css'; function MyComponent() { return ( <div className="red-text large-text"> This text is red and 32px </div> ); }
شما می توانید از یک پیش پردازنده CSS (مانند SASS یا LESS) برای نوشتن و سازماندهی سبک های خود استفاده کنید. اگر می‌خواهید از آپشن های ی مانند متغیرها، میکس‌ها و انتخابگرهای تودرتو در استایل‌های خود استفاده کنید، این می‌تواند راحت باشد.
/* my-styles.scss */ $red: red; .red-text { color: $red; } .large-text { font-size: 32px; }
این یک فایل SCSS (Sass) است که از متغیرهایی برای ذخیره مقادیر رنگ استفاده می‌کند، که می‌توان آن‌ها را دوباره در سرتاسر شیوه نامه استفاده کرد. متغیر $red
روی مقدار red تنظیم می شود و سپس برای تنظیم رنگ متن کلاس .red-text
استفاده می شود. علاوه بر این، کلاس .large-text
اندازه فونت را روی 32 پیکسل تنظیم می کند.
import React from 'react'; import './my-styles.scss'; function MyComponent() { return ( <div className="red-text large-text"> This text is red and 32px </div> ); }
ادامه آموزش به دلیل طولانی بودن در سایت
