Что такое JSX? Это расширение синтаксиса JavaScript. Он часто используется при написании кода с помощью React для создания «элементов» React. В письменном виде он похож на HTML (из-за тегов), но в нем есть все возможности JavaScript. Во время изучения React на Flatiron Bootcamp мы узнали о JSX.
Если JSX является элементом DOM, он отображается в DOM, как написано. Внутри JSX мы также можем вызывать другие компоненты, он считывает компоненты и отображает их на экране. Это делается с помощью Babel, поэтому код, который мы пишем в React, может быть выполнен без JSX, но он делает код намного более понятным с помощью JSX, а Babel преобразует код для чтения в веб-браузере (вы получаете babel в своем приложении автоматически, если вы используете приложение create-response-app). Вот простой пример использования JSX, а не - нет. Без JSX нам пришлось бы использовать такую функцию для создания простого элемента div:
React.createElement(“div”, null, “Hello”)
Тогда как с JSX это так же просто, как:
<div>Hello</div>
И хотя в приведенном выше примере это не кажется большим делом, редко приходится писать этот небольшой код для реального приложения, и по мере того, как код становится длиннее, код без JSX становится еще длиннее и сложнее для понимания.
При написании JSX для большей части кода, который вы хотите написать как элементы HTML, вы можете просто написать их, как в HTML. Но сначала есть несколько исключений, если вы хотите добавить класс к любому элементу вместо class = «new», вы должны написать className = «new». Другое отличие заключается в использовании встроенного стиля в HTML, например:
<h1 style="background-color: green; color: red;">Hello</h1>
в JSX это будет:
<h1 style={{ backgroundColor: 'green', color: 'red'}}>Hello</h1>
Мы изменили его так, чтобы он был похож на объект JavaScript, «» заменяется на {{}}, стиль, подобный background-color, теряет дефис и становится camelCased, а значения стиля становятся строками.
Любой JavaScript, который мы хотим написать в нашем JSX, нам нужно окружить {}, чтобы он читался как JavaScript. Мы можем писать функции JavaScript, функции вызова или переменные JavaScript. Ниже приведен пример кода React и JSX.
JSX читается и отображается как три заголовка h1 с надписью Hello.