Создание простого элемента JSX
React - это библиотека с открытым исходным кодом, созданная и поддерживаемая Facebook. Это отличный инструмент для создания пользовательского интерфейса (UI) современных веб-приложений. React использует синтаксическое расширение JavaScript под названием JSX, которое позволяет вам писать HTML непосредственно в JavaScript. Это имеет несколько преимуществ: он позволяет использовать полную программную мощность JavaScript в HTML и помогает сохранить читаемость кода.
По большей части JSX похож на HTML, который вы уже узнали, однако есть несколько ключевых различий, которые будут рассмотрены в ходе этих задач. Например, поскольку JSX является синтаксическим расширением JavaScript, вы можете писать JavaScript непосредственно в JSX. Для этого вы просто включаете код, который хотите обрабатывать как JavaScript в фигурных скобках:
{ 'this is treated as JavaScript code' }Помните об этом, поскольку он используется в нескольких будущих задачах. Однако, поскольку JSX это все-таки не настоящий JavaScript, код JSX должен быть скомпилирован в JavaScript. Транспилер Babel - популярный инструмент для этого процесса. Для вашего удобства это уже добавлено за кулисами этих задач. Если вам удастся написать синтаксически недействительный JSX, вы увидите, что первый тест в этих задачах терпит неудачу. Стоит отметить, что под капотом возникают вызовы
ReactDOM.render(JSX, document.getElementById('root'))Этот вызов функции отрисовывает ваш Реакт-компонент в HTML-документ.
Замечание: и все же, хотя вы будете видеть в Реакте много HTML-кода, очень важно понимать и никогда не забывать: это не HTML в чистом виде. Еще раз: это просто синтаксис, похожий на HTML. Более того, каждый тег в нем (div, span, table и т.п.) - все это по сути встроенные Реакт-компоненты. То есть все они работают так же, как и те компоненты, что будете писать и вы. Но этот "HTML" не вставляется как есть в чистом виде в DOM страницы (хотя чаще всего конечный вывод будет очень сильно соответствовать тому, что у вас прописано в Реакт-компоненте). Прежде чем ваш код попадет в конечный документ, Реакт его будет пытаться "распознать", обработает все атрибуты и дочерние элементы, составит у себя под капотом конечный кусок HTML-кода, и только потом его вставит в саму страницу. А далее уже будет работать то, для чего Реакт и придуман и за что его любят: если входящие параметры и/или состояние компонента будет меняться, Реакт будет у себя под капотом пересобирать конечный HTML и сравнивать с тем, что уже имеется в HTML-документе. Если расхождений никаких не будет, то он и документ не будет переписывать. А если будут расхождения (какие-то узлы добавятся или удалятся, изменятся атрибуты узлов и т.п.), то реакт просто заменит именно изменивщиеся узлы. Вам не придется следить за самим документом, думая, что добавить в него, а что убрать.
Самый простой пример того, что Реакт обрабатывает передаваемый код и выводит конечный HTML отличающийся от изначального: если вы передадите в какой-то тег внутри реакта атрибут onClick с передачей в него функции, которая сработает по клику мышкой, в конечном HTML-коде вы не найдете у этого тега HTML-атрибут onclick. Более того, если вы передадите именно onclick (строчными буквами), вы получите предупреждение от Реакта, что "Может вы имели ввиду onClick (с большой буквой)". А если вы передадите в него не функцию, а строку, то и вовсе такое в конечный HTML-код не попадет. Хотя нативный HTML позволяет такое. Вот пример:
<a href="#" onclick="alert('Сообщение'); return false;">Кликни меня и я выведу сообщение</a>Помните это! Даже если сейчас это все непонятно, по мере прохождения обучения старайтесь этот момент почаще вспоминать и больше понять. Иначе вы рискуете неправильно понять суть Реакта.
Инструкции: текущий код использует JSX для вывода HTML-тега div. Замените div элементом h1 и добавьте текст Hello JSX! внутри него.