React великолепен, мы все с ним согласны, поэтому я не буду вдаваться в подробности о том, зачем его использовать (я не думаю, что «мы», как разработчики, когда-либо «все соглашались» в чем-либо). Вместо этого я хотел бы поговорить о том, как начать его использовать; в частности, в приложении узла mvc (или MVC-ish) или в любом приложении узла, которое использует сервер для извлечения данных и визуализации представления с помощью механизма шаблонов.

Некоторое время назад я решил изучить интерфейсный фреймворк. Например, действительно учиться. Раньше я делал уроки по Angular, но толком не знал Angular. В то время Angular был достаточно популярен, поэтому я решил, что это хорошее место для начала; много документации, легко учиться, неплохо знать. Всякий раз, когда я решаю чему-то научиться, я выбираю или придумываю побочный проект и пытаюсь использовать любую технологию для его создания. На этот раз я отвлекся на сам проект и отказался от angular, чтобы закончить его быстрее. В итоге я написал его как быстрый монолит, используя хапи, другие технологии, не относящиеся к этой истории, и рули. В конце концов, мне понадобилась некоторая функциональность пользовательского интерфейса. Из того, что я читал о реакции в то время, у нее есть то преимущество, что она потенциально легкая, просто V в MVC, и, прочитав больше, я решил, что это было бы отличным решением — добавить реакцию в мое приложение, чтобы получить все из роскошных функций, которые я хотел, изучите интерфейсный фреймворк, ура!

На самом деле изучение костей React было относительно быстрым и легким занятием. Это достаточно просто, чтобы в конце учебника в документации вы в значительной степени поняли это. Итак, как только я закончил, я подумал: Хорошо, я просто сделаю компонент реакции и каким-то образом добавлю его в одно из моих представлений как партиал, и на этом закончу, верно? В этом сложность простогореагирования; фактически добавляя его в свое приложение. Да, Create React App существует (в то время его не было), наряду с другими стандартными решениями. Но они действительно полезны при создании нового приложения, и я не хотел начинать все сначала. Кроме того, я не был уверен, как я буду управлять аутентификацией в полностью клиентском приложении, и не хотел заниматься созданием службы Oauth и т. д. В любом случае, прежде чем я даже начал писать код, я должен был изучить все это, а также как webpack (читай: перебор webpack.conf) и babel.

Вкратце, мои проблемы заключались в следующем: 1) Как мне заставить мой код реакции отображаться в моем или какмое представление? 2) Как мне получить данные с моего сервера на мой компонент реакции? 3) Я написал все на jsx, как мне собрать этот бандл, который все говорят, что он мне нужен? 4) Как бы я мог отрендерить этот компонент на стороне сервера, если бы захотел? 5) Где все это должно жить? Все это нетрудно сделать, но понять, как это сделать, было сложно (и отнять много времени).

Я боролся со всем этим, и это было отстойно. Я все еще не совсем понимал webpack или babel, я не знал, как передать данные на стороне сервера моему компоненту реагирования (по крайней мере, элегантно), и даже добраться до этого момента заняло у меня намного больше времени, чем я бы нравится признавать.

Вскоре после всего этого мне представилась возможность добавить реакцию на одно из наших приложений на моей настоящей работе. Нам нужно было что-то яркое, а моя команда разработчиков уже играла с реакцией, так что я побежал с ней. Я остановился на React on Rails (приложение было приложением для рельсов), и мне потребовались минуты, чтобы сгенерировать конфигурацию веб-пакета, написать небольшой компонент, добавить строку кода в мое представление и отобразить мой реагирующий компонент с данными на стороне сервера. В конце концов, я действительно научился реагировать. Я смог протолкнуть наше использование реакции от этой начальной части функциональности до совершенно нового одностраничного приложения со всеми прибамбасами (реактивный маршрутизатор, редукс, аполлон; все основы хипстерской реакции). Позже я понял, что во многом мой успех с React, особенно в качестве разработчика, не связанного с интерфейсом, был связан с простотой использования React on Rails и возможностью добавлять React в наш стек за считанные минуты и продолжать масштабировать нашу систему. использовать/включать больше экосистемы, когда мы были готовы. Эта длинная предыстория доходит до сути этой статьи.

