что такое jsx в react

Введение в JSX

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

Синтаксис этого странного тега не является ни строкой, ни HTML.

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

JSX создаёт «элементы» React. Мы рассмотрим их отрисовку в DOM в следующем разделе. Ниже вы можете найти основы JSX, необходимые для начала работы.

React принимает тот факт, что логика отрисовки по сути связана с другой логикой пользовательского интерфейса: как обрабатываются события, как изменяется состояние со временем и как данные подготовлены для отображения.

Вместо искусственного разделения технологий, помещая разметку и логику в отдельные файлы, React [разделяет ответственности] (https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8) с слабо связанными модулями, называемыми «компонентами», которые содержат вместе разметку и логику. Мы вернёмся к компонентам в следующем разделе, но если вы ещё не очень хорошо умеет размещать разметку в JS, этот доклад может убедить вас в другом.

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

Теперь, когда с этим разобрались, давайте начнём!

Встраивание выражений в JSX

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

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

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

Установка атрибутов с помощью JSX

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

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

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

Поскольку JSX ближе к JavaScript, чем к HTML, React DOM использует соглашение об именах свойств camelCase вместо имён атрибутов HTML.

Установка детей с помощью JSX

Теги JSX могут содержать дочерние элементы:

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

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

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

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

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

Ниже два примера идентичны:

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

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

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

Источник

Introducing JSX

Consider this variable declaration:

This funny tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

JSX produces React “elements”. We will explore rendering them to the DOM in the next section. Below, you can find the basics of JSX necessary to get you started.

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

With that out of the way, let’s get started!

Embedding Expressions in JSX

In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:

element.

We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.

JSX is an Expression Too

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:

Specifying Attributes with JSX

You may use quotes to specify string literals as attributes:

You may also use curly braces to embed a JavaScript expression in an attribute:

Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

Specifying Children with JSX

JSX tags may contain children:

JSX Prevents Injection Attacks

It is safe to embed user input in JSX:

JSX Represents Objects

Babel compiles JSX down to React.createElement() calls.

These two examples are identical:

React.createElement() performs a few checks to help you write bug-free code but essentially it creates an object like this:

These objects are called “React elements”. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.

We will explore rendering React elements to the DOM in the next section.

We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted.

Источник

Подробное руководство по JSX в React

Почему-то довольно мало внимания уделяется именно глубокому понимаю JSX, хотя он необходим для полноценной и быстрой работы с React. Я не нашел в рунете действительно подробного руководства по JSX в React и перевел эту статью, добавив немного от себя.

Читайте также: что такое abs в питоне

Введение в JSX

JSX это технология, которая была представлена React.

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

Сначала вы можете подумать, что использование JSX это смесь HTML и JavaScript (И как вы далее заметите еще и CSS).

Но это не так, так как то, что вы реально делаете при использовании JSX синтаксиса, это написание того же самого декларативного синтаксиса, но только тем, чем должен быть компонент UI.

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

Этюд к JSX

Вот как вы обозначите h1 тег, включающий в себя строку:

Это смахивает на странный микс JavaScript и HTML, но в реальности это всё чистый JavaScript.

А то, что похоже на HTML, на самом деле является синтаксическим сахаром для определения компонентов и их позиционирования внутри разметки.

Внутри JSX выражения можно совершенно легко вставить любые атрибуты:

Вам достаточно только обратить внимание тогда, когда у атрибута есть тире, что конвертирует его в горбатый регистр и обратите внимание ещё на эти два специальных случая:

class становится className

for становится htmlFor

Так как это зарезервированные слова в JavaScript.

Вот пример JSX, который заключает два компонента в div тег:

Тег всегда должен быть закрыт, так как это скорее XML, чем HTML (если вы помните деньки с XHTML, было схоже, но затем простой и понятный синтаксис HTML5 все таки взял верх). В этом случае используется самозакрывающийся тег.

Транспиляция JSX (трансформирование в читаемый браузером формат)

