React: первый компонент и как всё устроено

Зачем это нужно

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

Вручную поддерживать соответствие между данными и тем, что видит человек, становится мучительно. Ошибка вида «изменил данные, забыл обновить экран» — самая частая в таком коде.

Библиотеки вроде React решают это иначе: вы описываете, как должен выглядеть интерфейс при данном состоянии, а обновлением занимается сама библиотека. Изменили данные — интерфейс перерисовался.

Что такое компонент

Функция, которая возвращает разметку. Всё.

function Greeting() {
  return <h1>Привет</h1>;
}

Такая функция — уже полноценный компонент. Из компонентов складывается интерфейс, как из кирпичей: маленькие собираются в большие.

Правило одно: имя компонента начинается с заглавной буквы. Иначе он не будет распознан как компонент.

Разметка внутри кода

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

Несколько отличий от обычной разметки, о которые спотыкаются все:

• Атрибут класса называется иначе, потому что слово «class» занято языком.
• Все атрибуты в верблюжьей записи: не «onclick», а «onClick».
• Возвращать можно только один корневой элемент. Если нужно несколько — оберните в пустой контейнер.
• Значения подставляются в фигурных скобках.

Передача данных

Компоненту можно передать данные — так же, как атрибуты в разметке:

function Greeting(props) {
  return <h1>Привет, {props.name}</h1>;
}

<Greeting name="Аня" />

Передаваемые данные компонент менять не может. Это принципиально: данные идут сверху вниз, и каждый компонент отвечает только за своё.

Списки

Частая задача — вывести список:

function NoteList(props) {
  return (
    <ul>
      {props.notes.map((note) => (
        <li key={note.id}>{note.title}</li>
      ))}
    </ul>
  );
}

Обратите внимание на ключ: он нужен, чтобы библиотека понимала, какой элемент какой при обновлении списка. Забытый ключ — самая частая ошибка новичка, и о ней предупреждают прямо в консоли.

Брать в качестве ключа порядковый номер — плохая идея: при вставке в середину всё поедет.

Чем это отличается от обычной вёрстки

Мышление меняется. Вы перестаёте думать «найди элемент и поменяй» и начинаете думать «при таком состоянии интерфейс выглядит так».

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

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

Состояние — то, ради чего всё затевалось. Без него компоненты остаются просто шаблонами. Этому посвящена отдельная статья.

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