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

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

Использование 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.