Ответ 1
JSX обозначает J ava S cript X ML. С React это расширение для XML-кода для элементов и компонентов. В документах React и, как вы упомянули:
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: ... });
Вы можете прочитать в документах.