4.3 Рендеринг JSX

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

Пример рендеринга JSX в React:

import React from ’react’
import ReactDOM from ’react-dom’
const element =

Hello, React!

ReactDOM.render (element, document.getElementById (’root’))

Hello, React!

ReactDOM.render ()

Пояснения:

– JSX элемент

Hello, React!

сохраняется в переменной 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. unmountComponentAtNode (container): Эта функция используется для отключения (размонтирования) React-компонента, который был ранее отображен в заданном контейнере.

– Другие функции, такие как ReactDOM.createPortal, которые позволяют встраивать React-компоненты вне их обычной иерархии DOM.

Примечание: Виртуальный DOM (Document Object Model) и реальный DOM представляют собой две разные концепции, связанные с манипуляциями интерфейсом в веб-разработке.

Реальный DOM:

– Реальный DOM – это фактическое представление структуры веб-страницы, доступное в браузере. Он представляет дерево объектов, где каждый узел представляет собой часть страницы.

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

Виртуальный DOM:

– Виртуальный DOM – это абстрактное представление структуры веб-страницы, существующее в памяти программы (обычно на языке JavaScript). Он является копией реального DOM.

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

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

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

4.4 Преимущества JSX

Использование JSX в React обладает рядом преимуществ:

– Читаемость кода. JSX делает код более читаемым и похожим на HTML, что упрощает понимание структуры интерфейса. Разработчики могут легко определить иерархию элементов, что сделает поддержку и рефакторинг кода более удобными.

– Интерполяция данных. Вы можете вставлять переменные и выражения JavaScript в JSX с использованием фигурных скобок {}, что делает динамическое создание интерфейса простым. Это позволяет вам связывать компоненты с данными и динамически обновлять контент на веб-странице.

– Компоненты. JSX позволяет создавать компоненты, которые можно переиспользовать в разных частях приложения. Это способствует модульности и повторному использованию кода, что сокращает дублирование и упрощает обслуживание приложения.

Использование JSX в React упрощает разработку интерфейсов, делая код более выразительным и функциональным.

4.5 Заключение

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

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

Глава 5. Работа с компонентами и их вложенность

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

5.1 Создание компонента

Создание компонента в React – это простой процесс. Существуют функциональный или классовый компоненты.

– Функциональный компонент основан на функциях JavaScript и представляет из себя функцию, которая принимает входные данные (props) и возвращает JSX элемент, который будет отображаться на экране. Функциональные компоненты стали более популярными с появлением React Hooks[20 - React Hooks – это функции, предоставляемые библиотекой React, которые позволяют добавлять состояние и другие возможности React в функциональные компоненты.] и обладают следующими ключевыми характеристиками:

– Простота и чистота. Функциональные компоненты обычно более краткие и легче читаемы, чем классовые компоненты. Они представляют из себя обычные JavaScript-функции, что делает код более понятным.

– Использование Hooks. С появлением React Hooks (таких как: useState, useEffect и многие другие) функциональные компоненты могут управлять состоянием и жизненным циклом компонента так же, как классовые компоненты. Это позволяет функциональным компонентам выполнять разнообразные задачи, например, такие как: управление состоянием, выполнение побочных эффектов и многое другое.

– Отсутствие this. В функциональных компонентах отсутствует ключевое слово this, что устраняет проблемы с областью видимости и контекстом, связанными с классовыми компонентами.

– Большая производительность. Функциональные компоненты могут иметь более высокую производительность из-за отсутствия накладных расходов, связанных с созданием экземпляров классов.

– Легко тестируемы. Функциональные компоненты часто более легко поддаются модульному тестированию, так как их поведение зависит только от входных данных (props) и их вывода (возвращаемого JSX).

Пример функционального компонента:

import React from ’react’
function MyComponent () {
return

Привет, это мой первый компонент!

}
export default MyComponent

Функциональные компоненты являются предпочтительным способом создания компонентов в React.

– Классовый компонент определен как класс JavaScript и расширяет базовый класс React.Component. Классовые компоненты имеют следующие ключевые характеристики:

– Состояние (State). Классовые компоненты имеют доступ к локальному состоянию, которое может быть использовано для хранения и управления данными, изменяющимися во времени. Состояние компонента может быть изменено с помощью метода setState, и изменения состояния приводят к перерисовке компонента.

– Жизненный цикл (Lifecycle). Классовые компоненты поддерживают разнообразные методы жизненного цикла, такие как componentDidMount, componentDidUpdate, и componentWillUnmount. Жизненный цикл компонента – это специальные методы, которые вызываются в разные моменты времени в жизни компонента. Например, componentDidMount вызывается после того, как компонент был добавлен к DOM. Эти методы позволяют выполнять действия при монтировании, обновлении и размонтировании компонента.

– Пропсы (Props). Классовые компоненты могут принимать входные данные, передаваемые через свойство props. Пропсы представляют собой данные, которые компонент может использовать для настройки своего поведения или отображения.

– Контекст (Context). Классовые компоненты могут использовать механизм контекста React для передачи данных глубоко в иерархии компонентов без необходимости передавать пропсы через каждый уровень.

Пример классового компонента:

import React, {Component} from ’react’

class MyComponent extends Component {

render () {

return

Привет, это мой компонент!

}

}

export default MyComponent

5.2 Использование компонентов

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

Пример использования функционального компонента:

import React from ’react’
import MyComponent from». /MyComponent’
function App () {
return (

);
}
export default App

5.3 Вложенность компонентов

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

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

– Пропсы (Props) и состояние (State). Вложенные компоненты могут обмениваться данными через пропсы (входные данные) и состояние (локальные данные). Родительский компонент может передать данные дочернему компоненту через пропсы, что позволяет дочернему компоненту отображать эти данные. Дочерний компонент может также передавать информацию обратно в родительский компонент с помощью обратных вызовов.

– Поддержка композиции. Вложенность компонентов позволяет создавать компоненты, которые могут быть переиспользованы в разных частях приложения. Можно создавать маленькие компоненты, которые решают конкретные задачи, и затем объединять их в более крупные компоненты.

– Разделение ответственности. Разделение функциональности между компонентами позволяет каждому компоненту сосредотачиваться на выполнении конкретных задач. Это улучшает читаемость и обеспечивает модульность кода.

– Управление структурой и стилями. Вложенные компоненты также могут использоваться для создания сложных макетов и структур интерфейса. Каждый компонент может быть стилизован и настроен независимо, что способствует упрощению управления стилями.

Пример вложенности компонентов:

import React from ’react’
function Header () {
return

Заголовок

}
function Sidebar () {
return (

)
}
function App () {
return (