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

Навигация по статье

Что такое React и зачем он нужен?

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

Почему React так популярен:

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

Почему разработчики выбирают React?

Простота и мощь. React даёт вам гибкость писать как простые, так и сложные приложения.

Популярность и экосистема. Найти решения для вашей проблемы, плагины или даже вакансии проще, когда вы используете React.

Портативность. Научившись работать с React, вы сможете писать как веб-приложения, так и мобильные (React Native).

История React: от классов до хуков

React был создан в 2013 году инженерами Facebook. Основная проблема, которую они пытались решить, – сложность управления интерфейсами с большим количеством состояний. Например, как в реальном времени обновлять комментарии или уведомления.

В начале React использовал классовые компоненты. Если вы видели код с методами вроде componentDidMount или render, это как раз тот случай. Это работало, но было громоздко и сложно.

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

Особенности и преимущества React

JSX: JavaScript + HTML

В React вы пишете HTML прямо в JavaScript. Например:

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

Выглядит странно? Но это очень удобно! Вместо того чтобы писать шаблоны отдельно, вы описываете интерфейс прямо в коде.

Virtual DOM

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

Компоненты

Представьте, что весь интерфейс можно разложить на маленькие детали: кнопки, карточки, списки. Каждая из них – компонент. Они независимы, многократно используются и легко тестируются.

Декларативный подход

Вы описываете, что вы хотите видеть, а React заботится о том, как это реализовать.

Установка React: первый шаг к магии

Для установки React есть несколько способов. Мы рассмотрим самые популярные: Create React App, Vite и Parcel. На 2025 год предпочтение отдаётся Vite, так как он быстрее и современнее.

Create React App

Самый простой и классический способ:

npx create-react-app my-app
cd my-app
npm start

Vite (рекомендуется)

Vite быстрее, особенно для больших проектов:

npm create vite@latest my-app
cd my-app
npm install
npm run dev

Parcel

Если нужен минимум настроек:

npm init parcel@latest my-app
cd my-app
npm install
npm start

Практика: создаём наше первое приложение

Теперь, когда React установлен, пора написать наш первый компонент. Это будет классический «Hello, React!» – лучший способ начать.

Шаг 1: Создаём компонент

В проекте (например, my-app), откройте файл src/App.jsx (или App.js, в зависимости от вашего шаблона). Удалите всё содержимое и замените на:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Моё первое React-приложение готово!</p>
    </div>
  );
}

export default App;

Шаг 2: Запускаем приложение

Вернитесь в терминал и запустите сервер:

npm start

Откройте http://localhost:3000 (или другой указанный адрес) в браузере. Если вы видите текст «Hello, React!» – поздравляю, вы только что создали свой первый React-компонент!

Итоги

Мы познакомились с React, узнали его историю, ключевые особенности и преимущества. Установили среду разработки и создали свой первый компонент. Но это только начало. В следующих уроках мы углубимся в то, как использовать React для создания реальных приложений.