Расширение функционала Bitrix 24/React

Добавить ссылки
Материал из Викиучебника — открытых книг для открытого мира

Если вам действительно необходимо создать frontend-приложение с реактивностью, то для Битрикса больше подходит Vue.js. Эта библиотека поставляется в составе ядра Битрикс.

Жизненный цикл JS библиотек (нажмите для просмотра)

Но если вы выбрали React, с надеждой на большую жизнеспособность и стабильность, то зарегистрируйте его в Битрикс как расширение.

Архитектура[править]

Ajax запросы не должны идти через шаблон компонента модуля, они должны попадать в корневой обработчик.

Для того чтобы отрисовывать страницы на сервере с помощью React, нам нужно подружить его с компонентами Битрикс. Для этого регистрируется свой обработчик шаблонов в специальной переменной - $arCustomTemplateEngines, который будет вызывать Node.js либо V8Js.

BoilerPlate[править]

React практически не используется без JSX,Babel и Webpack. Для шаблонизации можно использовать дополнительные модули - Underscore или Mustache. Основным недостатком шаблонизатора Handlebars является необходимость установки Node.js на целевом сервере для компиляции на стороне сервера (precompiled templates) и отсутствие recursive lookup. Предварительную компиляцию можно не использовать т.к. Handlebars.compile и Handlebars.precompile идентичны по синтаксису и компилирование можно выполнить перед публикацией приложения на целевой сервер. А реверсивный поиск переменных можно включить указав опцию compat при вызове компилятора.

Еще одним популярным шаблонизаторм является Pug (Jude), но он тоже компилируется на стороне сервера.

Что бы вы не использовали, к сохранению состояний все равно придете. Т.е. нужно сразу обратить внимание на Redux.

Для AJAX запросов к серверу можно использовать:

  • Fetch
  • Axios

Еще вам понадобятся дополнительные инструменты:

Решение вопроса выбора набора библиотек можно существенно упростить если обратить внимание на готовые наборы - фреймворки, например react-toolbox

Есть еще Ember.js (Babel + Handlebars + router + ESLint), но его очень трудно подружить с React, но сделать это возможно.

После того как вы определитесь с набором библиотек, необходимо найти (или создать) подходящий Boilerplate:

Рассмотрите Yarn в качестве альтернативы для npm.

UI[править]

Полезная информация[править]

  • Vue.js встроен в ядро Битрикса 1
  • В Битрикс также входят:
    • amCharts
    • MaskedInput
    • PhoneNumber

См. также[править]

Ссылки[править]

backbone-react-component

Источник — https://ru.wikibooks.org/w/index.php?title=Расширение_функционала_Bitrix_24/React&oldid=235011