Браузер не может понимать JS файлы, которые содержат JSX код. Сначала они должны быть трансформированы в обычный и понятный JavaScript.

Как это сделать? В процессе транспиляции.

Мы уже говорили, что JSX опционален и в принципе, необязателен в React, потому что для каждой JSX строки, есть соответствующая JavaScript альтернатива и в конечном итоге именно в нее трансформируется наш JSX.

Для примера, следующие две конструкции полностью равнозначны:

Это очень простой пример для начала понимания, но вы уже можете представить, то как более сложный синтаксис на чистом JS может быть сравним с использованием JSX.

JS в JSX

JSX допускает использование любого, вставленного в него JavaScript.

Для примера, вот как использовать переменную, которую будет доступна отовсюду:

Это простой пример. Фигурные скобки принимают любой JS код:

Как вы видите, мы вложили JavaScript в JSX, объявленный внутри JavaScript, который вложен в JSX. В общем то тут вы можете пойти настолько глубоко, насколько захотите.

HTML в JSX

JSX напоминает HTML, но на самом деле это XML синтаксис.

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

Вам нужно закрывать все теги

JSX это как XHTML, если вы когда-либо его использовали, то вы уже знаете, что в нём надо закрывать все теги: забудьте про
, а вместо этого используйте самозкрывающийся тег
. Ну и также делайте с другими тегами.

Горбатый регистр это новый стандарт

В HTML вы найдете атрибуты без каких-либо изменений. В JSX они переименованы в свою вариацию на горбатом регистре:

class стал className

Так как JSX это JavaScript и class это зарезервированное слово, вы не можете написать:

Но вам нужно использовать:

Атрибуты стилей изменяют свою семантику

Атрибут style в HTML позволяет указывать инлайновые стили. В JSX это больше не принимается как строка, а в разделе CSS в React вы узнаете почему это так удобно.

CSS в React

JSX даёт клевый способ указывать CSS стили.

Если у вас есть небольшой опыт работы с инлайновым HTML, то на первый взгляд вам покажется, что вас отправили лет на 10–15 назад, в мир, где инлайновый CSS был абсолютной нормой.

Но стилизация с JSX это не тоже самое: во первых, вместо принятия строки, содержащей свойства CSS, JSX атрибут style принимает только объект. Это означает, то что вы определяете свойства в объекте:

CSS значения, которые вы пишите в JSX, слегка другие, чем чистый CSS:

Основные названия свойств пишутся в горбатом регистре

Значения это просто строки

Вы разделяете каждое “определение” с помощью запятой

Почему это предпочтительнее над чистым CSS/SASS/LESS?

CSS это нерешенная проблема. После его появления, появились десятки инструментов, связанных с ним, которые стремительно взлетали и также быстро были забыты. Главная проблема с JS в том, что тут нет областей видимости и довольно легко написать CSS, который не работает так, как надо, следовательно, “грязные быстрые решения” могут повлиять на те элементы, которые вообще не должны быть затронуты.

JSX позволяет компонентам полностью инкапсулировать их стили.

Решение ли это?

Инлайновые стили в JSX конечно хороши, пока вам не надо: написать медиа запросы, стили анимаций, сослаться на псевдо-классы, сослаться на псевдо-элементы.

Вкратце, они покрывают основы, но это далеко не конечное решение.

Формы в JSX

JSX добавляет некоторые изменения в то, как работают формы в HTML, с целью того, чтобы упростить жизнь разработчику.

value и defaultvalue

Это помогает решить некоторые неординарные моменты в поведении регулярного взаимодействия с DOM, когда проверка input.value и input.getAttribute(‘value’) возвращает одно настоящее значение и одно изначальное дефолтное значение.

Более последовательный onChange

JSX автоматическое экранирование

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

Это означает то, что вы можете столкнуться с некоторыми затруднениями во время использования HTML в строчном выражении.

Чтобы исправить эту проблему, вы можете какбы вынести все за пределы выражения:

