Реагировать 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 в несколько строк, поместите HTML в круглые скобки:

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

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

HTML-код должен быть заключен в ОДИН элемент верхнего уровня.

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

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

В качестве альтернативы вы можете использовать «фрагмент» для переноса нескольких строк. Это предотвратит ненужное добавление дополнительных узлов в DOM.

Фрагмент выглядит как пустой HTML-тег: <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

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

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

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

Класс атрибута = имя_класса

Этот 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(, {}, 'This is a paragraph without using JSX!');

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