React с нуля: подробное руководство для начинающих разработчиков

React — одна из самых популярных библиотек для создания пользовательских интерфейсов. Она используется как в небольших проектах, так и в масштабных приложениях вроде Facebook, Instagram и Netflix. Если вы только начинаете свой путь во фронтенд-разработке и хотите изучить современный инструмент, это руководство для вас.

Что такое React?

React (или React.js) — это JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. Её главная задача — обновлять и отображать нужные компоненты, когда данные меняются. В отличие от полноценных фреймворков, React берёт на себя только уровень представления (view), поэтому его легко комбинировать с другими библиотеками для маршрутизации, управления состоянием или HTTP-запросов.

Ключевые концепции React

Чтобы начать работать с React, нужно понять несколько фундаментальных идей.

Компоненты

В основе React лежат компоненты. Компонент — это независимый, переиспользуемый кусочек кода, который отвечает за то, как выглядит некоторая часть интерфейса. Представьте, что страница — это конструктор Lego, собранный из таких кирпичиков-компонентов (кнопка, форма, карточка товара, шапка сайта).

Компоненты в React бывают двух типов: классовые и функциональные. Раньше для работы с состоянием использовались только классы, но с появлением хуков (hooks) в версии 16.8 стандартом де-факто стали функциональные компоненты. В этом руководстве мы будем использовать именно их.

JSX: синтаксис, похожий на HTML

JSX — это расширение синтаксиса JavaScript, которое позволяет писать разметку, похожую на HTML, прямо внутри JavaScript-кода. Это делает код компонентов более читаемым и наглядным.

const element = <h1>Привет, мир!</h1>;

Браузер не понимает JSX, поэтому код транспилируется (обычно с помощью Babel) в обычные вызовы React.createElement(). В JSX можно вставлять любые JavaScript-выражения внутри фигурных скобок { }.

const name = "Иван";
const element = <p>Привет, {name}!</p>;

Состояние (State) и пропсы (Props)

Пропсы (props) — это входные данные компонента. Они передаются от родительского компонента дочернему и не могут быть изменены внутри дочернего компонента (они иммутабельны).

Состояние (state) — это внутренние данные компонента, которые могут меняться со временем. Когда состояние изменяется, компонент автоматически перерисовывается (ре-рендерится), чтобы отразить эти изменения в интерфейсе.

Настройка среды разработки

Самый простой и рекомендуемый способ начать проект с React — использовать готовый инструмент Create React App. Он берет на себя всю сложную настройку сборщиков (Webpack, Babel), и вы можете сразу приступить к написанию кода.

Для работы вам понадобится установленный Node.js (версия 14 или новее) и менеджер пакетов npm (или yarn). Проверить их наличие можно в терминале:

node -v
npm -v

Если Node.js не установлен, скачайте его с официального сайта.

Создание первого React-приложения

Откройте терминал и выполните команду:

npx create-react-app my-first-app

Эта команда создаст новую папку my-first-app со всем необходимым. Перейдите в неё и запустите проект:

cd my-first-app
npm start

Через несколько секунд в браузере автоматически откроется страница http://localhost:3000 с приветственным логотипом React. Это значит, что всё готово к работе.

Создаём простой компонент

Откройте папку проекта в любом редакторе кода (например, VS Code). Нас интересует файл src/App.js. Удалите из него всё и напишем наш компонент с нуля.

function App() {
  return (
    <div>
      <h1>Моё первое React-приложение</h1>
      <p>Это мой первый компонент. Ура!</p>
    </div>
  );
}

export default App;

Теперь откройте файл src/index.js. Вы увидите, что в нём компонент <App /> рендерится в DOM-элемент с id="root". Это стандартная точка входа React-приложения.

Сохраните все файлы — страница в браузере обновится автоматически и покажет новый текст.

Работа с состоянием (useState)

Давайте сделаем компонент чуть сложнее — добавим счётчик кликов. Для управления состоянием мы используем хук useState. Хуки — это специальные функции, которые "подключают" функциональные компоненты к возможностям React.

Импортируйте useState и добавьте его в компонент:

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Счётчик кликов</h1>
      <p>Вы кликнули {count} раз</p>
      <button>Кликни меня</button>
    </div>
  );
}

export default App;

Разберём, что здесь происходит:

• useState(0) — объявляем новую переменную состояния count с начальным значением 0.
• setCount — это функция для обновления этого состояния.
• В JSX мы выводим текущее значение count внутри фигурных скобок.

Обработка событий

Добавим логику на кнопку. В React обработчики событий называются в стиле camelCase и передаются как пропсы. Например, onClick, onSubmit.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Счётчик кликов</h1>
      <p>Вы кликнули {count} раз</p>
      <button onClick={handleClick}>Кликни меня</button>
    </div>
  );
}

export default App;

Теперь при каждом клике на кнопку вызывается функция handleClick, которая обновляет состояние через setCount. React автоматически перерисовывает компонент, и вы видите новое значение счётчика. Поздравляю, вы создали интерактивное React-приложение!

Что изучать дальше?

Основы React освоены. Теперь вы понимаете, как работают компоненты, JSX и состояние. Вот список тем, которые стоит изучить следующим шагом для углубления знаний:

• Эффекты (useEffect): для выполнения побочных действий (запросы к API, подписки).
• Работа со списками и ключами (keys): для правильного рендера массивов данных.
• Подъём состояния (Lifting State Up): как организовать общение между компонентами.
• React Router: для создания многостраничных приложений.
• Управление формами: контролируемые и неконтролируемые компоненты.

Заключение

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