Reacon v3

{
  identifier: 'FooBar',
  displayName: 'FooBar',
  content: {
    elementName: 'div',
    children: [
      {
        elementName: 'p',
        children: 'Foo',
      }
    ],
  },
  defaultProps: {
    static: true,
  },
}

function FooBar() {
  return <div><p>Foo</p></div>;
}
FooBar.displayName = 'FooBar';
FooBar.defaultProps = ...;
return FooBar;

{
  identifier: 'FooBar',
  displayName: 'FooBar',
  content: {
    elementName: 'div',
    children: [
      {
        elementName: 'p',
        children: '{props.name}',
      }
    ],
  },
  higher: [
    {
      type: 'connect',
      arguments: [
        {
          type: 'query',
          arguments: [
           { name: 'state.data.name' }
          ],
        }
      ],
    },
  ],
  defaultProps: {
    static: true,
  },
}

function FooBar(props) {
  return <div><p>{props.name}</p></div>;
}
FooBar.displayName = 'FooBar';
FooBar.defaultProps = ...;
return connect(query({ name: 'state.data.name' }})(Foobar);