JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css">
<div class="claro">
<div data-dojo-type="MyWidget">
<div data-dojo-attach-point="textNode"></div>
<button data-dojo-type="dijit/form/Button" data-dojo-attach-event="click:go">Go!</button>
<button data-dojo-type="dijit/form/Button" data-dojo-attach-event="click:stop">Stop!</button>
</div>
</div>
JavaScript
require([
'dojo/_base/declare',
'dojo/parser',
'dijit/_WidgetBase',
'dijit/_AttachMixin',
'dijit/_WidgetsInTemplateMixin',
// used by the template
'dijit/form/Button'
], function (declare, parser, _WidgetBase, _AttachMixin, _WidgetsInTemplateMixin) {
declare("MyWidget", [_WidgetBase, _AttachMixin, _WidgetsInTemplateMixin], {
go: function () {
this._setText('Go! button clicked');
},
stop: function () {
this._setText('Stop! button clicked');
},
_setText: function (text) {
var node = document.createTextNode(text);
this.textNode.innerHTML = '';
this.textNode.appendChild(node);
}
});
parser.parse();
});