React JSX

Що таке JSX?

JSX розшифровується як JavaScript XML.

JSX дозволяє нам писати HTML у React.

JSX полегшує написання та додавання HTML у React.

Кодування JSX

JSX дозволяє нам писати елементи HTML у JavaScript і розміщувати їх у DOM без жодного методу createElement() та/або appendChild().

JSX перетворює теги HTML на елементи React.

Ось два приклади. Перший використовує JSX, а другий – ні:

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

const myElement = React.createElement('h1', {}, 'Я не використовую JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Як ви бачите в першому прикладі, JSX дозволяє нам писати HTML безпосередньо в коді JavaScript.

JSX є розширенням мови JavaScript на основі ES6 і перекладається на звичайний JavaScript під час виконання.

Вирази в JSX

За допомогою JSX ви можете писати вирази у фігурних дужках { }.

Вираз може бути змінною React, властивістю або будь-яким іншим дійсним виразом JavaScript. JSX виконає вираз і поверне результат:

const myElement = <h1>React у {5 + 5}  разів краще із JSX</h1>;

Вставлення великого блоку HTML

Щоб написати HTML у кілька рядків, помістіть HTML у круглі дужки:

const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);

Один елемент верхнього рівня

HTML-код має бути загорнутий в ОДИН елемент верхнього рівня.

Отже, якщо ви хочете написати два параграфи, ви повинні помістити їх у батьківський елемент, як-от елемент div.

const myElement = (
<div>
<p>Я параграф.</p>
<p>Я також параграф.</p>
</div>
);

Крім того, ви можете використати "фрагмент", щоб обернути кілька рядків. Це дозволить уникнути непотрібного додавання додаткових вузлів до DOM.

Фрагмент виглядає як порожній тег HTML: <></>.

const myElement = (
<>
<p>Я параграф.</p>
<p>Я теж параграф.</p>
</>
);

Елементи мають бути закриті

JSX відповідає правилам XML, тому елементи HTML мають бути належним чином закриті.

const myElement = <input type="text" />;

Атрибут class = className

Атрибут class є часто використовуваним атрибутом у HTML, але оскільки JSX відображається як JavaScript, і ключове слово class є зарезервованим словом у JavaScript, вам не дозволено використовувати його в JSX.

JSX вирішив цю проблему, використовуючи натомість className. Коли JSX відтворюється, він перетворює атрибути className в атрибути class.

const myElement = <h1 className="myclass">Hello World</h1>;

Умови - інструкції if

React підтримує інструкції if, але не всерединіJSX.

Щоб мати можливість використовувати умовні оператори в JSX, ви повинні розмістити інструкції if за межами JSX, або ви можете використовувати замість них тернарний (потрійний) вираз:

Варіант 1:

Напишіть інструкції if поза кодом JSX:

const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
}

const myElement = <h1>{text}</h1>;

Варіант 2:

Натомість використовуйте тернарні (потрійні) вирази:

const x = 5;

const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'Це параграф без використання JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(paragraph);