JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/redux.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/virtual-dom.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@amarajs/[email protected]/dist/amara-core.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@amarajs/[email protected]/dist/amara-plugin-engine-browser.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@amarajs/[email protected]/dist/amara-plugin-dom.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@amarajs/[email protected]/dist/amara-plugin-events.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@amarajs/[email protected]/dist/amara-plugin-redux.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@amarajs/[email protected]/dist/amara-plugin-router.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@amarajs/[email protected]/dist/amara-plugin-css.umd.min.js"></script>
<main></main>
Babel + JSX
/** @jsx h */
const h = virtualDom.h;
const factory = type => (targets, args, apply) => ({
type,
args: apply == null ? null : args,
apply: apply == null ? args : apply,
targets: Array.isArray(targets) ? targets : [targets]
});
const dom = factory('dom');
const events = factory('events');
const style = factory('style');
const css = factory('class');
const routes = factory('route');
const store = Redux.createStore(function reducer(state = {}, action = null) {
switch (action.type) {
default:
return state;
}
});
const amara = new Amara([
AmaraBrowser(),
AmaraDOM(virtualDom),
AmaraCSS(),
AmaraEvents(),
AmaraRouter(),
AmaraRedux(store)
])
.add(dom('main', () => (
<p>Hello, world!</p>
)))
.bootstrap(document.querySelector('main'));