Чому className, а не class?
Коротка відповідь
У JSX використовується className замість class,
тому що class - це зарезервоване слово в JavaScript,
а JSX - це не HTML, а JavaScript-синтаксис, який просто виглядає як HTML.
Детальне пояснення
JSX під капотом перетворюється на звичайний JavaScript-код. Наприклад:
<div className="button">Кнопка</div>перетворюється на:
React.createElement("div", { className: "button" }, "Кнопка");Якби ти написав:
<div class="button">Кнопка</div>то під час компіляції це виглядало б як:
React.createElement("div", { class: "button" }, "Кнопка");А в JavaScript не можна використовувати class як ім'я властивості у звичайному об'єкті без лапок,
адже class - це ключове слово для оголошення класів:
class Button {}Тому React (і Babel) спеціально замінює class на className,
щоб не було синтаксичних конфліктів і щоб код був валідним JS.
Чому саме className
Тому що в браузерному DOM API властивість для CSS-класів теж називається className.
Приклад із чистого JavaScript:
const el = document.createElement("div");
el.className = "button"; // правильно
console.log(el.className); // "button"Якщо спробувати:
el.class = "button"; // помилка: такої властивості немаєТому React дотримується тих самих правил, що й DOM, щоб поведінка була передбачуваною і звичною.
Приклад
Правильно:
<div className="card active">Контент</div>Помилка:
<div class="card active">Контент</div>
// JSX error: Unexpected token 'class'Підсумок
| В HTML | В JSX | Чому |
|---|---|---|
class | className | class - зарезервовано в JS |
for | htmlFor | for - зарезервовано в JS (використовується в циклах) |
Коротко в одному рядку
JSX - це JavaScript, а не HTML. Тому замість
classвикористовуєтьсяclassName, щоб уникнути конфлікту з ключовим словомclass.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.