Так и использовать константу, которая выведет Unicode представление, соответствующее HTML который вам нужно вывести:

Пробел в JSX

Чтобы добавить пробел в JSX есть два правила:

Горизонтальный пробел сокращается до одного.

Если у вас есть пробел между элементами на одной линии, то всё это сократится до одного пробела.

Вертикальные пробелы стираются:

Чтобы пофиксить эту проблему, вам надо явно добавить пробел, добавив выражения как тут:

Или вставив строку в выражении:

Добавление комментариев в JSX

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

Атрибуты расширения

В JSX довольно частой операцией является назначение значений атрибутам. Вместо того, чтобы делать это вручную:

Вы можете передать их с помощью оператора расширения Spread:

Циклы в JSX

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

Email подписка!

Источник

Создание элементов React с помощью JSX

Published on May 7, 2020

Автор выбрал Creative Commons для получения пожертвования в рамках программы Write for DOnations.

Введение

В этом обучающем руководстве вы узнаете, как описать элементы с помощью JSX. JSX — это абстракция, которая позволяет использовать синтаксис HTML внутри вашего кода JavaScript и с помощью которой вы можете создавать компоненты React, которые выглядят как стандартная HTML-разметка. JSX — это язык шаблонов для элементов React, поэтому он служит основой для любой разметки, которую React будет отображать в вашем приложении.

Поскольку JSX позволяет вам использовать JavaScript в вашей разметке, вы можете воспользоваться преимуществами функций и методов JavaScript, включая сопоставление массива и сокращенное вычисление для условных конструкций.

В рамках этого руководства вы должны будете захватывать события нажатия кнопки мыши по кнопкам непосредственно в разметке и искать случаи, когда синтаксис не соответствует стандартному HTML, например в случае с классами CSS. В конце этого обучающего руководства у вас будет рабочее приложение, которое использует самые разные функции JSX для отображения списка элементов, который имеет встроенный обработчик нажатий кнопки мыши. Это обычная практика для приложений React, которую вы часто будете использовать при изучении фреймворка. Также вы можете смешивать стандартные HTML-элементы с JavaScript, чтобы посмотреть, как React предоставляет возможность создавать небольшие куски кода, пригодные для повторного использования.

Предварительные требования

Вам потребуется среда разработки для Node.js; данное руководство было проверено для версии Node.js 10.19.0 и версии npm 6.13.4. Чтобы установить его в macOS или Ubuntu 18.04, следуйте указаниям руководства Установка Node.js и создание локальной среды разработки в macOS или раздела Установка с помощью PPA руководства Установка Node.js в Ubuntu 18.04.

Вы должны будете иметь возможность создавать приложения с помощью Create React App. Вы можете найти инструкции по установке приложения с помощью Create React App в статье Настройка проекта React с помощью Create React App.

Также вам потребуются базовые знания JavaScript, которые вы можете получить в руководстве Написание кода на JavaScript, а также базовые знания HTML и CSS. Хорошим источником информации о HTML и CSS является сеть разработчиков Mozilla.

Шаг 1 — Добавление разметки в элемент React

Как упоминалось ранее, React поддерживает специальный язык разметки JSX. Он представляет собой смесь синтаксиса HTML и JavaScript, которая выглядит примерно следующим образом:

Это JSX, специальный язык разметки, который делает компоненты React похожими на HTML, но обеспечивает возможности JavaScript.

На этом шаге вы узнаете, как добавить базовый синтаксис HTML в существующий элемент React. Для начала нам нужно добавить стандартные HTML-элементы в функцию JavaScript, а затем посмотреть скомпилированный код в браузере. Вам также придется группировать элементы, чтобы React смог скомпилировать их с минимальной разметкой, оставляя чистый HTML-вывод.

Создайте новый проект. В командной строке запустите следующий скрипт для установки нового проекта с помощью create-react-app :

После завершения создания проекта перейдите в его директорию:

В новой вкладке или окне терминала запустите проект, используя скрипт start Create React App. Браузер будет выполнять автообновление при изменениях, поэтому вы должны оставить этот скрипт работающим все время при работе:

