Понимание JSX в ReactJS

JSX означает JavaScript XML. Мы используем JSX для написания HTML в нашем приложении React. JSX позволяет нам писать HTML-подобный синтаксис в приложениях React, что делает код читабельным и понятным, а код имеет больше смысла.

Этот JavaScript XML, также известный как JSX, помогает нам добавлять элементы HTML в JavaScript и помещать их в объектную модель документа или DOM без написания методов createElement() или appendChild(). Преобразование элементов HTML в элементы React выполняется с помощью JSX или JavaScript XML.

Давайте посмотрим на пример кода JSX:

let customElement = <p>This is a JSX element! </p>;
ReactDOM.render(customElement, document.getElementById('root'));

А что, если бы мы написали этот код не с помощью JSX! Как бы это выглядело? Давайте посмотрим код:

let customElement = React.createElement('p',{}, 'Not using JSX!');
ReactDOM.render(customElement, document.getElementById('root'));

Как мы видим, насколько проще становится разобраться в коде, когда мы используем синтаксис JSX, который позволяет нам напрямую писать код HTML в нашем коде JavaScript.

Когда мы пишем JSX, мы используем фигурные скобки для записи выражений. Теперь это выражение может быть любым допустимым выражением JavaScript, которое будет выполняться JSX и возвращать этот результат. Давайте посмотрим на пример этого в коде:

let customElement = <p>Code written in JSX (2 * 1) times easier to understand than writing without JSX!</p>
Output:
Code written in JSX 2 times easier to understand than writing without JSX!

Мы можем использовать круглые скобки, когда хотим написать HTML-элементы более чем в одной строке. Давайте посмотрим на это в коде:

let customElement = (
<div>
   <h1> I am heading 1</h1>
   <h2> I am heading 2 </h2>
   <p> I am a paragraph </p>
</div>
);

Если вы внимательно посмотрите, элементы заголовка и элемент абзаца заключены в один элемент верхнего уровня, что является обязательным. Мы должны поместить все в один родительский элемент, в данном случае элемент ‹div›.

Мы также можем использовать фрагменты для этой цели. Это помогает нам, не добавляя никаких дополнительных узлов в DOM. Такой фрагмент выглядит как ‹›‹/›, который выглядит как пустой HTML-элемент.

Еще несколько вещей, которые следует помнить при написании кода JSX:

(i) HTML-элементы должны быть правильно закрыты. Пример кода:

let emailElement = <input type="email" />;

(ii) Использование атрибута className вместо класса. Пример кода:

let customElement = <p className="text-style">This is paragraph text</p>;

(iii) При вставке выражения JavaScript в JSX заключите выражение JavaScript в фигурные скобки { }. Пример кода:

let b = 3;
let customElement = <p> { b > 1 ? "Paragraph Text" : "Heading Text" } </p>;

Подводя итог, можно сказать, что JSX — отличное расширение для JavaScript. Он служит синтаксическим сахаром для функции React.createElement(), что делает код более читабельным и легким для понимания.