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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

استایل‌شیت

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

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

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

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

CSS ماژولار

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

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

کلیک کنید

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

سخن پایانی

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