React JSX

Что такое JSX?

JSX расшифровывается как JavaScript XML.

JSX позволяет нам писать HTML в React.

JSX облегчает написание и добавление HTML в React.

Кодирование JSX

JSX позволяет нам писать HTML элементы на JavaScript и помещать их в DOM без каких-либо методов createElement() и/или appendChild().

JSX преобразует HTML теги в реактивные элементы.

Давайте продемонстрируем на двух примерах, что первый использует JSX, а второй - нет:

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

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

Как вы можете видеть в первом примере, JSX позволяет нам писать HTML непосредственно в коде JavaScript.

JSX является расширением языка JavaScript, основанного на ES6, и переводится в обычный JavaScript во время выполнения.

Выражения в JSX

С помощью JSX вы можете писать выражения внутри фигурных скобок { }.

Выражение может быть переменной React, свойством или любым другим допустимым выражением JavaScript. JSX выполнит выражение и вернет результат:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Вставка большого блока HTML

Написать HTML код на несколько строк, поместите код внутри скобок:

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

Один элемент верхнего уровня

HTML код должен быть завернут в один элемент верхнего уровня.

Поэтому, если вы хотите написать два заголовка, вы должны поместить их в родительский элемент, например элемент div

const myelement = (
  <div>
    <h1>I am a Header.</h1>
    <h1>I am a Header too.</h1>
  </div>
);

Элементы должны быть закрыты

JSX следует правилам XML, и поэтому HTML элементы должны быть правильно закрыты.

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