интерфейсов. JSX напоминает HTML, но имеет некоторые исключения и интересные особенности:
– Теги. В JSX можно создавать элементы с использованием тегов, как в HTML. Например, для создания блока текста используется тег <div>, для заголовка – <h1>, а для изображения – <img>. Однако есть некоторые исключения, такие как использование <className> вместо <class> для определения классов элементов.
– Значения атрибутов. Вы также можете добавлять атрибуты к JSX элементам, как в HTML. Например, для указания источника изображения и его альтернативного текста используются атрибуты src и alt.
– Вложенные элементы. JSX позволяет создавать вложенные элементы, аналогично HTML. Это значит, что вы можете размещать одни элементы внутри других:
<div>
<h1> Заголовок </h1>
<p> Параграф текста </p>
</div>
– Интерполяция. Одной из мощных особенностей JSX является возможность вставки значений JavaScript внутрь элементов с использованием фигурных скобок {}. Это называется интерполяцией. Например, вы можете вставить значение переменной name в текст:
const name = «John’
const greeting = <p> Привет, {name}! </p>;
Некоторые исключения в синтаксисе JSX включают замену class на className, как уже упоминалось ранее, и также замену for на htmlFor при работе с атрибутами class и for. Эти изменения внесены для избежания конфликтов с ключевыми словами JavaScript и HTML.
4.3 Рендеринг JSX
Для отображения JSX на веб-странице, необходимо использовать React – библиотеку, которая предоставляет компоненты, создаваемые с использованием JSX, и затем рендерит их на веб-странице с помощью специализированных функций. Этот подход позволяет создавать динамичные и масштабируемые веб-приложения, которые реагируют на пользовательские действия и изменения данных.
Пример рендеринга JSX в React:
import React from ’react’
import ReactDOM from ’react-dom’
const element = <h1> Hello, React! </h1>
ReactDOM.render (element, document.getElementById (’root’))
<h1> Hello, React! </h1>
ReactDOM.render ()
Пояснения:
– JSX элемент <h1> Hello, React! </h1> сохраняется в переменной element.
– ReactDOM – это библиотека, предоставляемая React, которая используется для взаимодействия с DOM (Document Object Model) в веб-приложениях. Она позволяет React-компонентам отображаться и обновляться в браузере путем управления виртуальным DOM и его согласованием с реальным DOM.
– ReactDOM.render () используется для отображения element в элементе с идентификатором root на веб-странице.
Основные функции ReactDOM включают:
– ReactDOM.render (element, container): Эта функция используется для отображения React-элемента или компонента в заданном контейнере (обычно в div или другом HTML-элементе). Она инициализирует процесс создания виртуального DOM и его синхронизацию с реальным DOM.
– ReactDOM. hydrate (element, container): Эта функция аналогична ReactDOM.render, но предназначена для гидратации (hydration) существующего серверного рендеринга19. Она используется, когда React приложение запускается на стороне клиента и должно восстановить состояние, созданное на сервере.
– ReactDOM.
Гидратация существующего серверного рендеринга означает, что когда веб-страница создается на сервере и отправляется на ваш компьютер, она уже содержит часть информации о том, как должен выглядеть интерфейс.
