Фреймворки: React и Vue — что это и зачем они

Зачем нужны фреймворки

В уроке 3 мы сделали корзину на чистом JavaScript: после каждого нажатия вручную искали элементы и меняли в них текст. Для одной корзины терпимо. Но в настоящем приложении кофейни — меню, фильтры, корзина, профиль, история заказов, статус доставки. Если вручную обновлять каждое место, где показывается сумма, рано или поздно где-то забудешь.

Фреймворк решает это: вы описываете, как интерфейс выглядит при данных, а при изменении данных он перерисовывается сам. Два главных понятия — компоненты и состояние.

Компоненты

Интерфейс собирают из компонентов — независимых кусочков со своей разметкой и логикой. Карточка напитка на React:

function Drink({ name, price, onAdd }) {
  return (
    <li className="drink">
      <h3>{name}</h3>
      <p className="price">{price} ₽</p>
      <button onClick={onAdd}>В корзину</button>
    </li>
  );
}

Внутри — привычная разметка, похожая на HTML (в React она называется JSX). В фигурных скобках — значения из JavaScript. Компонент написан один раз и показывается для каждого напитка с разными данными.

Состояние

Состояние — данные, от которых зависит вид интерфейса. Корзина целиком:

import { useState } from 'react';

function Menu({ drinks }) {
  const [cart, setCart] = useState([]);
  const sum = cart.reduce((total, drink) => total + drink.price, 0);

  return (
    <section>
      <ul className="menu">
        {drinks.map(drink => (
          <Drink
            key={drink.id}
            name={drink.name}
            price={drink.price}
            onAdd={() => setCart([...cart, drink])}
          />
        ))}
      </ul>
      <p>В корзине: {cart.length} шт., {sum} ₽</p>
    </section>
  );
}

Сравните с уроком 3: здесь нет ни одного querySelector. При нажатии кнопки мы только меняем состояние через setCart, а React сам обновляет строку с количеством и суммой. Чем больше интерфейс, тем заметнее выигрыш.

React, Vue и другие

Принципы у них общие: компоненты, состояние, автоматическое обновление. Выучив один, второй можно освоить за несколько недель. Выбирать проще всего по вакансиям в своём городе — откройте hh.ru и посмотрите, какой встречается чаще.

Ещё одно слово, которое вы увидите в вакансиях, — TypeScript. Это JavaScript с указанием типов данных: редактор заранее подсказывает ошибки вроде «здесь ждали число, а пришла строка». В больших проектах его используют почти всегда.

Когда переходить к фреймворку

Частая ошибка новичков — начать сразу с React, пропустив основы. Тогда непонятно, где кончается JavaScript и начинается фреймворк, а любая ошибка ставит в тупик. Разумный порядок: HTML и CSS → JavaScript и работа с DOM → запросы к API → фреймворк.