Ваш браузер будет загружать приложение React, добавленное в Create React App.

Вы должны будете создать абсолютно новый набор компонентов, поэтому вам нужно начать с удаления определенного шаблонного кода, чтобы получить пустой проект. Откройте App.js в текстовом редакторе. Это корневой компонент, который встраивается в страницу. Все компоненты будут запускаться отсюда.

В новом окне терминала перейдите в папку проекта и откройте src/App.js с помощью следующей команды:

Вы увидите следующий файл:

Сохраните изменения и закройте текстовый редактор.

В заключение удалите логотип. В окне терминала введите следующую команду:

Вы не будете использовать этот файл SVG в вашем приложении. Кроме того, вам нужно удалить неиспользуемые файлы, которые не пригодятся вам в работе. Это позволит более оптимально организовать ваш код в долгосрочной перспективе.

Теперь, когда эти части вашего проекта удалены, вы можете перейти к изучению аспектов JSX. Этот язык разметки компилируется React и в результате становится HTML-кодом, который вы видите на странице. Если не слишком углубляться в детали, React принимает JSX и создает модель того, как ваша страница будет выглядеть, затем создает необходимые элементы и добавляет их на страницу.

Это означает, что вы можете написать что-то, что выглядит как HTML, и ожидать, что созданный HTML будет выглядеть аналогичным образом. Однако существует несколько моментов, которые необходимо прояснить.

Во-первых, если вы посмотрите на вкладку или окно, где запущен ваш сервер, то увидите следующее:

Это инструмент статического анализа, который сообщает, что вы не используете импортированный код React. При добавлении строки import React from ‘react’ в ваш код, вы импортируете код JavaScript, который конвертирует JSX в код React. Если JSX отсутствует, то нет и необходимости в импорте.

Давайте изменим это, добавив немного JSX. Начните с замены null на Hello, World :

Поскольку код JSX занимает несколько строк, вам нужно будет обернуть выражение в скобки.

Сохраните файл. После этого вы увидите ошибку в терминале, где запущен ваш сервер:

Когда вы возвращаете JSX из функции или оператора, необходимо вернуть один элемент. Этот элемент может иметь вложенные дочерние элементы, но на верхнем уровне должен быть один элемент. В этом случае вы возвращаете два элемента.

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

Примечание. Вы также могли обернуть код в div вместо пустого тега, если код возвращает один элемент. В этом примере пустой тег имеет преимущество, так как он не добавляет дополнительную разметку в получаемый вывод.

Сохраните код и закройте файл. Ваш браузер обновит и отобразит обновленную страницу с элементом в виде параграфа. Кроме того, когда код конвертируется, пустые теги отбрасываются:

Вы добавили базовый код JSX для вашего компонента и узнали, что нужно, чтобы включить JSX в отдельный компонент. На следующем шаге мы добавим несколько стилей в ваш компонент.

Шаг 2 — Добавление стилей в элемент с помощью атрибутов

На этом шаге вы начнете использование стилей для элементов в вашем компоненте, чтобы узнать, как HTML-атрибуты работают с JSX. В React есть много вариантов использования стилей. Некоторые из них подразумевают использование CSS в Javascript, а другие — предпроцессоров. В этом обучающем руководстве вы будете работать с импортируемыми CSS и классами CSS.

Теперь, когда у вас есть ваш код, пришло время добавить несколько стилей. Откройте файл App.css в предпочитаемом текстовом редакторе:

Поскольку вы начинаете с нового JSX, текущий CSS относится к элементам, которые больше не существуют. Поскольку вам не требуется CSS, вы можете удалить ненужный код.

После удаления кода вы получите пустой файл.

Далее вам нужно добавить несколько стилей для выравнивания текста по центру. В src/App.css добавьте следующий код:

Сохраните файл и закройте его. Браузер обновит страницу, но изменений вы не увидите. Прежде чем вы сможете увидеть изменения, вам нужно добавить класс CSS в ваш компонент React. Откройте код компонента JavaScript:

