طراحی استایل و نوشتن CSS در ری اکت | راهنمای مقدماتی

در این مقاله در خصوص روش طراحی استایل و نوشتن CSS در ری اکت صحبت خواهیم کرد. در HTML ساده معمولاً کامپوننت‌ها را به صورت زیر استایل‌بندی می‌کنیم و جاوا اسکریپت را به روش زیر مورد استفاده قرار می‌دهیم:

1<p style='color:blue;'>Hello, my name is <span id='name'> </span> </p>
2<script>
3let s = document.getElementById('name')
4s.innerText= 'Hussain'
5</script>

اما در ری‌اکت این کار به صورت زیر انجام می‌یابد:

1function App() {
2  let myName= 'Hussain'
3  return(
4    <p style={{color:'blue'}}> My name is {myName} </p>
5    );
6}
7ReactDOM.render(<App/>, document.getElementById('root'));

در واقع ما در ری‌اکت این کار را به روش کاملاً متفاوتی انجام می‌دهیم. این روش جدید به چشم ما آسان‌تر است. در ادامه این راهنما به بررسی روش استفاده از مشخصه‌های CSS در ری اکت و شیوه اجرای کد جاوا اسکریپت درون تگ‌های JSX می‌پردازیم.

طراحی استایل و نوشتن CSS در ری اکت

سه روش برای استایل دادن به کامپوننت‌ها وجود دارد که شامل «استایل‌بندی درون‌خطی» (inline styling)، استایل‌شیت‌های CSS و ماژول CSS می‌شود.

فیلم آموزش پروژه محور ری اکت جی اس ReactJS با فریم ورک Tailwind CSS در فرادرس

کلیک کنید

استایل‌بندی درون‌خطی

این روش خود به چند صورت انجام می‌یابد که در ادامه آن‌ها را بررسی می‌کنیم.

استایل‌های درون‌خطی منفرد

در HTML معمولی از استایل‌بندی درون‌خطی در اپلیکیشن‌ها به صورت زیر استفاده می‌کنیم:

1<p style="color:blue;"> This is a text </p>

اما این مفهوم در ری‌اکت متفاوت است. زمانی که از استایل‌ها در ری‌اکت بهره می‌گیریم، باید آن‌ها را درون آکولادهای دوبل قرار دهیم. به عنوان مثال در کد زیر می‌خواهیم عنصر p را به رنگ آبی رندر کنیم:

1function App() {
2  return(
3    <p style={{color:'blue'}}> This is a text </p>
4    )
5}
6ReactDOM.render(<App/>, document.getElementById('root'))

توجه کنید که استایل‌ها درون آکولادهای دوبل محصور شده‌اند. نتیجه آن به صورت زیر است:

استایل‌بندی درون‌خطی چندگانه

استفاده از چند استایل CSS به صورت درون‌خطی نیز کار آسانی محسوب می‌شود:

