Как загрузить приложение / библиотеку React внутри компонента ExtJs
Мы используем Extjs 3.1 и пытаемся интегрировать reactjs в. у нас есть библиотека поставщика, в которой есть react, reacr-dom, redux и другие библиотеки, упакованные и включенные как скрипт.
Вот мой код extjs
var CompositeViewer = Ext.extend(Ext.BoxComponent, {
itemId: 'CompositeViewer',
requires: [
'ReactDOM' //my lib file name is vendor.lib.js
],
initComponent: function() {
Ext.apply(this, {
autoEl: {
tag: 'div',
cls: 'normalize'
}
});
CompositeViewer.superclass.initComponent.apply(this, arg);
},
onRender: function(ct, position) {
CompositeViewer.superclass.onRender.apply(this, arg);
console.info(ReactDOM); //OFCOURSE ReactDOM is undefined
/// HOW TO LOAD/Render REACT APP AND OTHER LIBS
},
beforeDestroy: function() {
CompositeViewer.superclass.onDestroy.apply(this, arg);
}
});
Нужна помощь в том, как загрузить библиотеки reactjs / javascript в контейнер extjs.
EDIT:clarifying bit more.
- Поскольку у меня нет возможности загружать внешние зависимости (react, redux и т. д.) Из cdn, как связать его отдельно и какого типа (commonjs, umd или var)
- Как связать мое приложение, чтобы ExtJS мог его импортировать (как отдельную библиотеку ??)
Ответы 2
Вот как это сделать.
Используя рабочий пример ExtJS 3.4.1:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
title: 'ExtJS Panel',
items: [{
xtype: 'label',
text: 'ExtJS Compoent'
}, {
xtype: 'panel',
listeners: {
afterrender: function () {
const e = React.createElement;
ReactDOM.render(
e('div', null, 'ReactJS Component'),
this.el.dom
);
console.info('afterrender');
}
}
}]
});
});
Ссылка на Fiddle (ExtJS 3.4.1):https://fiddle.sencha.com/#view/editor&fiddle/2l12
Использование ExtJS 5 и выше Рабочий пример:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
requires: [
'ReactDOM'
],
title: "Some ExtJS Panel",
items: [{
xtype: 'label',
text: "ExtJS Component"
}, {
xtype: 'panel',
id: 'react-panel',
height: 400,
initComponent: function () {
console.info('do some extjs stuff here');
this.superclass.initComponent.apply(this, arguments);
},
listeners: {
afterrender: function () {
console.info();
const e = React.createElement;
ReactDOM.render(
e('div', null, 'ReactJS Component'),
this.el.dom
);
console.info('afterrender');
}
}
}]
});
}
});
Ссылка на Fiddle (ExtJS 5 и выше):https://fiddle.sencha.com/#view/editor&fiddle/2l11
спасибо, Саураб, я получаю, что "React" не определен, хотя я включил отдельный пакет. Также как я могу получить доступ к «MyApp» из набора приложений. , поскольку ReactDom потребуется экземпляр <App />. Я отредактировал свой вопрос, добавив немного дополнительных разъяснений.
Итак, сначала это было немного сложным процессом. Много исследований в Интернете. К счастью, мне удалось собрать рабочий пример, который я описал в Средняя статья здесь. В этой схеме я перехожу к следующему:
- Создание базовой библиотеки React (с JSX)
- Транспортировка библиотеки
- Использование библиотеки в браузере с помощью тега скрипта
- Обслуживание демонстрации с помощью простого http-сервера
- В комплекте с веб-пакетом
- Интегрируйте в приложение Ext JS
Реагировать в ExtJS
Создайте простую библиотеку React, которую можно использовать в приложении Sencha Ext JS.
Добавление React к существующему приложению Ext JS может оказаться сложной задачей. На сегодняшний день (14 августа 2020 г.) существует лишь несколько решений, позволяющих лучше всего интегрировать приложение React в существующее приложение Ext. При этом, однако, не существует отличных методов для включения компонентов на более модульном уровне или таким образом, чтобы обеспечить общее использование JSX.
Недавно я подошел именно к этой проблеме. Хотя мы все хотели бы выбросить проект и начать что-то новое, в большинстве случаев это, к сожалению, не так. Часто лучшим решением, когда это возможно, является включение нового контента в существующую систему. В данном конкретном случае цель заключалась в том, чтобы позволить командам фронтенд-инженеров разрабатывать новый контент в React с одновременной интеграцией в существующее приложение и постепенным преобразованием унаследованного контента.
В этом руководстве я собираюсь создать библиотеку React, которая загружает базовый заголовок с парой подкомпонентов. Затем я возьму этот код и превращу его в повторно используемый пакет npm, который можно использовать в браузере и узле с помощью webpack, babel и typescript. С этого момента мы можем легко интегрировать библиотеку React в контейнеры Ext с помощью библиотеки React vanilla JS.
Было ли это когда-нибудь решено? Какое было ваше решение?