JSFiddle - React, Tailwind, and code Playground

by Deepak Anand

HTML

<div id="target"></div>

JavaScript

// Widget composition using Dijits
 
 require([
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dijit/_WidgetBase",
        "dijit/_TemplatedMixin"

    ], function (declare, lang, _WidgetBase, _TemplatedMixin) {

        var WidgetA = declare([_WidgetBase, _TemplatedMixin], {

            templateString: '<div><div data-dojo-attach-point="valueNode"></div></div>',

            value: 1,

            _setValueAttr: function(value){
                this.valueNode.textContent = value
                this._set("value", value)

            }

        })

        var WidgetB = declare([_WidgetBase, _TemplatedMixin], {

            templateString: '<div><div data-dojo-attach-point="containerNode"></div></div>',

            value: 2,

            buildRendering: function (){
                this.inherited(arguments)
                var widgetInstanceA = new WidgetA({
                    value: this.value
                })

                widgetInstanceA.placeAt(this.containerNode)
            }

        })

        var widgetInstanceB = new WidgetB({
            value: 3
        })
        widgetInstanceB.placeAt(document.getElementById("target"))

    })