что такое jsx в react
Начало работы с React и JSX
Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)
В этом уроке мы рассмотрим, как начать работу с созданием приложения React и попытаться понять основы JSX. В учебнике предполагается, что вы хорошо разбираетесь в HTML и JavaScript.
Что такое React?
Что такое JSX?
Из официальных документов:
JSX является XML-подобным расширением синтаксиса для ECMAScript без какой-либо определенной семантики. Он НЕ предназначен для использования движками или браузерами. Это НЕ предложение включить JSX в саму спецификацию ECMAScript. Он предназначен для использования различными препроцессорами (транспилерами) для преобразования этих токенов в стандартный ECMAScript.
Зачем использовать JSX?
На самом деле не требуется использовать JSX во время работы с приложениями React. Вы можете использовать простой старый код JavaScript. Но использование JSX имеет свои преимущества:
1. По сравнению с JavaScript, проще писать JSX. Это так же просто, как открытие и закрытие тегов XML. Вот пример JSX:
Вот скомпилированный код React:
2. Код JSX обеспечивает читаемость и упрощает поддержку.
3. JSX оптимизирует код при компиляции, поэтому он работает быстрее по сравнению с эквивалентным кодом JavaScript.
Начинаем
Давайте продолжим изучение дальше, написав код JSX и выполнив его в браузере. Чтобы начать работу с созданием приложения React, создайте простую страницу index.html со следующей структурой страницы:
Запись компонентов React с помощью JSX
Давайте создадим компонент React, который отобразит приветственное сообщение. Вот как выглядит код:
Сохраните приведенные выше изменения и попробуйте просмотреть страницу index.html в браузере, и вы должны иметь увидеть сообщение Welcome TutsPlus в своем браузере.
Передача атрибутов компонентам
Большую часть времени требуется передавать данные нашим компонентам, которые будут выполняться или модифицироваться, а затем визуализироваться. Давайте посмотрим, как мы можем передавать атрибуты нашим компонентам и отображать данные.
Предположим, мы хотим передать имя нашему компоненту Message и отобразить его в нашем сообщении. Во-первых, мы добавим пользовательский атрибут к нашему компоненту.
Создание компонента Google Map React с использованием JSX
Теперь, когда мы знакомы с JSX и умеем создавать компоненты React с помощью JSX, давайте попробуем создать компонент React для отображения Карт Google.
Добавьте метод, называемый componentDidMount в компоненте React, и внутри этого метода определите связанные с картой переменные, как показано:
Попробуйте сделать компонент карты внутри #main div.
Подведем итоги
В этом уроке мы познакомились с базовым введением в React и JSX, чтобы вы могли начать их использовать. Мы увидели, как создавать компоненты React с помощью JSX, а также создали свой компонент Google Map React. В ближайших учебниках мы сосредоточимся на некоторых дополнительных функциях React.
Исходный код этого учебника доступен в GitHub.
А вы пробовали создавать свои компоненты React? Я хотел бы услышать ваш опыт. Сообщите мне свои мысли в комментарии ниже.
React: JSX и рендеринг
Что такое JSX?
Использование JSX
Давайте расширим наш вышеупомянутый пример, чтобы включить встроенное выражение.
Мы используем фигурные скобки <> для встраивания переменной в наше выражение JSX. И внутри этих фигурных скобок мы можем встроить любое допустимое выражение JavaScript. Такие как user.firstName или printName(user) например.
Мы рассмотрим рендеринг подробно позже в этой статье, пока не обращайте внимания на описанный выше метод рендеринга!
Давайте встроим результат вызванной функции JavaScript:
JSX под капотом
Так что же на самом деле происходит с JSX, когда мы визуализируем компоненты?
Каждый элемент, отображаемый Greeting компонентом, преобразуется в React.createElement вызовы. Приведенный выше пример переносится в:
React.createElement()
Давайте посмотрим на другой пример:
При компиляции этот код выглядит следующим образом:
Оба этих кодовых блока идентичны. И по сути объект создается так:
Этот объект известен как элемент React, и он очень похож на описание того, что вы видите на экране. React использует эти объекты для построения DOM и поддержания его в актуальном состоянии.
По сути, JSX просто делает React.createElement(component, props, …children) функцию более приятной для глаз. Другой пример:
Давайте теперь перейдем к рассмотрению еще нескольких концепций.
Параметры в JSX
Мы углубимся в props в моей следующей статье! На данный момент полезно помнить, что при построении компонентов они часто отображают дочерние элементы, которые требуют правильного отображения данных. Параметры, которые мы передаем, это то, что мы называем props. В JSX есть несколько способов сделать это, например:
Потомки в JSX
Когда ваши приложения станут больше, вы обнаружите, что некоторые компоненты понадобятся для визуализации потомков. И затем эти дочерние компоненты также должны будут отображать дальнейшие дочерние компоненты и так далее! С JSX мы можем достаточно хорошо управлять этими древовидными структурами элементов. Практическое правило гласит: все элементы, возвращаемые компонентом, становятся его дочерними элементами.
Давайте кратко рассмотрим способы визуализации дочерних элементов с помощью JSX:
Строковые литералы
Элементы JSX как потомки
Допустим, мы хотим вернуть дочерний элемент HTML
Выражения
Мы также можем передавать выражения как потомки для рендеринга в наш пользовательский интерфейс. Это было бы очень полезно с приложением списка дел, например:
Функции
Функции могут быть полезны при обработке повторений, таких как рендеринг повторяющихся элементов пользовательского интерфейса. Мы можем создать структуры, которые React будет автоматически отображать для нас.
Чтобы добавить новую страницу на наш веб-сайт, нам просто нужно добавить новый объект в массив pages и позволить React обработать все остальное!
Элементы рендеринга
Как я уверен, вы видели в этой статье, работая с JSX, мы работаем с элементами для рендеринга на нашей странице. Элемент описывает то, что вы видите на экране:
Несколько элементов, таких как этот, при объединении будут образовывать компоненты. Мы подробно рассмотрим компоненты в моей следующей статье!
Рендеринг наших элементов в DOM
Как правило, мы будем иметь подобный
Это называется нашим узлом DOM. Все внутри него обрабатывается React DOM.
И для рендеринга элемента React в наш корневой узел мы передаем оба вида ReactDOM.render(), следующим образом:
Hello! будет выведен на нашу страницу.
Обновление визуализированных элементов
Заключение
Итак мы рассмотрели основы JSX и рендеринга. И я надеюсь, вы начинаете понимать, насколько эти концепции полезны для нас, разработчиков, для создания приложений React.
Используя возможности JSX для передачи элементов в JavaScript, мы создаем очень работоспособный код. Структура JSX невероятно хорошо работает с React, и, несмотря на то, что 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 использует синтаксис HTML-in-JavaScript под названием JSX (JavaScript и XML). Знание HTML и JavaScript поможет вам изучить JSX и лучше определить, связаны ли ошибки в вашем приложении с JavaScript или с более специфической областью React.
Настроить локальную среду разработки React, создать стартовое приложение и понять основы его работы.
Привет React
Для создания веб-приложений разработчики используют React в тандеме с ReactDOM. React and ReactDOM часто обсуждаются в том же пространстве и используются для решения тех же проблем, что и другие настоящие фреймворки для веб-разработки. Когда мы ссылаемся на React как на «фреймворк», мы подразумеваем это разговорное понимание.
Когда использовать
В отличие от других платформ, рассматриваемых в этом модуле, React не обязывает к строгим правилам в отношении соглашений о коде или организации файлов. Это позволяет командам договариваться, что для них более подходит, и структурировать React проект соответствующим образом. React может отвечать за одну кнопку, несколько частей или же весь пользовательский интерфейс приложения.
Хотя React можно использовать для небольших частей интерфейса, «зайти» в него не так просто, как, к примеру, в jQuery, или даже во Vue. Куда легче это сделать создав всё приложение с помощью React.
Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьёзные требования к инструментарию, но его можно освоить.
В этой статье основное внимание будет уделено использованию React для создания всего пользовательского интерфейса с помощью create-react-app, предоставляемого Facebook.
Как React использует JavaScript?
React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript’s syntax so that HTML-like code can live alongside it. For example:
This heading constant is known as a JSX expression. React can use it to render that
Suppose we wanted to wrap our heading in a tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:
Note: The parentheses in the previous snippet aren’t unique to JSX, and don’t have any effect on your application. They’re a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
However, this looks kind of awkward, because the tag that starts the expression is not indented to the same position as its corresponding closing tag.
Of course, your browser can’t read JSX without help. When compiled (using a tool like Babel or Parcel), our header expression would look like this:
It’s possible to skip the compilation step and use React.createElement() to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don’t have to configure compilation yourself unless you want to.
Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you’re comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.
To read more about JSX, check out the React team’s JSX In Depth article.
Настройка вашего первого React приложения
There are many ways to use React, but we’re going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.