JSFiddle - React, Tailwind, and code Playground

by proticm

HTML

<script src="https://cdn.jsdelivr.net/npm/@plazarjs/core/dist/core.min.js"></script>

JavaScript

// header.js
pz.define('my-header-component', { 
  ownerType: 'component', 
  template: '<header>Hello from header!</header>'
});
// body.js
pz.define('my-body-component', { 
  ownerType: 'component', 
  template: '<section>Hello from body!</section>'
});
// footer.js
pz.define('my-footer-component', { 
  ownerType: 'component', 
  template: '<footer>Hello from footer!</footer>'
});
// main.js
pz.define('main-component', { 
  ownerType: 'component', 
  autoLoad: true, 
  template: '<main></main>', 
  renderTo: 'body', 
  components: [{ 
    type: 'my-header-component'
  }, { 
    type: 'my-body-component' 
  }, { 
    type: 'my-footer-component'
  }] 
  // other configs 
});
// app.js
pz.defineApplication({ 
  name: 'Quick Start', 
  namespace: 'qsApp', 
  components: [ 
    'main-component' 
  ], 
  init: function() { 
    // do something on init 
  } 
  // other configs 
});