React-разработчики создают приложения на React, используя дополнительные инструменты: например, Redux, TypeScript или Jest. Это востребованная работа: на React.JS написаны Яндекс, Netflix, Facebook и другие известные сервисы. Фронтенд-разработчик в Яндекс.Практикуме Давид Роганов рассказал, что такое React, и составил гид для его изучения. Что такое React React — это JavaScript-библиотека для создания пользовательских интерфейсов.Обратите внимание, что это именно библиотека, а не фреймворк. React часто называют фреймворком, но это ошибка. Во-первых, его использование ни к чему вас не обязывает, не формирует «фрейм» проекта. Во-вторых, React выполняет единственную задачу: показывает на странице компонент интерфейса, синхронизируя его с данными приложения, и только этой библиотеки в общем случае недостаточно для того, чтобы полностью реализовать проект. Вскоре после появления React и подобные ему решения (Vue.js, Svelte) практически захватили мир фронтенда: потому что они помогают решать проблемы, основываясь на идее декларативного программирования, а не на императивном подходе. —Декларативный подход состоит в описании конечного результата (что мы хотим получить). — При императивном подходе описываются конкретные шаги для достижения конечного результата (как мы хотим что-то получить). Оказалось, что декларативный подход отлично подходит для создания интерфейсов, и он прижился в сообществе. Этот подход работает не только в вебе: сравнительно недавно компания Apple представила фреймворк SwiftUI, основанный на тех же принципах. Чтобы лучше понять, о чём идёт речь, рассмотрим императивный и декларативный подходы на примерах. Напишем две версии простого приложения: на HTML и JS (императивный подход) и на React (декларативный подход). Наша программа будет показывать число и кнопку, и при нажатии на неё исходное число будет увеличиваться на единицу. Приложение на чистом HTML и JS В рамках императивного подхода пошаговые инструкции для создания программы выглядят так: 1. объявляем начальные значения программы: присвоили константам ссылки на DOM-элементы, устанавливаем начальное значение счётчика; 2. пишем обработчик increment, в котором мы увеличиваем текущее значение, и устанавливаем его в соответствующий элемент; 3. устанавливаем начальное значение счётчика (0); 4. устанавливаем обработчик для кнопки. Обратите внимание, что HTML-разметка и JS-логика хранятся отдельно друг от друга.
Приложение на React Из-за специфики библиотеки код на React может выглядеть непривычно для того, кто пишет на JavaScript: потому что в тэге практически нет вёрстки. Но сосредоточимся непосредственно на приложении-счётчике: его основная логика находится на строках 25-40. Вот, что в нём происходит: — Вызывая функцию React.useState, мы сообщаем React, что собираемся использовать какое-то изменяемое значение. В ответ React даёт нам само значение (value) и функцию, которая позволит его установить (setValue). — Объявляем обработчик increment, который устанавливает новое значение счётчика с помощью вышеупомянутой функции. — Создаём разметку приложения, используя синтаксис, похожий на HTML (на самом деле это JSX). Разметка повторяет то, что мы видели ранее, но теперь само значение счётчика и установка обработчика на клик находятся прямо в ней. Это как раз то место, где мы описываем конечный результат. Весь код находится внутри функции App. В React она и другие похожие функции называются компонентами. Компонент — это фрагмент интерфейса, который содержит разметку и, при необходимости, связанную с ней логику. Все React-приложения строятся на компонентах. При этом сам компонентный подход появился задолго до React, но здесь его совместили с декларативностью.