Что делает браузер, а что сервер

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

Две роли вы уже знаете из уроков по архитектуре. Сервер хранит данные, решает, кому их можно читать, и отвечает JSON. Браузер спрашивает и потом рисует. Этот урок про слово потом: что на самом деле происходит в браузере после того, как ответ пришёл, и почему у этой части есть свой набор идей.

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

document
  html
    head
      title
    body
      h1
      ul
        li
        li
        liСтраница как дерево: один корень, ветви и текст на листьях.

Самый старый способ обновить страницу — пройти по этому дереву самому. Найти узел, создать новый элемент, присоединить его, задать текст. Это работает, и для страницы с одной интерактивной деталью это до сих пор правильный ответ.

const list = document.querySelector("#cart-items");

const row = document.createElement("li");
row.textContent = "Tea";
list.appendChild(row);

document.querySelector("#total").textContent = "12.90";Обновления, написанные руками: создать элемент, присоединить его, задать текст, не забыть про сумму.

Фреймворк меняет сам вопрос. Вместо инструкций для браузера вы пишете описание того, как экран должен выглядеть при имеющихся данных. Вот та же корзина, описанная, а не приказанная.

const cart = ["Bread", "Tea", "Apples"];

function Cart({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

const view = <Cart items={cart} />;

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