Меня мотивировал React on Rails, и я решил собрать похожее решение для нодовых приложений — реагировать-помощник. React-helper делает несколько действительно крутых/полезных вещей:

Чтобы справиться с проблемой 1 и 2, перечисленными в моем разглагольствовании выше, у react-helper есть однострочник, который «отрисовывает» ваш компонент для вас, беря переданные ему реквизиты и передавая их вашему компоненту. Он возвращает «компонент», который вы можете передать в свое представление и отобразить где угодно, как и любые другие данные на стороне сервера. Ваше представление может только отображать компонент, и вы легко получите реакцию «только как V в MVC». В приведенном ниже примере ListUsers является реагирующим компонентом,

//In your controller
function(req, res) {
  db.collection('users').find().toArray(function(err, users) {
    const component = reactHelper.renderComponent('ListUsers', users)
    return res.render('view-to-render', {component})
  }
}
//In your view 
//Handlebars example 
<h1>Blah blah view template code</h1>
{{{component}}}
//Pug (jade) example
<h1>Blah blah view template code</h1>
!= component

Единственный другой шаг — это еще один вкладыш для регистрации вашего компонента реакции в том, что будет вашим входным файлом веб-пакета.

import ListUsers from './path/to/ListUsers';
reactHelper.register({ListUsers});

Магия здесь не так уж и сложна. Метод renderComponent, который вы вызываете в контроллере, просто создает пустой div, помечает его именем компонента, которое вы ему передали, помещая имя в атрибут div, и включает все данные, которые вы передаете ему в виде большого двоичного объекта json в другой атрибут. Затем, как только html будет отрендерен и передан в браузер, запустится код реестра, который связан с вашими реагирующими компонентами в вашем bundle.js, извлечет все элементы div, сгенерированные с помощью renderComponent, и фактически отобразит указанные компоненты (используя ReactDom.render), передавая проанализированный большой двоичный объект json компонентам.

Вернемся к добавлению реакции на ваше приложение. Выполнение перечисленных выше шагов занимает около 2 минут, чтобы связать все это вместе. Неплохо. «Но куда мне все это положить? И еще есть вебпак, который нужно победить, и я не жду этого». Для всего этого я создал интерфейс командной строки для react-helper. Теперь одна команда терминала: 1) вытащит все необходимые зависимости 2) создаст клиентский каталог в выбранном вами месте, куда могут поместиться все ваши реагирующие компоненты, 3) создаст для вас простой файл реестра и 4 ) создайте для вас конфигурацию веб-пакета. Конфигурация веб-пакета может быть не для всех, но она определенно достаточно хороша, чтобы вы сразу приступили к работе.

Таким образом, вместо того, чтобы прокладывать себе путь через процесс добавления реакции в ваше приложение, как это сделал я, вы можете добавить react-helper к использованию cli, сгенерировать конфигурацию веб-пакета и сразу же сосредоточиться на написании реакции! Затем, когда вы будете готовы визуализировать его, вы просто регистрируете его, добавляете строку в свой контроллер, добавляете строку в свое представление, и на этот раз действительно ура! Я также написал два плагина (один для экспресс (и парусов) и один для хапи), чтобы удалить немного потенциально дублирующегося кода при использовании помощника в этих фреймворках. Он также может отображать ваши компоненты на стороне сервера, когда вы к этому готовы.

Надеюсь, это не прозвучало как рекламный ход. Барьер для доступа к технологиям или языкам может разрушить надежды любого, кто хочет изучить или использовать их, особенно в приложении, которое представляет собой нечто большее, чем просто любимый проект. Когда вам не нужно сосредотачиваться на том, как включить его в свое приложение, React очень прост в использовании и его легко продать остальной части вашей команды. Как только у вас есть компонент в производстве здесь и там, очень легко постепенно добавлять больше экосистемы в ваш проект. Я использовал react-helper в нескольких своих проектах, и это действительно простое решение для добавления реакции в приложение node и большая экономия времени. Я надеюсь, что это может быть и для других, или, по крайней мере, вдохновение для создания других инструментов, которые могут быть.