JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.8.6/backbone.marionette.min.js"></script>
<div id="wrapper"></div>

<script type="text/template" id="listTemplate">
    <ul>
        <li>Item View Test </li>
    </ul>
</script>

<script type="text/template" id="layout-template">
    <header></header>
    <section></section>
    <footer></footer>
</script>

JavaScript

var requiredViews = {
    headerView:false,
    sectionView:true,
    footerView:false
}

var Model = Backbone.Model.extend({});

var View = Backbone.Marionette.ItemView.extend({
    template:_.template($('#listTemplate').html())
})

var Layout = Backbone.Marionette.Layout.extend({
    template:'#layout-template',
    regions:{
        header:"header",
        content:"section",
        footer:"footer"
    },
    
    renderRegions:function(){
        if(requiredViews.sectionView){
            var sectionView = new View();
            this.content.show(sectionView);
        }
    }
});

var Controller = Backbone.Marionette.Controller.extend({
    initialize:function(){
       this.layout = new Layout;
       $('#wrapper').html(this.layout.render().el);
       this.layout.renderRegions();
    }
});

var myApp = new Controller;