React jsx что это
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:
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.
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.
2.3 Знакомство с JSX
Рассмотрим следующий код:
Этот симпатичный синтаксис в виде тегов не является ни строкой, ни HTML. Это синтаксический сахар JavaScript под названием JSX. Мы настоятельно рекомендуем использовать JSX вместе с React, так как он максимально ясно описывает внешний вид UI, одновременно включая в себя всю мощь JavaScript.
JSX производит React-элементы. Мы будем исследовать их отрисовку в DOM-дерево в следующем разделе. Ниже вы познакомитесь с основами JSX, необходимыми для начала разработки на React.
2.3.1 Почему JSX?
React учитывает тот факт, что механизм отрисовки связан с ещё несколькими важными механизмами UI: обработка событий, изменение состояния со временем и подготовка данных к отображению на экране.
Вместо того, чтобы искусственно отделять технологии, помещая разметку и логику в отдельные файлы, React разделяет задачи. Для этого он использует слабо связанные единицы: компоненты, которые содержат и разметку, и логику. Мы вернемся к компонентам в следующем разделе. Если же вас не устраивает помещение разметки в JS, данное обсуждение может поменять вашу точку зрения.
React не требует использования JSX. Тем не менее наше сообщество считает его крайне полезным, так как JSX дает абсолютную наглядность при работе с UI внутри кода JavaScript. Также он позволяет React показывать полезные предупреждения и сообщения об ошибках.
Итак, давайте приступим!
2.3.2 Встраиваемые выражения в JSX
Вы можете встроить любое JavaScript выражение в JSX, его нужно лишь обернуть в фигурные скобки.
В следующем примере мы встраиваем результат вызова JavaScript функции formatName(user) в элемент
Здесь мы поделили выражение JSX на несколько линий для читабельности. Хоть это и не обязательно, мы рекомендуем оборачивать JSX-выражения в круглые скобки () во избежание подводных камней автоматической вставки точки с запятой
2.3.3 JSX сам является выражением
После компиляции JSX-выражения становятся обычными JavaScript-объектами.
2.3.4 Указание атрибутов с помощью JSX
Мы можем использовать двойные кавычки для указания строковых литералов как атрибутов:
Наравне с кавычками мы можем использовать фигурные скобки, чтобы встроить JavaScript-выражение в атрибут:
Так как JSX ближе к JavaScript, чем к HTML, React DOM использует соглашение об именовании свойств в верблюжьейНотации, вместо имен HTML-атрибутов.
2.3.5 Указание потомков с помощью JSX
Если тег пустой, его можно тут же закрыть с помощью /> как в XML:
Однако JSX-теги могут иметь потомков:
2.3.6 JSX предотвращает атаки инъекцией
Как насчет пользовательского ввода? Об этом разработчики React также побеспокоились. В JSX можно встроить любой результат ввода пользователя и это будет абсолютно безопасно!
По умолчанию React DOM избегает обработки любых значений, встроенных в JSX, перед их отрисовкой. Таким образом он гарантирует, что вы никогда не сможете внедрить в ваше приложение что-то, что не написано явно. Всё, перед тем как будет отрисовано, преобразуется в строку. Это помогает избежать XSS-атак.
2.3.7 JSX представляет собой JavaScript-объекты
Эти два примера эквивалентны:
React.createElement() выполняет несколько проверок, чтобы помочь вам написать свободный от багов код, но по существу он создает объект наподобие следующего:
А если зайти в исходники, то этот объект будет выглядеть так:
Полный исходный код можно посмотреть здесь.
Данные объекты носят название «React-элементы». Вы можете представлять себе такой объект, как описание того, что вам необходимо увидеть на экране. React читает эти объекты, использует их для построения дерева DOM и хранит их в актуальном состоянии.
Мы рекомендуем использовать Babel language definition для вашего редактора, чтобы ES6 и JSX подсвечивались корректно.
Введение в 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 в следующем разделе.
Подробное руководство по JSX в React
Почему-то довольно мало внимания уделяется именно глубокому понимаю JSX, хотя он необходим для полноценной и быстрой работы с React. Я не нашел в рунете действительно подробного руководства по JSX в React и перевел эту статью, добавив немного от себя.
Введение в 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 в строчном выражении.
Для примера, вы ожидаете, что выдаст © 2017 :
Чтобы исправить эту проблему, вы можете какбы вынести все за пределы выражения:
Так и использовать константу, которая выведет Unicode представление, соответствующее HTML который вам нужно вывести:
Пробел в JSX
Чтобы добавить пробел в JSX есть два правила:
Горизонтальный пробел сокращается до одного.
Если у вас есть пробел между элементами на одной линии, то всё это сократится до одного пробела.
Вертикальные пробелы стираются:
Чтобы пофиксить эту проблему, вам надо явно добавить пробел, добавив выражения как тут:
Или вставив строку в выражении:
Добавление комментариев в JSX
Вы можете добавлять комментарии в JSX, используя обычные JavaScript комментарии внутри выражения:
Атрибуты расширения
В JSX довольно частой операцией является назначение значений атрибутам. Вместо того, чтобы делать это вручную:
Вы можете передать их с помощью оператора расширения Spread:
Циклы в JSX
Если у вас есть есть коллекция элементов по которой вам нужно пройтись циклом для создания JSX части компонента, то вы можете спокойно запустить цикл и затем добавить JSX в массив.
Email подписка!
Основы React: всё, что нужно знать для начала работы
Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.
Разобравшись с этим материалом, вы освоите следующее:
Предварительная подготовка
Рассмотрим такую ситуацию: к вам за помощью обращается маленький стартап. Они создали приятную страницу, пользуясь которой пользователи могут загружать в их сервис музыку и проигрывать её. Им хочется, чтобы вы сделали самое сложное — вдохнули в эту страницу жизнь.
Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.
Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).
Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.
Что такое React?
React — это инструмент для создания пользовательских интерфейсов. Его главная задача — обеспечение вывода на экран того, что можно видеть на веб-страницах. React значительно облегчает создание интерфейсов благодаря разбиению каждой страницы на небольшие фрагменты. Мы называем эти фрагменты компонентами.
Вот пример разбивки страницы на компоненты:
Каждый выделенный фрагмент страницы, показанной на рисунке, считается компонентом. Но что это значит для разработчика?
Что такое компонент React?
Компонент React — это, если по-простому, участок кода, который представляет часть веб-страницы. Каждый компонент — это JavaScript-функция, которая возвращает кусок кода, представляющего фрагмент страницы.
Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.
Напишем компонент внутри тега
Функции можно писать и так:
React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.
Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:
Можно и написать собственный компонент на JSX. Делается это так:
Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.
Сборка компонентов
Компоненты React можно помещать в другие компоненты.
Вот что выведет вышеприведённый код:
Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.
Классы компонентов
До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.
В том случае, если вас интересуют компоненты без состояния, предпочтение следует отдать функциональным компонентам, их, в частности, легче читать. О состоянии компонентов мы поговорим ниже.
JavaScript в JSX
В JSX-код можно помещать переменные JavaScript. Выглядит это так:
Теперь текст «I am a string» окажется внутри тега
Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:
Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:
Подводные камни JSX
Для того, чтобы этого добиться, нужно воспользоваться свойством className :
Особенности создаваемого компонента
Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?
Изменение компонента React на основе его состояния
Состояние — это инструмент, позволяющий обновлять пользовательский интерфейс, основываясь на событиях. Тут мы будем использовать состояние для изменения внешнего вида кнопки проигрывания музыки, основываясь на щелчке по ней. Кнопка может отображаться в одном из двух вариантов. Первый указывает на возможность запуска проигрывания, второй — на то, что музыка проигрывается, и этот процесс можно приостановить. Когда пользователь щёлкает по кнопке, меняется состояние, а затем обновляется пользовательский интерфейс.
В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.
Как компонент реагирует на события?
Пользователь может взаимодействовать с компонентом, щёлкая по кнопке проигрывания музыки. Мы хотим реагировать на эти события. Делается это посредством функции, которая занимается обработкой событий. Эти функции так и называются — обработчики событий.
Когда пользователь щёлкает по тексту, представленному тегом
Как должен работать компонент
Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.
Обмен данными между компонентами
Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.
Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:
Если мы поменяем состояние на this.state = < isMusicPlaying: true >; и перезагрузим страницу, на ней должна появиться кнопка паузы:
События как свойства
Свойства необязательно должны представлять собой какие-то данные. Они могут быть и функциями.
Неприятная особенность setState
Поэтому вот так поступать не следует:
Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.
Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.
Что такое ссылки?
Пришло время включить музыку. Для начала добавим тег :