JSFiddle - React, Tailwind, and code Playground

by Mathias Bynens

HTML

<div id="dom"></div>
<div id="output"></div>

CSS

#dom, #output { border: 5px solid lime; }

JavaScript

(function() {

    var arrDOM = [{
        component: 'foo',
        title: 'Hallo',
        children: [{
            component: 'bar'
        },
        {}]
    },
    {
        component: 'bar',
        title: 'Dit is comp #2',
        children: [{
            component: 'foo'
            },
        {}]
    }],

    arrComponents = {
        foo: {
            html: '<h1>dit is component foo</h1>'
        },
        bar: {
            html: '<p>Dit is component bar</p>'
        }
    },

    $elDOM = $('#dom'),
        
    $elOutput = $('#output');

    function parse(arrDOM) {
        var output = $.map(arrDOM, function(value, index) {
            return arrComponents[value.component].html;
        });
        $elOutput.html(output.join('\n'));
        
        output = $.map(arrDOM, function() {
            return arrComponents[value.component].foo;
        });
        $elDOM.html(output.join('<li>'));
    }

    parse(arrDOM);

}());