#8 – React JS + Nest JS. Разработка внешнего вида

Когда мы работаем над современным приложением, одной серверной части недостаточно. Даже если у нас есть полноценный API, пользователям всё равно нужен удобный интерфейс. Именно для этого используется frontend, и в данном уроке мы свяжем наш сервер на NestJS с простым интерфейсом на React.

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

Используя React, мы можем построить простые компоненты: один для вывода списка, второй для поиска пользователя по ID и третий — для добавления данных через форму. Такой подход помогает разделять логику и поддерживать приложение в чистоте. Каждый компонент отвечает только за свою часть работы и в случае необходимости может быть легко расширен.

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

Разработав даже простой интерфейс для нашего API, вы увидите, как backend и frontend работают вместе. Это даст более полное понимание процесса создания современных веб-приложений и подготовит вас к работе с более сложными проектами, где соединение этих двух частей играет ключевую роль.