1<p style={{color:'white',backgroundColor:'gray'> This is a text </p></pre>
2<p>به خاطر داشته باشید که ری‌اکت از نمادگذاری «حالت شتری» (camelCase) برای مشخصه‌های استایل CSS استفاده می‌کند. برای نمونه مشخصه camelCase در CSS معادل backgroundColor است.</p>
3<h4>استفاده‌ از متغیر شیء</h4>
4<p>استفاده از استایل‌های درون‌خطی چندگانه در عمل چندان آسان نیست. بنابراین باید از یک متغیر برای ذخیره همه استایل‌ها استفاده کنیم:</p>
5<pre class="lang:default decode:true ">const mystyles = {
6      color: "white",
7      backgroundColor: "DodgerBlue",
8      padding: "10px",
9      fontFamily: "Arial"
10    };
11//..further code
12<p style={myStyles}> My style! </p>

در کد فوق mystyles یک شیء است که شامل همه استایل‌های CSS مربوطه است. در ادامه این شیء به مشخصه style ارسال می‌شود. خروجی به صورت زیر است:

استایل‌شیت

شما به عنوان یک توسعه‌دهنده همواره باید به ماژولار بودن کد خود اهمیت بدهید. در بسیاری از پروژه‌ها، استایل‌های CSS درون فایل مجزایی قرار می‌گیرند. برای پیاده‌سازی چنین رفتاری باید یک فایل جدید به نام myStyle.css بسازید و کد زیر را در آن قرار دهید:

1body {
2  background-color: #282c34;
3  color: white;
4  padding: 40px;
5  font-family: Arial;
6  text-align: center;
7}

نکته: از آنجا که این یک فایل CSS و نه کد React است، دیگر لزومی به استفاده از نمادگذاری حالت شتری وجود ندارد. اکنون می‌توانیم آن را در فایل ری‌اکت خود با استفاده از ساختار زیر مورد استفاده قرار دهیم:

1import "./filename.css"

نام فایل CSS ما به صورت filename.css است. توجه کنید که باید از مسیرهای فایل نسبی استفاده کنید. وضعیت در کد ری‌اکت به صورت زیر است:

1import "./myStyle.css"
2class App extends React.Component {
3  render() {
4    return (
5      <div>
6      <h1>Hello Style!</h1>
7      <p>Add a little style!.</p>
8      </div>
9    );
10   
11  }
12}
13ReactDOM.render(<App />, document.getElementById('root'));

خروجی کد فوق چنین است:

CSS ماژولار

این روش برای عناصر GHTML که در فایل‌های جداگانه قرار دارند مفید است. این روش شبیه روش استایل‌شیت CSS است، اما این بار فایل CSS باید شامل پسوند ‎.module.css باشد.

فیلم آموزش طراحی وب با سی اس اس CSS3 – تکمیلی در فرادرس

کلیک کنید

به عنوان مثال، یک فایل به نام myFile.module.css ایجاد می‌کنیم:

1.error {
2background-color: red;
3}

اکنون درون اپلیکیشن ری‌اکت کد زیر را می‌نویسیم:

1import React, { Component } from 'react';
2import styles from './myFile.module.css'; // Import css modules stylesheet as styles
3function Error() {
4return(
5 <h1 className={styles.error}>Error Occurred!</h1>;
6)
7}

خروجی به صورت زیر است:

فرض کنید که می‌خواهیم عبارت جاوا اسکریپت را درون HTML اجرا کنیم. در این صورت باید جاوا اسکریپت را درون JSX اجرا کنیم. در بخش بعدی در این مورد توضیح خواهیم داد.

جاوا اسکریپت درون JSX

در ری‌اکت امکان اجرای کد جاوا اسکریپت بین تگ‌های JSX از طریق استفاده از آکولاد درون تگ وجود دارد. این آکولادها شامل کد جاوا اسکریپت خواهند بود.

فیلم آموزش رایگان جاوا اسکریپت JavaScript – سریع و آسان در 150 دقیقه در فرادرس

کلیک کنید

جاسازی عبارت‌ها درون JSX

به عنوان نمونه فرض کنید می‌خواهیم یک نام را درون یک متغیر به نام myName ذخیره کرده و سپس مقدار آن را در HTML پرینت کنیم. ابتدا باید متغیر myName را اعلان کنیم:

1function App() {
2let myName = 'Hussain'
3...

اکنون مقدار را در تگ p نمایش می‌دهیم:

1return (
2 <p> Hello, {myName}, nice to meet you! </p>
3);
4}

توجه کنید که کد جاوا اسکریپت درون تگ‌های JSX درون آکولادها اجرا می‌شود. در نهایت کد مانند زیر خواهد بود:

1function App() {
2  let myName= 'Hussain'
3  return(
4    <p> My name is {myName} </p>
5    );
6}
7ReactDOM.render(<App/>, document.getElementById('root'));

کامپایلر ابتدا کد را به صورت HTML اجرا می‌کند. سپس زمانی که با مجموعه آکولادها مواجه می‌شود به جاوا اسکریپت سوئیچ می‌کند. خروجی به صورت زیر است:

توجه داشته باشید که ما دیگر نیازی به عناصر span نداریم و به این ترتیب کار توسعه آسان‌تر می‌شود. حتی می‌توانید تابع‌ها را نیز درون کد جاوا اسکریپت در JSX اجرا کنید:

1function App() {
2  function formatName(user) {
3  return user.firstName + ' ' + user.lastName
4  }
5  let user= {
6    firstName : 'Hussain',
7    lastName : 'Arif'
8  }
9  
10  return (
11    <h1> Hello, {formatName(user)} </h1>
12          )
13               }

خروجی کد فوق چنین است:

JSX نیز یک عبارت است

عبارت‌های JSX پس از کامپایل شدن به فراخوانی‌های تابع جاوا اسکریپت تبدیل می‌شوند که اشیای جاوا اسکریپت را ارزیابی می‌کنند. این بدان معنی است که می‌توانیم از JSX درون گزاره‌های if و حلقه‌های for استفاده کنیم، آن را به متغیرها انتساب دهیم، به عنوان آرگومان بپذیریم و آن را از تابع‌ها بازگشت دهیم.

در ادامه تابعی برای خوشامدگویی به کاربر بسته به پارامترهای تابع تعریف می‌کنیم:

1function getGreeting(user) {
2  if (user) {
3    return <h1>Hello, {user} !</h1>; 
4 }
5  return <h1>Hello, Stranger.</h1>;
6}

برای استفاده از آن درون JSX به صورت زیر عمل می‌کنیم:

1<div>
2 With parameter: {getGreeting('Hussain')} 
3 {getGreeting()}
4<div>

خروجی کد فوق به صورت زیر است:

تعیین مشخصه‌های عنصر با JSX

ما حتی می‌توانیم مشخصه‌های عنصر را با استفاده از جاوا اسکریپت تعیین کنیم. برای نمونه فرض کنید مشخصه src یک عنصر را با یک تگ img از طریق JSX تعیین می‌کنیم. یک قطعه کد ساده می‌تواند مانند زیر باشد:

1//..
2const src= 'image.jpg'
3return(
4<img src={src} />
5)
6//..

در نهایت می‌توانیم از آن در کد خود به صورت زیر استفاده کنیم:

1function Tick() {
2  const src = "https://images.unsplash.com/photo-1589835680468-" + 
3  "6aefca62e4d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
4  return( 
5    <div>
6      <img src={src}/>
7    </div>
8  );
9}
10  ReactDOM.render(
11    <Tick/>,
12    document.getElementById('root')
13  );

خروجی کد فوق مطابق انتظار ما است:

سخن پایانی

به این ترتیب به پایان این مقاله با موضوع طراحی استایل و نوشتن CSS در React می‌رسیم. اگر هر بخش از این مطلب برای شما مبهم بود و یا سردرگمتان کرده است، پیشنهاد می‌کنیم به صورت عملی کدها را بنویسید و تلاش کنید برنامه‌های نمونه‌ای که ارائه شده است را تحلیل کنید. این کار به شما کمک می‌کند که با مفاهیم به روش بهتری آشنا شوید.