تفاوت class و className در React JS

در ری‌اکت، شما باید از className به جای class برای اعمال کلاس‌های CSS استفاده کنید. این به دلیل این است که class در جاوااسکریپت یک کلمه کلیدی خاص است و استفاده از آن ممکن است باعث تداخل با کد جاوااسکریپت شما شود.

پس، به طور خلاصه:

• class: این یک کلمه کلیدی در جاوااسکریپت است و به همین دلیل نمی‌توان از آن برای نام‌گذاری کلاس‌ها در JSX استفاده کرد.
• className: این ویژگی به طور خاص برای تعیین کلاس‌های CSS در JSX و React طراحی شده است و به راحتی با سیستم استایل‌دهی شما کار می‌کند.

در اینجا یک مثال ساده برای نمایش تفاوت:

// Incorrect - Using class keyword in JSX (will cause issues)
const IncorrectComponent = () => (
<div class="my-class">Hello, World!</div>
);
// Correct - Using className in JSX
const CorrectComponent = () => (
<div className="my-class">Hello, World!</div>
);

در مثال بالا، استفاده از class باعث بروز خطا می‌شود، اما className به درستی عمل می‌کند و کلاس CSS مورد نظر را به عنصر HTML اعمال می‌کند.