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

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

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

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

Контент

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

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

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

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

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

**JSX (JavaScript XML)** - це **розширення синтаксису JavaScript**, яке дозволяє **писати HTML-подібний код прямо всередині JS**.
Він використовується в **React**, щоб **декларативно описувати, як повинен виглядати інтерфейс (UI)**.

---

### Приклад JSX:

```javascript
function App() {
  return <h1>Привіт, світ!</h1>;
}
```

Цей код виглядає як HTML,
але насправді він **перетворюється на звичайні виклики JavaScript**:

```javascript
React.createElement("h1", null, "Привіт, світ!");
```

---

### Навіщо потрібен JSX

Без JSX ти писав би React-компоненти так:

```javascript
return React.createElement("div", null,
  React.createElement("h1", null, "Заголовок"),
  React.createElement("p", null, "Текст параграфа")
);
```

З JSX - набагато простіше і наочніше:

```javascript
return (
  <div>
    <h1>Заголовок</h1>
    <p>Текст параграфа</p>
  </div>
);
```

---

### Основні особливості JSX:

1. **Вбудовування JavaScript у розмітку**
Всередині фігурних дужок `{}` можна писати JS-вирази:

```javascript
  const name = "Тім";
  return <h1>Привіт, {name}!</h1>;
  ```
2. **JSX - не шаблон, а синтаксис JS**
Все, що ти пишеш, **зрештою перетворюється на JavaScript-функції** (через Babel або SWC).
3. **Один кореневий елемент**
JSX-блок повинен повертати **тільки один батьківський елемент**:

```javascript
  return (
    <div>
      <h1>Заголовок</h1>
      <p>Опис</p>
    </div>
  );
  )
  // Не можна повернути два елементи на одному рівні без обгортки
  ```
Якщо не хочеш додавати зайвий `<div>`, можна використати **фрагмент**:

```javascript
  return (
    <>
      <h1>Заголовок</h1>
      <p>Опис</p>
    </>
  );
  ```
4. **Атрибути - як в HTML, але в стилі JS:**
  - `class` -> `className`
  - `for` -> `htmlFor`
  - значення - в `{}`:

```javascript
    <img src={imageUrl} alt="Фото" />
    <button disabled={isDisabled}>Кнопка</button>
    ```
5. **JSX може містити компоненти**

```javascript
  function Greeting({ name }) {
    return <h2>Привіт, {name}!</h2>;
  }

function App() {
    return <Greeting name="Тім" />;
  }
  ```

---

### Чому JSX зручний

Код читається як **розмітка**, але залишається **силою JavaScript**
Можна використовувати **змінні, функції і умови прямо в UI**
Підвищує **наочність і швидкість розробки**

---

### Приклад з умовою і списком

```javascript
function TodoList({ todos }) {
  return (
    <ul>
      {todos.length === 0 ? (
        <p>Немає завдань</p>
      ) : (
        todos.map(todo => <li key={todo.id}>{todo.text}</li>)
      )}
    </ul>
  );
}
```

JSX дозволяє **вбудовувати логіку прямо в структуру інтерфейсу** - це його суперсила.

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

Для рев’юера

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

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