Во-первых, в текстовом редакторе замените пустые теги <> на

Далее вам нужно добавить имя класса. Именно здесь JSX начинает отклоняться от HTML. Если вы хотите добавить класс в обычный элемент HTML, вы должны сделать это следующим способом:

Примечание. В React атрибуты часто называют свойствами. Свойства — это элементы данных, которые вы можете передавать в другие пользовательские компоненты. Они выглядят как атрибуты, но не соответствуют ни одному из элементов HTML-разметки. В этом обучающем руководстве мы будем называть их атрибутами, поскольку они чаще всего используются как стандартные HTML-атрибуты. Это позволит отличать их от свойств, которые ведут себя отличным от HTML-атрибутов образом. Этот момент будет отражен в будущем в рамках этой серии обучающих материалов.

Теперь, когда вы знаете, как используется атрибут class в React, вы можете обновить ваш код для добавления стилей. В текстовом редакторе добавьте className=»container» в открывающий тег div :

Сохраните файл. После этого страница будет перезагружена, а содержимое будет выровнено по центру.

Атрибут className является уникальным для React. Вы можете добавить большинство атрибутов HTML в JSX без изменений. В качестве примера вернитесь в текстовый редактор и добавьте id greeting в элемент

. Он будет выглядеть как стандартный HTML:

Сохраните страницу и обновите окно браузера. Страница не изменится.

Пока что JSX выглядит как стандартная разметка, но преимущество JSX состоит в том, что хотя он и выглядит как HTML, но имеет функционал JavaScript. Это означает, что вы можете назначать переменные и ссылаться на них в ваших атрибутах. Для использования атрибута оберните его в фигурные скобки — <> — вместо кавычек.

В текстовом редакторе добавьте следующие выделенные строки, чтобы сослаться на атрибут:

До текущего момента вы работали с несколькими элементами отдельно, но вы можете также использовать JSX для добавления множества элементов HTML и внедрять их для создания сложных страниц.

Для начала вам нужно добавить несколько дополнительных элементов на страницу. Откройте файл src/App.js в предпочитаемом текстовом редакторе. Держите файл открытым в течение всего шага.

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

Когда вы будете писать код таким образом, вам придется использовать семантические элементы, которые помогут сделать страницу доступной и удобной для парсинга для экранного диктора.

Сохраните и закройте файл. После обновления страницы в браузере вы увидите следующее:

Теперь добавим несколько стилей. Откройте CSS-код в вашем текстовом редакторе:

Добавьте следующий выделенный код для удаления фона и границы по умолчанию для кнопок, а также увеличения размера шрифта:

Сохраните и закройте файл CSS. После обновления страницы в браузере вы увидите следующее:

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

Шаг 3 — Добавление событий в элементы

На этом шаге вы должны будете добавить события для элементов, используя особые атрибуты и захватывая события нажатия кнопки мыши на элементе кнопки. Вы узнаете, как получить информацию из этого события, чтобы вывести дополнительные действия, или использовать другую информацию внутри файла.

Теперь, когда у вас есть базовая страница с информацией, пришло время добавить несколько событий для страницы. Существует множество обработчиков событий, которые вы можете добавить в элементы HTML. React предоставляет доступ ко всем этим возможностям. Поскольку ваш код JavaScript связан с вашей разметкой, вы можете быстро добавить события, сохраняя оптимальную организацию вашего кода.

Сохраните файл. В браузере нажмите одно из эмодзи, после чего вы получите сигнал с именем.

Сохраните файл. В браузере нажмите на эмодзи, после чего вы увидите тот же сигнал.

На этом шаге вы добавили событие для каждого элемента. Вы также увидели, как JSX использует немного отличающиеся имена для событий элементов, а также начали писать многократно используемый код, принимая функцию и используя ее для нескольких элементов. На следующем шаге вы будете писать функцию для многократного использования, которая возвращает элементы JSX, вместо того, чтобы писать каждый элемент вручную. Это позволит дополнительно уменьшить количество дублирующего кода.

