Тонкости использования ReactJS в MeteorJS приложение

Тонкости использования ReactJS в MeteorJS приложение

415
ПОДЕЛИТЬСЯ

Никогда не лицезрел, чтоб кто-то перебежал на «достоинства» и обрисовал, как, фактически , это делать. Я встречаю много статей описывающих все плюсы использования вступают в реакцию с Метеорит.
При реализации возникает несколько суровых заморочек.
1-ый-это перенос имеющегося фронтенд реагировать в части, 2-ое-это внедрение посторониих библиотек реагировать.
Решение трудности под катом.

Применять реагируют составляющие имеющегося Метеорит приложение
Для того чтоб установить поддержку реагировать, просто поставить этот пакет: github.com/reactjs/react-meteor
Он добавляет обработчик jsx файлы и глобальный объект реагировать на frontend и backend. Он также добавляет свою обертку для компонентов, но она на данный момент плохо, поэтому что она не работает с существующими Метеорит маршрутизации.
Это выражается в том, что при удалении родительского Блейз шаблона (путь переключения) реагируют компонента как ни в чем не бывало остается на страничке.
Но в тот момент я использую свою обертку, что дозволяет сделать Реакт Блейз компонент шаблона, который может быть интегрирован в имеющиеся шаблоны, перевод части фронтэнда с Блейз реагировать.
Как я уже писал в комментах к английской статье предложил github.com/grovelabs/meteor-react. Буду обновлять раз опробована.
Моя обертка смотрится так:
_ReactUtils.createClass = функция(выбирает) {
вар имя_шаблона = выбирает.имя_шаблона;
вар templateClass = новейший шаблон(
имя_шаблона,
функция() {
возврат новейший HTML.Дел;
}
);
Шаблон[имя_шаблона] = templateClass;
вар компонент = реагировать.createClass(оптс);
templateClass.onRendered(функция() {
вар шаблон = это;
данных var = это.данные || {};
вар с = реагировать.ему(компонент, данные);
АР._meteorTemplate = шаблон;
шаблон._reactComponent = реагировать.рендер(с, шаблон.firstNode);
});
templateClass.onDestroyed(функция() {
вар шаблон = это;
Реагируют.unmountComponentAtNode шаблон._reactComponent.getDOMNode());
});
возвращение компонента;
};
И дозволяет создавать пламя узор реагировать компонент, этот компонент будет в курсе потребляется ли этот шаблон и в этом случае удалены со странички.
Как уже упоминалось выше библиотеки дают свои варианты сбора данных компонент реактивной источников (Монго курсоры, связывающие backend и frontend Метеорита, либо сессии/ReactiveVars, который может быть применен для коммуникации снутри интерфейс приложений).
Поэтому что на данный момент я использую 1-ый библиотекой и ее вариант мне не нравится, я просто присоединяюсь к реактивной сами источники, конкретно либо через сервисы (сервисы используйте BaconJS вернуть потоков и данных).
Иной, чище вариантом будет внедрение ванили поток A либо рефлюкс / fluxxor / хоть какой иной ее реализации. Я не буду обрисовывать его тщательно, так как пока толком не разобрался сам.
На данный момент сделать это:
componentWillMount: функция() {
это._cancelSubscription = трекер.автозапуск(…);
}

componentWillUnmount: функция() {
это._cancelSubscription();
}
Внедрение посторониих библиотек реагируют на метеор
Основная неувязка тут заключается в том, что применять любые библиотеки в Метеорит, она обязана быть или переведено в код вашего приложения (сходу отброшены), либо сделать особые Метеорит пакет.
Метеорит пакеты нужны, но неловко для разрабов, не для юзеров) по двум причинам.
Во-первых, нужно хранить в репозитории пакета собранной библиотеки. Она не будет удовлетворять юзеров, и необходимо сделать сборку без помощи других каждый раз, когда вы желаете обновить начальный код библиотеки, при сохранении сборки в репозитории.
Экспортировать объект библиотеки необходимо глобально, в стиле: 2-ой связан реагировать, но, быстрее всего, с повсеместным внедрением реагировать в библиотеках webpack/browserify строит — Метеорит пакет не может работать с сиим.
Папку «mylibrary» = {…};
Это обязательное требование, и пока что создатели не собираются поменять его.
Webpack/Browserify сделать так:
(функция(…){…})(этот, …);
И это не работает. Каждый строить вручную, для вас необходимо будет управлять особым костылем стиль
… })(meteorHack, …) // заместо этого — meteorHack! вар meteorHack = {
Реагируют: Реагируют
};
(функция webpackUniversalModuleDefinition(корень, фабрики) {
… Папку «mylibrary» = meteorHack.Папку «mylibrary»;
Обратите внимание, что реагируют в Build игнорируются, так как мы полагаемся на упаковке, что он уже инициализирован: Тогда все будет отлично.
Пакет.onUse(функция(API-интерфейс) {
api.use(‘reactjs:react@0.2.1’, [‘клиент’, ‘сервер’]); // может быть, позднее тут я использую другую библиотеку, бросив reactjs:react@0.2.1 поэтому что это достаточно неловко
api.addFiles(‘dist/meteor-dist.js’, [‘клиент’, ‘сервер’]);
API-интерфейс.экспорт(‘папку » mylibrary»‘, [‘клиент’, ‘сервер’]);
});
Соответственно, при построении реагируют аналогичным образом игнорироваться, к примеру webpack:
модуль.экспорт = {
запись: «./index.js»,
выход: {
путь: __dirname, в,
Имя файла: «dist/meteor-dist.js»,
libraryTarget: «во-первых»,
библиотека: папку «mylibrary»
},
наружные: {
реагируют: «реагировать»
}
};
Моя крайняя рекомендация будет forkate библиотеку, я желаю переехать в Метеорит и не сделать собственный свой репозиторий. Оно чище. habrahabr.ru