Введение в JSX

JSX — это препроцессор, который добавляет синтаксис XML к JavaScript. Вы можете использовать React без JSX, но JSX делает React более элегантным.

JSX — синтаксис, похожий на XML / HTML, используемый в React, расширяет ECMAScript, так что XML / HTML-подобный текст может сосуществовать с кодом JavaScript / React. Синтаксис предназначен для использования препроцессорами (т. е. транспилерами, такими как Babel), чтобы преобразовать HTML-подобный текст, найденный в файлах JavaScript, в стандартные объекты JavaScript, которые будут анализировать движок JavaScript.

В основном, используя JSX, вы можете писать сжатые структуры HTML / XML (например, DOM подобные древовидные структуры) в том же файле, что и код JavaScript, а затем Babel преобразует эти выражения в код JavaScript. В отличие от прошлого, вместо того, чтобы помещать JavaScript в HTML, JSX позволяет нам помещать HTML в JavaScript.

Рассмотрим объявление переменной:

Синтаксис этого смешного тега не является строкой HTML.
Он называется JSX, и это расширение синтаксиса JavaScript. Мы рекомендуем использовать его с React для описания того, как должен выглядеть пользовательский интерфейс. JSX может напомнить вам о языке шаблонов, но он поставляется с мощью JavaScript.
JSX создает «элементы» React. Мы рассмотрим рендеринг в DOM в следующем разделе. Ниже вы можете найти основы JSX, необходимые для начала работы.

Выражения в JSX

Вы можете встроить любое выражение JavaScript в JSX, обернув его фигурными фигурными скобками.

Например, 2 + 2, user.firstName и formatName (user) — допустимые выражения:

Мы разделяем JSX на несколько строк для удобства чтения. Хотя этого не требуется, при этом мы рекомендуем обертывать его в круглые скобки, чтобы избежать ловушки автоматической точки с запятой.

JSX — это выражение

После компиляции выражения JSX становятся обычными объектами JavaScript.

Это означает, что вы можете использовать JSX внутри операторов if или for, назначать его переменным, принимать его как аргументы и возвращать из функций:

Определение атрибутов в JSX:

Вы можете использовать кавычки для указания строковых литералов в качестве атрибутов:

Вы также можете использовать фигурные скобки для вставки JavaScript в атрибут:

Не помещайте кавычки вокруг фигурных скобок выражения JavaScript. Вы должны либо использовать кавычки (для строковых значений), либо фигурные скобки (для выражений), но не оба в одном и том же атрибуте.

Предупреждение

Поскольку JSX ближе к JavaScript, чем HTML, React DOM использует соглашение об именах — camelCase вместо имен атрибутов HTML.
Например, class становится className в JSX, а tabindex становится tabIndex.

Определение дочерних елементов в JSX

Если тег пуст, вы можете его закрыть с помощью />, как в XML:

Но если вам нужны дочерние элементы вы можете поступить следующим образом:

JSX предотвращает атаки инъекцией

Безопасно встраивать пользовательский ввод в JSX:

По умолчанию React DOM исключает любые значения, написанные в JSX, перед их рендерингом. Таким образом, это гарантирует, что вы никогда не сможете выполнить то, что явно не написано в вашем коде. Перед рендерингом все преобразуется в строку. Это помогает предотвратить XSS (Cross-site scripting) атаки.

JSX представляет объекты

Babel компилирует JSX по вызову React.createElement(). Два примера ниже идентичны:

React.createElement() выполняет несколько проверок, чтобы помочь вам писать код без ошибок, но по существу он создает такой объект:

Эти объекты называются элементами React. Вы можете думать о них как о описаниях того, что вы хотите видеть на экране. React читает эти объекты и использует их для построения и обновления DOM.

Мы рассмотрим рендеринг элементов React в DOM в следующем разделе.

Tip

Мы рекомендуем использовать «Babel» для вашего редактора, чтобы как ES6, так и JSX-код были правильно подсвечивался.

Leave a Reply

Добавить комментарий