«index. js» и «App. js» – это пользовательские компоненты, созданные для React-приложения. Это два важных компонента, которые играют разные роли:
– index. js (или index. tsx). Это точка входа в React-приложение. Этот файл обычно является стартовой точкой, с которой начинается выполнение приложения. Он отвечает за инициализацию React и рендеринг корневого компонента приложения в HTML-элементе на веб-странице. В этом файле используется функция ReactDOM.render для монтирования приложения в DOM.
– App. js (или App. tsx) – это корневой компонент React-приложения. Он представляет собой основу приложения, внутри которого определяется его структура и логика. Обычно компонент «App» содержит маршрутизацию (если это не одностраничное приложение), заголовок, меню и контейнер для других компонентов, формирующих страницу.
– Пример index. js:
import React from ’react’
import ReactDOM from ’react-dom/client’
import». /index. css’
import App from». /App’
import reportWebVitals from». /reportWebVitals’
const root = ReactDOM.createRoot(document.getElementById (’root’) as HTMLElement)
root.render (
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals ()
reportWebVitals – это функция, предоставляемая Create React App для измерения производительности приложения. Она отправляет данные о производительности на сервер Google Analytics (по умолчанию), что позволяет отслеживать метрики производительности приложения в реальном времени. Эти метрики могут включать в себя время загрузки страницы, время рендеринга компонентов, использование памяти и другие аспекты производительности. Они могут помочь выявить узкие места в приложении и улучшить его производительность. Эта функция не является обязательной и вы можете упустить её в своем приложении. Таким образом, если вы не планируете использовать reportWebVitals для отслеживания производительности, вы можете безопасно удалить соответствующие импорты и вызовы функции из index. js. Это не повлияет на основной функционал вашего приложения.
<React.StrictMode> – это компонент, предоставляемый React, который помогает выявлять потенциальные проблемы в компонентах и их потомках. Он не влияет на продакшен-сборку12, но помогает разработчикам рано обнаруживать и исправлять проблемы.
Он может выявить следующие виды проблем:
– Устаревшие методы жизненного цикла. Предупреждает, если ваш компонент использует устаревшие методы жизненного цикла, которые могут быть удалены в будущих версиях React.
– Побочные эффекты при рендеринге. Если код при рендеринге компонента вызывает побочные эффекты (например, изменение состояния, которое влияет на сам компонент), <React.StrictMode> поможет обнаружить такие сценарии.
– Использование несовместимых API. Предупреждает о применении устаревших или несовместимых с версией React API в приложении.
Запись document.getElementById (’root’) as HTMLElement означает, что мы пытаемся получить элемент с идентификатором ’root’ из DOM (Document Object Model) веб-страницы и привести его к типу HTMLElement. Этот код представляет собой так называемый «Type Assertion»13 в TypeScript, который используется для явного указания типа переменной.
При этом:
– document – это объект, представляющий веб-страницу в браузере.
– getElementById (’root’) – это метод объекта document, который пытается найти элемент на веб-странице с указанным идентификатором ’root’.
– as HTMLElement – это TypeScript-синтаксис, который используется для явного указания типа переменной. В данном случае, мы явно указываем, что результат вызова getElementById (’root’) должен быть интерпретирован как объект типа HTMLElement.
Обычно это используется, когда TypeScript не может определить тип элемента автоматически, и мы хотим явно указать, какой тип ожидается. В данном случае, мы ожидаем, что элемент с идентификатором ’root’ является элементом типа HTMLElement.
Пример «App. js»:
import React from «react»
import». /App. css»
function App () {
return (
<div className=«App»>
<header>
<h1> Мое React-приложение </h1>
</header>
<main>
{/* Здесь может быть контент вашего приложения */}
</main>
</div>
);
}
export default App
– Заполняем файл tsconfig. json
Файл tsconfig. json – это конфигурационный файл для TypeScript, который используется для настройки параметров компиляции и поведения TypeScript-компилятора14 (tsc). Этот файл обычно располагается в корневой директории проекта и определяет, как TypeScript должен обрабатывать и компилировать исходный код. В целом, tsconfig. json позволяет настроить проект так, чтобы TypeScript понимал, как правильно компилировать код в JavaScript.
В файле tsconfig. json можно определить ряд важных параметров и настроек для компиляции TypeScript. Вот некоторые из них:
– compilerOptions: Этот раздел определяет параметры компиляции TypeScript. Некоторые распространенные опции включают:
– target: Определяет версию JavaScript, на которую будет транспилирован TypeScript-код (например, «ES5» или «ES6»).
– module: Указывает, как TypeScript должен обрабатывать модули (например, «CommonJS», «ESNext»).
– outDir: Задает директорию, в которую будут скомпилированы выходные файлы.
– strict: Включает или отключает строгую типизацию.
– jsx: Определяет, как TypeScript должен обрабатывать JSX (например, «react» или «preserve»).
– include и exclude: Эти опции определяют, какие файлы TypeScript должны включаться в процесс компиляции (include) и какие файлы исключаться (exclude).
– extends: Позволяет использовать другой конфигурационный файл в качестве базового и переопределить или дополнить его настройки.
– files и include: Определяют, какие файлы исходного кода TypeScript должны быть включены в компиляцию. Файлы перечислены в виде массива строк с путями к файлам.
– exclude: Определяет, какие файлы исходного кода TypeScript следует исключить из компиляции. Это также представлено в виде массива строк с путями к файлам.
– baseUrl и paths: Определяют настройки для алиасов путей к модулям, что может упростить импорт файлов в TypeScript.
При настройке tsconfig. json в своем проекте, убедитесь, что параметры соответствуют вашим требованиям, и что ваш код успешно компилируется и работает в соответствии с ожиданиями. Этот файл является важной частью инфраструктуры TypeScript-проекта и помогает обеспечить более точное и надежное развитие приложения. Правильная настройка tsconfig. json может также значительно улучшить процесс совместной разработки и обеспечить соблюдение стандартов кодирования в вашем проекте. В корне с проектом создайте файл tsconfig. json и напишите в него следующий код:
{
«compilerOptions»: {
«target»: «es5»,
«lib»: [
«dom»,
"dom.iterable»,
«esnext»
],
«allowJs»: true,
«skipLibCheck»: true,
«esModuleInterop»: true,
«allowSyntheticDefaultImports»: true,
«strict»: true,
«forceConsistentCasingInFileNames»: true,
«noFallthroughCasesInSwitch»: true,
«module»: «esnext»,
«moduleResolution»: «node»,
«resolveJsonModule»: true,
«isolatedModules»: true,
«noEmit»: true,
«jsx»: «react-jsx»
},
«include»: [
«src»
]
}
3.6 Файл README.md
Файл README.md в проекте на TypeScript (или любом другом проекте) обычно служит для предоставления информации о проекте, его использовании и внутренней структуре. Этот файл предназначен для документирования проекта и обеспечения ясности для других разработчиков, которые могут работать с ним. В README.md вы можете включить описание проекта, инструкции по установке и запуску, а также примеры использования и важную информацию о зависимостях15 и лицензии. Кроме того, README.md может содержать ссылки на документацию, рекомендации по структуре проекта, а также контактные данные для связи с авторами или поддержкой проекта, делая его ценным ресурсом для совместной разработки и использования.
Обычно в файл README.md для проекта на TypeScript включают следующее:
– Заголовок и описание. Начните файл README.md с заголовка, который описывает ваш проект. Затем предоставьте краткое описание проекта, которое объясняет, что ваше приложение делает.
– Установка. Опишите, как установить и настроить ваш проект. Укажите, какие зависимости нужно установить, какой пакетный менеджер16 использовать (например, npm или yarn) и какие команды выполнить.
– Использование. Предоставьте примеры кода или инструкции о том, как использовать ваше приложение. Объясните, как запустить приложение, какие команды или параметры доступны.
– Примеры. Если ваш проект включает в себя примеры кода, покажите их здесь. Это может быть особенно полезно для других разработчиков, чтобы быстро понять, как использовать вашу библиотеку или приложение.
– Структура проекта17. Поясните структуру каталогов и файлов в вашем проекте. Это поможет другим разработчикам быстро ориентироваться в коде.
– Лицензия. Укажите информацию о лицензии, в соответствии с которой распространяется ваш проект. Это важно для определения правил использования и распространения вашего кода.
– Ссылки и контакты. Если у вас есть веб-сайт, репозиторий18 на GitHub или другие ресурсы, связанные с проектом, укажите их здесь. Также предоставьте контактную информацию для обратной связи или вопросов.
Пример простейшего файла README.md для проекта на TypeScript:
# Проект на TypeScript
Этот проект представляет собой пример README.md файла для проекта на TypeScript.
## Установка
1. Установите зависимости с помощью npm:
```bash
npm install
3.7 Запуск приложения
Убедитесь, что ваш разработческий сервер остановлен (если запущен), иначе введите Ctrl + C в терминале.
Запустите разработческий сервер снова с помощью команды:
npm start
Откройте браузер и перейдите по адресу 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, и только изменения применяются к фактической структуре. Это позволяет сделать процесс обновления более эффективным, так как браузеру не нужно пересчитывать и перерисовывать всю страницу, а только те части, которые изменились.
Таким образом, виртуальный 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 Hooks20 и обладают следующими ключевыми характеристиками:
– Простота и чистота. Функциональные компоненты обычно более краткие и легче читаемы, чем классовые компоненты. Они представляют из себя обычные JavaScript-функции, что делает код более понятным.
– Использование Hooks. С появлением React Hooks (таких как: useState, useEffect и многие другие) функциональные компоненты могут управлять состоянием и жизненным циклом компонента так же, как классовые компоненты. Это позволяет функциональным компонентам выполнять разнообразные задачи, например, такие как: управление состоянием, выполнение побочных эффектов и многое другое.
– Отсутствие this. В функциональных компонентах отсутствует ключевое слово this, что устраняет проблемы с областью видимости и контекстом, связанными с классовыми компонентами.
– Большая производительность. Функциональные компоненты могут иметь более высокую производительность из-за отсутствия накладных расходов, связанных с созданием экземпляров классов.
– Легко тестируемы. Функциональные компоненты часто более легко поддаются модульному тестированию, так как их поведение зависит только от входных данных (props) и их вывода (возвращаемого JSX).
Пример функционального компонента:
import React from ’react’
function MyComponent () {
return <h1> Привет, это мой первый компонент! </h1>
}
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 <h1> Привет, это мой компонент! </h1>
}
}
export default MyComponent
5.2 Использование компонентов
Чтобы использовать компонент в другом компоненте или приложении, вы должны его импортировать и затем использовать как тег JSX.
Пример использования функционального компонента:
import React from ’react’
import MyComponent from». /MyComponent’
function App () {
return (
<div>
<h1> Мое приложение React </h1>
<MyComponent />
</div>
);
}
export default App
5.3 Вложенность компонентов
Одним из сильных сторон React является возможность вложения компонентов друг в друга для создания более сложных интерфейсов путем объединения более простых компонентов в более крупные структуры. Вложенность компонентов помогает в организации кода, повторном использовании и поддерживаемости приложения. Вот некоторые важные аспекты вложенности компонентов в React:
– Иерархия компонентов. В React компоненты могут быть вложены друг в друга, создавая иерархию. Эта иерархия может быть глубокой и сложной, и она определяет, как компоненты взаимодействуют друг с другом.
– Пропсы (Props) и состояние (State). Вложенные компоненты могут обмениваться данными через пропсы (входные данные) и состояние (локальные данные). Родительский компонент может передать данные дочернему компоненту через пропсы, что позволяет дочернему компоненту отображать эти данные. Дочерний компонент может также передавать информацию обратно в родительский компонент с помощью обратных вызовов.
– Поддержка композиции. Вложенность компонентов позволяет создавать компоненты, которые могут быть переиспользованы в разных частях приложения. Можно создавать маленькие компоненты, которые решают конкретные задачи, и затем объединять их в более крупные компоненты.
– Разделение ответственности. Разделение функциональности между компонентами позволяет каждому компоненту сосредотачиваться на выполнении конкретных задач. Это улучшает читаемость и обеспечивает модульность кода.
– Управление структурой и стилями. Вложенные компоненты также могут использоваться для создания сложных макетов и структур интерфейса. Каждый компонент может быть стилизован и настроен независимо, что способствует упрощению управления стилями.
Пример вложенности компонентов:
import React from ’react’
function Header () {
return <h1> Заголовок </h1>
}
function Sidebar () {
return (
<div>
<h2> Боковая панель </h2>
</div>
)
}
function App () {
return (
<div>
<Header />
<Sidebar />
<p> Основное содержание </p>
</div>
)
}
export default App
В этом примере Header и Sidebar являются дочерними компонентами, вложенными в компонент App. Это позволяет легко организовывать структуру интерфейса и создавать компоненты, которые можно переиспользовать.
5.4 Компонент высшего порядка
Компонент высшего порядка (Higher Order Component, HOC) в React – это функция, которая принимает компонент и возвращает новый компонент с дополнительной функциональностью.
Допустим, у вас есть компонент, но вам нужно добавить ему какие-то общие функции или свойства, которые могли бы понадобиться в разных частях приложения. Вместо того чтобы копировать и вставлять один и тот же код в разные места, вы можете использовать HOC. Эта функция «обернет» компонент, добавив к нему нужные функции или свойства.
Другими словами, HOC позволяет повторно использовать код и легко расширять функциональность компонентов.
Например, если у вас есть компонент для отображения информации о пользователе, а вы хотите добавить к нему функцию загрузки данных из сети, HOC может помочь сделать это без необходимости изменения самого компонента.
Пример: у вас есть компонент UserComponent, который отображает имя пользователя:
import React from ’react’
const UserComponent = (props) => {
return <div> Привет, {props.name}! </div>;
}
export default UserComponent
Теперь вы хотите добавить к этому компоненту возможность загрузки данных о пользователе из сети. Для этого мы можем использовать HOC:
import React, {Component} from ’react’;
const withDataFetching = (WrappedComponent) => {
return class extends Component {
constructor (props) {
super (props);
this.state = {
data: null,
loading: true,
}
}
async componentDidMount () {
try {
const response = await fetch(this.props. url)
const data = await response. json ()
this.setState ({data, loading: false})
} catch (error) {
console.error («Ошибка:», error)
this.setState ({loading: false})
}
}
render () {
return (
<WrappedComponent
{…this.props}
data={this.state. data}
loading={this.state. loading}
/>
)
}
}
}
export default withDataFetching
Здесь мы должны создать HOC withDataFetching, который загружает данные из указанного URL и передает их в обернутый компонент. После этого мы можем использовать его с нашим UserComponent:
import React from ’react’
import withDataFetching from». /withDataFetching’
const UserComponent = (props) => {
return (
<div>
{props. loading? (
«Загрузка…»
): (
<div>
Привет, {props.data.name}!
<p> Email: {props. data. email} </p>
</div>
)}
</div>
);
}
export default withDataFetching (UserComponent)
Теперь UserComponent получает данные из сети благодаря HOC withDataFetching
5.5 Заключение
В этой главе мы изучили, как создавать компоненты в React и использовать их в приложениях. Мы освоили, как создавать функциональные компоненты и классовые компоненты, а также как использовать их в составе наших приложений.
Одним из наиболее важных аспектов, который мы рассмотрели, является вложенность компонентов. Мы поняли, как важно правильно структурировать компоненты в иерархии, чтобы сделать наш код чище и более организованным. Вложенность позволяет нам создавать маленькие, переиспользуемые компоненты, которые могут быть объединены в более крупные структуры, создавая мощные и гибкие интерфейсы.
Эта глава была началом нашего путешествия в мире React, и впереди нас ждут еще много интересных тем и возможностей. Мы будем изучать более сложные концепции, такие как управление состоянием, маршрутизация, обработка событий и многое другое. Мы также рассмотрим передовые техники разработки с использованием React и узнаем, как создавать масштабируемые и производительные приложения.
Глава 6. Основы использования props и state
В React props и state – это два основных механизма для управления данными, обновления пользовательского интерфейса и взаимодействия с компонентами. В этой главе мы рассмотрим, как использовать props и state для передачи и управления данными в компонентах React.
6.1 Введение в props и state
Props (сокращение от «properties») представляют собой механизм передачи данных в компоненты React. Они представляют собой входные данные, получаемые компонентом от его родительского компонента. Props передаются компоненту в виде атрибутов и становятся доступными внутри компонента, как свойства.
Важно отметить, что props являются неизменяемыми, что означает, что однажды переданные данные нельзя изменить внутри компонента. Это позволяет передавать инструкции или информацию от родительского компонента к его дочерним компонентам, определяя, как компонент должен себя вести или какие данные отобразить.
Пример: Если у вас есть компонент «Кнопка», то пропс может содержать информацию о том, какой текст должен отображаться на кнопке. Вы передаете этот текст в компонент, и компонент использует его для отображения на кнопке.
Преимущества использования props:
– Расширяемость. Props являются расширяемым и удобным способом передачи данных в компоненты, особенно, когда у вас есть множество разных пропсов. При использовании props вы также можете определить значения по умолчанию и лучше структурировать ваш компонент.
Пример:
function UserProfile (props) {
return (
<div>
<p> Name: {props.name} </p>
<p> Age: {props.age} </p>
{/* Другие свойства */}
</div>
)
}
– Читаемость кода. Передача данных через props делает компонент более читаемым, так как вы видите, какие данные он использует, необходимо только взглянуть на его декларацию.
– Значения по умолчанию: Вы можете задать значения по умолчанию для props, что полезно, если некоторые данные не передаются. Например, если props.age не был передан, вы можете использовать значение по умолчанию.
Пример:
function UserProfile (props) {
const age = props.age || 25 // Значение по умолчанию
return (
<div>
<p> Name: {props.name} </p>
<p> Age: {age} </p>
</div>
