Я только что открыл для себя React в этом году, после того, как я какое-то время активно избегал того, что было новостью в мире JavaScript. На моей последней работе в Onswipe я сначала работал с jQuery и CoffeeScript, затем с Ember и, наконец, с Aura (тьфу! Я ненавидел Aura), и я заболел и почти отказался от всей этой интерфейсной чуши. Затем я открыл для себя React.

Видите ли, я не инженер (даже если я иногда так называю), я дизайнер и люблю писать код. И даже когда я пытаюсь понять такие вещи, как изоморфизм, декларативное программирование и виртуальный дом, в конце концов все, что меня волнует, - это то, что кажется правильным и тем, что позволяет мне быть крутым и создавать крутые вещи. React кажется правильным.

Подождите, в вашем JavaScript есть HTML

Я знаю. Я был там, когда движение за веб-стандарты было войной, которую стоило вести. Я читал блоги Зельдмана, Дэна Седерхольма и Дэйва Ши. Я даже говорил об огромной важности отделения поведения и внешнего вида от содержания.

И все же здесь я ратую за эту мерзость:

Что ужасного случилось со мной? Реальность, вот что случилось.

Я как бы обнаружил компоненты во время работы с конструктором объявлений

В Onswipe я отвечал за создание нашего внутреннего конструктора объявлений (я знаю, я тоже люблю рекламу) и выбрал Ember.js для этой задачи. Сначала все было нормально, мне нужен был WYSIWYG-интерфейс, похожий на настольный, вроде PhotoShop или Illustrator, и привязка данных Ember идеально подходила для этого.

При этом я вскоре понял, что мне нужны многоразовые части пользовательского интерфейса, которые инкапсулируют поведение, контент и стиль в расширяемом пакете. В то время у Ember не было компонентов, но он вроде как заставлял его работать, используя комбинацию EmberView, которую можно было расширять, как классы и шаблоны Handlebar. Хорошие времена.

Поскольку меня сослали в виртуальном подвале компании, я не знал, что настоящие инженеры в Нью-Йорке пришли к тем же выводам и что следующая версия продукта будет основана на компонентах. Увы, они собирались использовать Ауру (Я уже упоминал, что ненавижу Ауру. Потому что я ненавижу).

Дело в том, что идея компонентов классная. Поддерживать по крайней мере три отдельных файла для каждого компонента (один - это код шаблона, один для JavaScript и один для стилей)? Это было далеко не идеально.

Наш Gruntfile составлял половину нашей кодовой базы.

Войдите в React и JSX.

Вернемся к этой сути:

Это глупый пример. Но если вы не заметите неудобства наличия этой не совсем HTML-разметки внутри вашего кода JavaScript, вы оцените красоту интеграции всего этого в один файл.

Я знаю, что мне потребовалось некоторое время, чтобы понять, что это было тем, что я искал. И концепции были настолько новы и настолько чужды мне, что мне нужно было кто-нибудь объяснить, как отреагирует на меня, как будто мне было пять. Это было так далеко от спагетти jQuery, как я когда-либо был.

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

Компоненты похожи на блоки Lego ™.

Атомарная единица React - это компонент.

Компоненты - это экземпляры особого класса объектов, который знает, как и когда отображать себя и как себя вести при определенных обстоятельствах. Другими словами, это аккуратный пакет разметки и поведения (и, возможно, стиля), который может как содержать, так и быть частью других компонентов.

Поначалу сложно понять сочинение. В своих первых попытках я просто пытался воспроизвести функциональность BackBone.View, используя странный синтаксис. Мне потребовалось время, чтобы понять, что компоненты - это гибкие строительные блоки, и они лучше, когда они маленькие.

Если бы мне пришлось писать Конструктор объявлений сегодня, входной файл мог бы выглядеть примерно так:

Каждый из этих компонентов (TopBar, Inspector и т. Д.) Будет состоять из более мелких компонентов. И многие из этих более мелких компонентов можно будет использовать повторно (я имею в виду компоненты Button, ColorPicker, FilePicker и т. Д.).

Разве это не красиво? Я думаю, что это. Для меня это похоже на то, что я наконец-то открыл лучший способ создания приложений.

И я знаю о других преимуществах использования React: он не имеет состояния, он реактивен, виртуальный DOM и т. Д. И, возможно, они более важны с инженерной точки зрения, но с точки зрения дизайнера, который кодирует и тому, кто просто любит создавать красивые продукты, я использую React только потому, что он мне нравится больше, чем все, что я когда-либо использовал, и кажется правильным.

P.S. Мне очень жаль, что я ненавижу Ауру, возможно, это был проект, который использовал ее, что я на самом деле ненавидел.