Это как JavaScript, только интереснее.
Недавно у нас вышел перевод статьи про распространение эпидемий. Там интересно: среди обычного текста выводятся интерактивные виджеты с симуляциями. И если посмотреть под капот, мы увидим, что эти симуляции сделаны очень элегантно и понятно. Например, вот небольшой фрагмент про излечение людей:
Видно, что обычный текст с заголовком сделан как в HTML, а интерактивный виджет сделан каким-то очень понятным, элегантным кодом. Давайте посмотрим, что это за код.
Это React.js
Главное блюдо этого проекта — система React.js. Это библиотека для создания пользовательских интерфейсов и работы со страницей.
В нашем проекте React нужен для трёх вещей:
- По-разному выделять в тексте статьи заражённых, больных и излечившихся.
- Работать со слайдерами и симуляцией.
- Встраивать симуляцию прямо в текст статьи.
В React параллельно происходят два процесса. С одной стороны, разработчик подробно описывает элементы интерфейса: какой должна быть кнопка или пункт меню; как они должны себя вести; как выглядеть. Эти описания упаковываются в «компоненты» — такие модульные кубики, из которых можно собирать интерфейс. Кубик может быть стандартным и авторским, сложным и простым. Можно заимствовать чужие кубики. Можно вкладывать кубик в кубик и делать мегакубики.
С другой стороны, разработчик использует простые команды в самом коде программы, чтобы рассказать, где какие кубики использовать.
Сила React
Сила React в том, что в нём есть два мира — «Что где стоит» и «Что как работает». И эти миры достаточно хорошо разделены, чтобы не ломаться, если что-то где-то изменилось.
Для сравнения. Если у тебя обычный HTML и тебе нужно поставить ссылку, ты говоришь такое заклинание:
<a href="адрес_ссылки" target="где_откроется" class="как_выглядит">текст ссылки</a>
В этом описании одновременно и «где ссылка», и «как она работает». Если мне нужно 30 таких ссылок на странице, мне нужно будет повторить этот код 30 раз. Каждый раз, когда я использую этот код, я с нуля говорю браузеру: «Так, мы с тобой сейчас будем делать ссылку, давай я тебе расскажу, как она будет работать».
А что если у меня в интерфейсе нужно что-то более сложное, чем ссылка? Какое-нибудь интерактивное поле, и таких полей нужно 15, и они должны общаться между собой? Тогда описывать каждое из них с нуля и как в первый раз — очень громоздко и затратно. А если потом нужно что-то изменить, то проще всё переписать с нуля.
Вот тут и нужен React. Мы отдельно описываем поведение каждого элемента, отдельно расставляем их и связываем.
Как устроена интерактивная часть статьи
Основная часть статьи — это просто HTML-код, который залит внутрь React-приложения. Иногда внутри этого текста встречаются вот такие заклинания:
Перед нами — вызов компонентов Figure и Grid. За них отвечают файлы Grid.js и Figure.js — в них описаны правила, как именно браузеру следует использовать эти параметры, чтобы нарисовать анимацию и подписи к ней.
Параметры каждой симуляции мы указываем прямо в тексте статьи. Когда React работает, он забирает эти параметры из статьи, передаёт в компонент, компонент обрабатывает эти параметры и возвращает в статью готовый интерактивный виджет с симуляцией заражения.
Что это нам даёт:
- Сложная логика движка симуляций прописана где-то в отдельном месте, её не нужно дублировать. Если мы захотим поменять общий принцип работы симулятора, мы это сделаем в файлах Grid.js и Figure.js, не сломав саму статью.
- Внутри статьи мы прописываем только существенные изменения в поведении симуляции: например, какого размера будет симуляция, с какой скоростью будет протекать, как люди будут заражаться.
- Нам очень легко добавлять в статью новые симуляции с любыми параметрами.
- Код получается элегантным и простым, хотя само приложение довольно сложное.
Где ещё используется React
Статья Кевина Симлера о пандемии — лишь малая часть демонстрации того, что умеет React.js. На самом деле эту библиотеку используют для проектов разного уровня, от частных, как у нас, до глобальных, как у этих ребят:
- новостная лента в Facebook (собственно, Facebook и разработал саму библиотеку React.js);
- почти весь видимый пользователю Instagram;
- часть интерфейсов в WhatsApp;
- Netflix;
- сайт New York Times;
- Yahoo! Mail;
- Dropbox;
- сотни других удобных интерфейсов, которые делают программисты по всему миру.
С чего начать
Если вам понравилось, как можно работать с веб-страницами, начните с этих материалов:
- learn-reactjs.ru— идеальный вариант для начинающих, просто, доступно и по шагам.
- React.js: понятное руководство для начинающих— подробный разбор на конкретном примере, как устроены React-проекты и как сделать такое самому.