Расширение функционала 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:

• react-materialize-webpack-boilerplate
• React, Require и Backbone
• Create React App (Babel 7, Webpack 4)
• React Boilerplate r
• React + Handlebars

Рассмотрите 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

См. также

• Grunt
• Gulp
• Bower
• Polymer

Ссылки

• How to use materialize-css with React
• React + Backbone Model

backbone-react-component

• https://qna.habr.com/q/383858
• https://loftblog.ru/material/razrabotka-veb-prilozheniya-na-backbone-js-chast-sedmaya-linejnyj-shablony-vstroennyj-v-underscore-js-shablonizator/
• Схема стека технологий
• Babel + Webpack
• https://habr.com/ru/post/421531/
• https://habr.com/ru/post/326162/
• https://blog.sibirix.ru/2019/04/03/react-with-bitrix/

• https://github.com/sunafajro/bitrix24app

• https://www.conductor.com/nightlight/создание-библиотеки-компонентов-с-ис/
• https://github.com/sepal/ReactiveBoilerplate