Skip to main content

Що таке JSX?

ReactJunior~1 хв читання
Запропонувати правку

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>;
  1. JSX - не шаблон, а синтаксис JS Все, що ти пишеш, зрештою перетворюється на JavaScript-функції (через Babel або SWC).
  2. Один кореневий елемент JSX-блок повинен повертати тільки один батьківський елемент:
javascript
return ( <div> <h1>Заголовок</h1> <p>Опис</p> </div> ); ) // Не можна повернути два елементи на одному рівні без обгортки

Якщо не хочеш додавати зайвий <div>, можна використати фрагмент:

javascript
return ( <> <h1>Заголовок</h1> <p>Опис</p> </> );
  1. Атрибути - як в HTML, але в стилі JS:

  • class -> className

  • for -> htmlFor

  • значення - в {}:

    javascript
    <img src={imageUrl} alt="Фото" /> <button disabled={isDisabled}>Кнопка</button>
  1. 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 дозволяє вбудовувати логіку прямо в структуру інтерфейсу - це його суперсила.

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

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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