JSX Example

jsx-example.js

/** @jsx createNode */

function createNode(tagName, attrs, ...children) {
  const node = attrs || {};
  node.name = tagName;
  if (children && children.length > 0) {
    node.children = children;
  }
  return node;
}

const layout = (
  <widget>
    <row>
      <elem key='#1'/>
      <elem key='#2'/>
    </row>
    <elem key='#3'/>
  </widget>
);

console.log(JSON.stringify(layout, null, 2));

/*
Output:

{
  "name": "widget",
  "children": [
    {
      "name": "row",
      "children": [
        {
          "key": "#1",
          "name": "elem"
        },
        {
          "key": "#2",
          "name": "elem"
        }
      ]
    },
    {
      "key": "#3",
      "name": "elem"
    }
  ]
}
*/

Run this with babel-node jsx-example.js. No other modules or dependencies are necessary because babel supports JSX.

FYI this comment informs babble what method to use for converting JSX into objects: /** @jsx createNode */