استایل دهی در react

استایل دهی در React

استایل‌دهی در React به معنای طراحی و سفارشی‌سازی ظاهری کامپوننت‌های وب‌سایت یا اپلیکیشن‌های وب است. React از چندین روش مختلف برای استایل‌دهی پشتیبانی می‌کند که به توسعه‌دهندگان این امکان را می‌دهد تا طراحی‌های متنوع و جذابی ایجاد کنند. یکی از روش‌های متداول استفاده از CSS Modules است که به شما اجازه می‌دهد تا CSS را به طور محلی برای هر کامپوننت بنویسید و از تداخل استایل‌ها جلوگیری کنید. روش دیگر استفاده از Styled Components است که به شما امکان می‌دهد استایل‌های کامپوننت را به صورت جاوااسکریپت تعریف کنید و از امکانات پیشرفته‌ای مانند تم‌گذاری و انیمیشن بهره‌برداری کنید.

علاوه بر این، Inline Styles و CSS-in-JS نیز از دیگر تکنیک‌های محبوب برای استایل‌دهی در React هستند. این روش‌ها به ویژه در مواقعی که نیاز به استایل‌های داینامیک و تغییرپذیر وجود دارد، بسیار کاربردی هستند.

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

به همین خاطر یک کلاس CSS به نام Person. تعریف می کنیم. سپس به فایل Person.js می رویم و این کلاس را به div ریشه ای اضافه می کنیم:

const person = (props) => {

    return (

 

    )

};

حالا اگر فایل css و Person.js را ذخیره کنیم و به مرورگر برویم متوجه می شویم که هیچ اتفاقی نیفتاده است. به نظر شما دلیل آن چیست؟

import React, { Component } from ‘react’;

import ‘./App.css’;

import Person from ‘./Person/Person’;

با همین منطق باید فایل Person.css را نیز درون فایل Person.js وارد کنیم:

import React from ‘react’;

import ‘./Person.css’;

حواستان باشد که پسوند فایل، فقط برای فایل های جاوا اسکریپت قابل حذف است. برای فایل های دیگر (مانند فایل های css) حتما باید پسوند را نیز ذکر کنیم. حالا اگر به مرورگر برگردیم متوجه می شویم که استایل های ما در مرورگر قابل مشاهده است.

اگر از قسمت dev tools (کلید f12) به قسمت

استایل های CSS به صورت internal به فایل HTML تزریق شده اند.

margin: 16px auto;

برخی از مهم ترین این موارد را می توانید در لیست زیر مشاهده کنید:

برای مشاهده لیست کامل تر به و مراجعه کنید.

const style = {

      backgroundColor: ‘white’,

      font: ‘inherit’,

      border: ‘1px solid blue’,

      padding: ‘8px’,

      cursor: ‘pointer’

    }

 

شکستن خط های کد با اینتر فقط جهت خواناتر شدن کدهاست.

سوال: چرا از this.style استفاده نکردیم؟

اگر فایل ها را ذخیره کنیم متوجه می شویم که استایل های ما اعمال شده اند. محدودیت هایی نیز در این روش وجود دارد؛ به طور استایل دهی حالت hover: در این روش بسیار سخت است. البته در این دوره یک فصل کامل را به استایل دهی و روش های خاص آن اختصاص می دهیم بنابراین جای نگرانی نیست. همچنین همیشه می توانید از فایل های css برای استایل دهی استفاده کنید.

هر کدام از این روش ها مشکلی دارند. هنگام استفاده از فایل های css با این مشکل روبرو هستیم: کدها scope ندارند! تمامی کدهای css به صورت سراسری نوشته می شوند بنابراین استفاده از یک استایل برای عنصر button تمام عناصر button را تحت تاثیر قرار می دهد!

همچنین هنگام استفاده از حالت inline نمی توانیم از قدرت کامل css استفاده کنیم و استفاده از حالت هایی مانند hover: بسیار سخت می شود.

پس از حل تمرینات در جلسه بعد وارد فصل دوم می شویم که در رابطه با «کار با لیست ها و شرط ها» است.

تمرینات این فصل

تمرینات زیر را با دقت و بر اساس مسائل گفته شده در این فصل انجام دهید. پاسخ تمرینات در جلسه بعد به صورت مفصل ارائه خواهد شد.

1. دو کامپوننت به نام های UserInput و UserOutput ایجاد کنید.
2. کامپوننت ها را طوری طراحی کنید که UserInput دارای یک عنصر input و UserOutput شامل دو پاراگراف باشد.
3. کامپوننت UserOutput را چندین بار در کامپوننت App نمایش دهید؛ یعنی از کامپوننت UserOutput چندین بار در App استفاده شود (متن پاراگراف ها به انتخاب خودتان است، میتوانید از لورم اپیسوم استفاده کنید).
4. با استفاده از props به UserOutput یک username دلخواه بدهید و آن را در همان قسمت نمایش بدهید.
5. به کامپوننت App یک state اضافه کنید (همان username) و username را به کامپوننت UserOutput ارسال کنید.
6. یک متد برای دستکاری/تغییر state بنویسید (باید از نوع event-handler باشد).
7. متد event-handler را به عنوان reference به UserInput ارسال کرده و آن را به رویداد input-change بایند (bind) کنید.
8. مطمئن شوید که input جدیدی که توسط کاربر نوشته می شود به جای مقدار قبلی در UserOutput قرار می گیرد.
9. در UserInput از two-way-binding (بایندینگ دو طرفه) استفاده کنید؛ یعنی علاوه بر اینکه کاربر نام را تغییر می دهد باید مقدار اولیه نیز درون input نمایش داده شود (همان کاری که در جلسه قبل انجام دادیم).
10. با استفاده از هر دو روش استایل دهی (فایل های css و استایل های inline) کامپوننت ها و عناصر خود را به شکل دلخواه استایل دهی کنید.

با آرزوی موفقیت برای همه شما عزیزان!