React и TypeScript: Практическое руководство. Быстрый старт

Откройте браузер и перейдите по адресу http://localhost:3000. Вы должны увидеть ваш компонент MyComponent отображенным внутри приложения.

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

3.8 Заключение

Создание компонентов является фундаментальной частью разработки приложений на React. Компоненты позволяют разбивать интерфейс на маленькие и переиспользуемые части, упрощая код и улучшая структуру проекта.

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

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

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

Глава 4. JSX и его синтаксис

JSX (JavaScript XML) представляет собой особый синтаксис в JavaScript, который применяется в React для создания структуры пользовательского интерфейса. Вместо того чтобы писать код на чистом JavaScript для создания элементов, можно использовать JSX для более удобной и декларативной разметки компонентов.

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

4.1 Понятие JSX

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

Пример JSX:

const element = <h1> Hello, World! </h1>;

В этом примере <h1> Hello, World! </h1> – это JSX элемент, который представляет собой заголовок первого уровня.

4.2 Основы синтаксиса JSX

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

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

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

Реальный DOM:

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

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

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

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

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

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