React JS — JSX

Разработка React JS — Настройка среды

От автора: в React JS JSX используется для шаблонов вместо обычного JavaScript. Строгой необходимости в его использовании нет, однако ниже приведены некоторые преимущества, которые это дает.

 

Он быстрее, потому что выполняет оптимизацию при компиляции кода в JavaScript.

Он также предлагает безопасность типов, большинство ошибок могут быть обнаружены во время компиляции.

JSX упрощает и ускоряет запись шаблонов, если вы знакомы с HTML.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Использование JSX

В большинстве случаев JSX выглядит как обычный HTML. Мы уже использовали его в главе «Настройка среды». Посмотрите на код из App.jsx, где мы возвращаем div.

App.jsx

Несмотря на то, что он похож на HTML, есть несколько вещей, которые вам нужно иметь в виду при работе с JSX.

Вложенные элементы

Если мы хотим вернуть другие элементы, нам нужно обернуть их в один элемент контейнера. Обратите внимание, как мы используем div в качестве оболочки для элементов h1, h2 и p.

App.jsx

Атрибуты

Мы можем использовать собственные атрибуты в дополнение к стандартным свойствам и атрибутам HTML. Когда мы хотим добавить пользовательский атрибут, нам нужно использовать префикс data. В следующем примере мы добавили data-myattribute в качестве атрибута элемента p.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Выражения JavaScript

Выражения JavaScript могут использоваться внутри JSX. Нам просто нужно обернуть их в фигурные скобки {}. Следующий код выводит 2.

Мы не можем использовать в JSX if else, вместо этого мы можем использовать условные (троичные) выражения. В следующем примере переменная i равна 1, поэтому браузер отображает true. Если мы изменим ее на какое-то другое значение, будет отображено false.

Стили

React рекомендует использовать встроенные стили. Когда мы хотим установить встроенные стили, нам нужно использовать синтаксис camelCase. React также автоматически добавит px после значения числа для определенных элементов. В следующем примере показано, как добавить встроенный стиль myStyle для элемента h1.

Comments

При написании комментариев нам нужно поместить их фигурные скобки {}, когда мы хотим написать комментарий в дочерней части тега. Рекомендуется всегда использовать {} при написании комментариев, так как мы сохраняем последовательность при написании приложения.

Соглашение об именах

HTML-теги всегда используют имена тегов в нижнем регистре, тогда как компоненты React начинаются с заглавной буквы.
Примечание. Вы должны использовать className и htmlFor как имена атрибутов XML вместо class and for.

Это объясняется в официальной документации React: «Поскольку JSX — это JavaScript, идентификаторы, такие как class и for, могут ввести в заблуждение в качестве атрибутов XML. Вместо этого, компоненты DOM React ожидают имена свойств DOM, такие как className и htmlFor, соответственно».

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree