Расширение функционала 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 Router
styled-components
Jest & React Testing r

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

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

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

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

UI

Material UI - набор UI компонентов для React
react-materialize
Materialize (Parallax, Scrollspy и Scrollfire) - CSS + JQuery, никак не связан с React
Elemental UI
Onsen UI

Полезная информация

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

См. также

Ссылки

backbone-react-component

https://github.com/sunafajro/bitrix24app