Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чому className, а не class?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

### Коротка відповідь

У JSX використовується `className` **замість** `class`,
тому що `class` - це **зарезервоване слово в JavaScript**,
а JSX - це **не HTML, а JavaScript-синтаксис**, який просто *виглядає* як HTML.

---

### Детальне пояснення

JSX під капотом перетворюється на звичайний **JavaScript-код**.
Наприклад:

```javascript
<div className="button">Кнопка</div>
```

перетворюється на:

```javascript
React.createElement("div", { className: "button" }, "Кнопка");
```

Якби ти написав:

```javascript
<div class="button">Кнопка</div>
```

то під час компіляції це виглядало б як:

```javascript
React.createElement("div", { class: "button" }, "Кнопка");
```

А в JavaScript **не можна використовувати** `class` **як ім'я властивості** у звичайному об'єкті без лапок,
адже `class` - це **ключове слово** для оголошення класів:

```javascript
class Button {}
```

Тому React (і Babel) **спеціально замінює** `class` **на** `className`,
щоб не було синтаксичних конфліктів і щоб код був валідним JS.

---

### Чому саме `className`

Тому що в браузерному **DOM API** властивість для CSS-класів теж називається `className`.

Приклад із чистого JavaScript:

```javascript
const el = document.createElement("div");
el.className = "button"; // правильно
console.log(el.className); // "button"
```

Якщо спробувати:

```javascript
el.class = "button"; // помилка: такої властивості немає
```

Тому React дотримується **тих самих правил, що й DOM**,
щоб поведінка була передбачуваною і звичною.

---

### Приклад

Правильно:

```javascript
<div className="card active">Контент</div>
```

Помилка:

```javascript
<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`.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати277 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.