Шаг 4 — Сопоставление данных для создания элементов

На этом шаге мы перейдем к дальнейшему знакомству с использованием JSX в качестве простой разметки. Вы научитесь совмещать его с JavaScript для создания динамической разметки, которая позволяет сократить код и повысить удобочитаемость. Вы выполните рефакторинг кода в массив, по которому вы пройдетесь в цикле для создания HTML-элементов.

JSX не ограничивается использованием синтаксиса в стиле HTML. Он позволяет также использовать JavaScript непосредственно в вашей разметке. Вы уже попробовали сделать это, передавая функции в атрибуты. Вы также использовали переменные для повторного использования данных. Теперь пришло время создать JSX прямо из данных, используя стандартный код JavaScript.

Добавьте массив, который будет содержать объекты, которые содержат эмодзи и имя эмодзи. Обратите внимание, что эмодзи должны быть окружены кавычками. Создайте этот массив над функцией App :

Для создания компонентов React вам нужно будет преобразовать данные в элементы JSX. Чтобы сделать это, вам нужно будет выполнить сопоставление данных и вернуть элемент JSX. Существует несколько проблем, которые вам нужно учитывать при написании кода.

Во-первых, группа элементов должна быть окружена контейнером

Здесь представлен упрощенный пример, который осуществляет сопоставление списка имен в

Получаемый в результате HTML будет выглядеть следующим образом:

В текстовом редакторе добавьте следующее:

Сохраните файл. После обновления окна браузера вы увидите данные. Обратите внимание, что ключ отсутствует в сгенерированном HTML.

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

Шаг 5 — Условное представление элементов с сокращенным вычислением

На этом шаге мы будем использовать сокращенное вычисление для демонстрации определенных элементов HTML при определенных условиях. Это позволит вам создавать компоненты, которые смогут скрывать или показывать HTML на основе дополнительной информации, обеспечивающей гибкость для ваших компонентов при разных ситуациях.

Существуют ситуации, когда компонент должен в определенных ситуациях отображать информацию, а в других — нет. Например, вы можете показать пользователю сообщение с сигналом при соблюдении одних условий, либо вы можете вывести информацию об учетной записи для администратора, которая не должна быть доступна обычному пользователю.

Чтобы сделать это, вам нужно будет использовать сокращенное вычисление. Это означает, что вы будете использовать условные операторы, и если первая часть условия будет выполняться, оператор будет возвращать информацию во второй части.

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

Чтобы сделать это, добавьте следующие выделенные строки:

фигурными скобками. Перед фигурными скобками вы добавили displayAction && для создания условного оператора.

Сохраните файл, после чего вы увидите, как элемент исчез в браузере. Что более важно, он не появляется в сгенерированном HTML. Это не то же самое, что сокрытие элемента в CSS. Он не существует вообще в итоговой разметке.

Теперь значение displayAction жестко задано, но вы можете хранить это значение в виде состояния или передавать его в качестве свойства из родительского компонента.

На этом шаге вы научились отображать элементы при определенных условиях. Это дает возможность создавать компоненты, которые настраиваются в зависимости от другой информации.

Заключение

К данному моменту мы создали пользовательское приложение с помощью JSX. Вы узнали, как добавить в компонент элементы в стиле HTML, добавить стили для этих элементов, передавать атрибуты для создания семантической и доступной разметки, а также добавить события в компоненты. Затем вы научились совмещать JavaScript с JSX, чтобы сократить количество дублирующего кода и показывать или скрывать элементы в зависимости от условий.

Это основа для создания будущих компонентов. Используя комбинацию JavaScript и HTML, вы можете создавать динамичные компоненты, которые обладают гибкостью и позволяют вашим приложениям расти и изменяться.

Если вы хотите узнать больше о React, ознакомьтесь с нашей страницей, посвященной React.

Источник