JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div id="root"></div>

Babel + JSX

/** @jsx h */
function h(type, props, ...children) {
  return { type, props: props || {}, children };
}

function setBooleanProp($target, name, value) {
  if (value) {
    $target.setAttribute(name, value);
    $target[name] = true;
  } else {
    $target[name] = false;
  }
}

function isCustomProp(name) {
  return false;
}

function setProp($target, name, value) {
  if (isCustomProp(name)) {
    return;
  } else if (name === 'className') {
    $target.setAttribute('class', value);
  } else if (typeof value === 'boolean') {
    setBooleanProp($target, name, value);
  } else {
    $target.setAttribute(name, value);
  }
}

function setProps($target, props) {
  Object.keys(props).forEach(name => {
    setProp($target, name, props[name]);
  });
}

function createElement(node) {
  if (typeof node === 'string') {
    return document.createTextNode(node);
  }
  const $el = document.createElement(node.type);
  setProps($el, node.props);
  node.children
    .map(createElement)
    .forEach($el.appendChild.bind($el));
  return $el;
}

//--------------------------------------------------
/* 这种写法是 babel 的写法
const f = (
  <ul style="list-style: none;">
    <li className="item">item 1</li>
    <li className="item">
      <input type="checkbox" checked={true} />
      <input type="text" disabled={false} />
    </li>
  </ul>
); 
*/
 
 // 这种写法其实最后和 babel的写法是一样的，和上面的其实是一个效果，看自己喜好
const b = h(
  'ul', {
    'style': 'list-style: none;'
  },
  h(
    'li',
    {
    'className': 'item'
    },
    'item 1'
  ),
  h(
    'input',
    {
    'type': 'checkbox',
    'checked': 'true'
    },
    'hello!'
  ),
  h(
    'input',
    {
    'type': 'text',
    'disabled': 'false'
    },
    'hello!'
  )
);


const $root = document.getElementById('root');
$root.appendChild(createElement(b));