JSX означает Javascript XML. Это расширение синтаксиса🔗 для JavaScript.
JSX – это шаг препроцессора, который добавляет синтаксис XML в JavaScript.
JSX создает React Elementsele. Можно создавать элементы без JSX, но JSX делает React намного более элегантным.
Рекомендуется использовать JSX с React, чтобы описать, как 🌄должен выглядеть пользовательский интерфейс.
JSX легче читать и писать✍. Babel преобразует это выражение внастоящий код Javascript👩💻.
Это также позволяет реагировать, чтобы показать более полезные сообщения об ошибках и предупреждениях.
const el = <h1> Hello </h1> , React.createElement("h1",null,"hello")
const el = <h1 className="bg"> Hello </h1> , React.createElement("h1",{className:"bg"},"hello")
JВыражения avascript в JSX: мы можем поместить любое допустимое выражение JavaScript внутри фигурных скобок. Вы можете передать любое js-выражение как дочернее👪, заключив его в {}.
Синтаксис: {выражение}
const el = <h1> {100+20} </h1>
Вы можете использовать кавычки для указания строки или литералов в качестве атрибутов😊.
Синтаксис:
const el = <h1 attribute ="value"></h1> const el = <h1 className="bg">hi</h1>
Вы также можете использовать фигурные скобки для встраивания выражения JavaScript в атрибут.
ReactDom.render(<App name="app"/>, document.getElementById("root"))
Примечание. Поскольку JSX ближе к Javascript, чем к HTML, React Dom использует соглашение об именах CamelCase Propertyвместо имен атрибутов HTML.
Не заключайте в кавычки фигурные скобки при встраивании выражения JS в атрибут.Вы должны использовать кавычки (для строковых значений) или фигурные скобки (для выражений) но не ⚠оба в одном и том же атрибуте.
JSX представляет объекты: Babel компилирует↘ до вызовов React.createElement().
Пример:
const el = <h1 className ="bg" > Hello </h1>
const el = {
type:"h1",
props:{
className:'bg',
children:"hello"
}}
В следующей статье я напишу о Что такое props в React🤔?
Спасибо за подписку и аплодисменты😋
Ссылка на День 7
