Расширение JSX
Что означает JSX?
JSX означает JavaScript XML. В React это расширение для XML-подобного кода для элементов и компонентов. JSX - это расширение XML-подобного синтаксиса для ECMAScript без какой-либо определенной семантики.
Из цитаты выше видно, что JSX не имеет определенной семантики, это просто расширение JavaScript, которое позволяет писать XML-подобный код для простоты и элегантности, а затем вы транспонируете JSX в вызовы функций чистого JavaScript с помощью React.createElement. Согласно учебнику по React:
JSX - это шаг препроцессора, который добавляет синтаксис XML в JavaScript. Вы определенно можете использовать React без JSX, но JSX делает React намного более элегантным.
Подобно XML, теги JSX имеют имя тега, атрибуты и дочерние элементы. Если значение атрибута заключено в кавычки, то это строка. В противном случае оберните значение в скобки, и оно будет выражением JavaScript.
Любой код в JSX преобразуется в обычный JavaScript/ECMAScript. Рассмотрим компонент под названием Login. Теперь мы визуализируем его с помощью JSX следующим образом:
<Login foo={...} bar={...} />
JSX просто позволяет вам иметь XML-подобный синтаксис для тегов, представляющих компоненты и элементы в React. Он транслируется в чистый JavaScript:
React.createElement(Login, { foo: ..., bar: ... });