Как устроен React (на примере статьи про эпидемию)

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

<div>
  <h3>Излечение</h3>
</div>
<div>
  Люди со временем излечиваются. Предположим, через два шага симуляции (то есть через два дня) люди поправляются:
</div>
<Figure>
  <Grid 
    daysIncubating={0} 
    daysSymptomatic={2} 
    gridRows={9} 
    gridCols={9} 
    nodeSize={30} 
    nug={1} 
    randomSeed={100}
    personHours={4} 
    showInteractions={false}
    speed={0.4} 
    transmissionProbability={1}
    travelRadius={1}
  />
</Figure>

Видно, что обычный текст с заголовком сделан как в HTML, а интерактивный виджет сделан каким-то очень понятным, элегантным кодом. Давайте посмотрим, что это за код.

Это React.js

Главное блюдо этого проекта — система React.js. Это библиотека для создания пользовательских интерфейсов и работы со страницей.

В нашем проекте React нужен для трёх вещей:

В React параллельно происходят два процесса. С одной стороны, разработчик подробно описывает элементы интерфейса: какой должна быть кнопка или пункт меню; как они должны себя вести; как выглядеть. Эти описания упаковываются в «компоненты» — такие модульные кубики, из которых можно собирать интерфейс. Кубик может быть стандартным и авторским, сложным и простым. Можно заимствовать чужие кубики. Можно вкладывать кубик в кубик и делать мегакубики.

С другой стороны, разработчик использует простые команды в самом коде программы, чтобы рассказать, где какие кубики использовать.

Сила React

Сила React в том, что в нём есть два мира — «Что где стоит» и «Что как работает». И эти миры достаточно хорошо разделены, чтобы не ломаться, если что-то где-то изменилось.

Для сравнения. Если у тебя обычный HTML и тебе нужно поставить ссылку, ты говоришь такое заклинание:

В этом описании одновременно и «где ссылка», и «как она работает». Если мне нужно 30 таких ссылок на странице, мне нужно будет повторить этот код 30 раз. Каждый раз, когда я использую этот код, я с нуля говорю браузеру: «Так, мы с тобой сейчас будем делать ссылку, давай я тебе расскажу, как она будет работать».

А что если у меня в интерфейсе нужно что-то более сложное, чем ссылка? Какое-нибудь интерактивное поле, и таких полей нужно 15, и они должны общаться между собой? Тогда описывать каждое из них с нуля и как в первый раз — очень громоздко и затратно. А если потом нужно что-то изменить, то проще всё переписать с нуля.

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

Как устроена интерактивная часть статьи

Основная часть статьи — это просто HTML-код, который залит внутрь React-приложения. Иногда внутри этого текста встречаются вот такие заклинания:

<Figure>
  <Grid 
    daysIncubating={0}
    daysSymptomatic={2}
    gridRows={9}
    gridCols={9}
    nodeSize={30}
    nug={1}
    randomSeed={100}
    personHours={4}
    showInteractions={false}
    speed={0.4}
    transmissionProbability={1}
    travelRadius={1}
  />
</Figure>

Перед нами — вызов компонентов Figure и Grid. За них отвечают файлы Grid.js и Figure.js — в них описаны правила, как именно браузеру следует использовать эти параметры, чтобы нарисовать анимацию и подписи к ней.

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

Что это нам даёт:

Где ещё используется React

Статья Кевина Симлера о пандемии — лишь малая часть демонстрации того, что умеет React.js. На самом деле эту библиотеку используют для проектов разного уровня, от частных, как у нас, до глобальных, как у этих ребят:

С чего начать

Если вам понравилось, как можно работать с веб-страницами, начните с этих материалов:

React — это сложно, модно и денежно

Изучите эту технологию в «Яндекс Практикуме» на тренажёре и при поддержке живых людей. Старт — бесплатно. Если понравится — сможете получить полноценную профессию и помощь в трудоустройстве.

Изучить