How to add React JS component to the Widget

LaurynasGedminas2 — Tue, 08 Jun 2021 01:11:24 GMT

Hey,

Trying to add simple React JS component to the WAB widget getting error:

Widget.js:

```

/* eslint-disable no-console */

// Load Extrenal Libs
require({
paths: {
react:
'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min',
'react-dom':
'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min'
},
});

// Widget
define([
'dojo/_base/declare',
'dojo/aspect',
'jimu/BaseWidget',
'jimu/LayerInfos/LayerInfos',
'esri/layers/FeatureLayer',
'react',
'react-dom',
'./_App',
], (
declare,
aspect,
BaseWidget,
LayerInfos,
FeatureLayer,
React,
ReactDOM,
App
) => {
return declare([BaseWidget], {
baseClass: 'my-react-widget',

renderWidget() {

console.log(this.folderUrl);
// props
const wab = {
map: this.map,
config: this.config,
id: this.id,
};
const esriJS = {
LayerInfos,
FeatureLayer,
};
// open/close handlers
const onOpen = func => {
aspect.after(this, 'onOpen', func, true);
};
const onClose = func => {
aspect.after(this, 'onClose', func, true);
};
const root = document.getElementById('my-react-widget-root');
ReactDOM.render(React.createElement(App), root);

},
// ------------------------ //
// WIDGET LIFECYCLE
// ------------------------ //
startup() {

this.renderWidget();

},
postCreate: function(){

},
});
});

```

_App.js:

```

"use strict";

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

class Car extends _react.default.Component {
render() {
return /*#__PURE__*/_react.default.createElement("h2", null, "**bleep**, World!");
}

}

```

Is even posible?

Thank you

topic How to add React JS component to the Widget in ArcGIS Web AppBuilder Questions

How to add React JS component to the Widget