Hiccup syntax for React components with Babel.
Input
const element = ['h1', "title"]
const element = ['h2#myId.myClass', "title"]
const element = ['h3.foo', {className: 'bar'}];
const nested = ['div',
['p.first', "first paragraph"],
['p.second', "second paragraph"]
];
const component = [MyComponent, {open: true, good: "yes", parent: this.parent}];
Same as
const element = <h1>title</h1>
const element = <h2 id="myId" className="myClass">title</h1>
const element = <h3 className="foo bar"></h1>
const nested = (<div>
<p className="first">first paragraph</p>
<p className="second">second paragraph</p>
</div>)
const component = <MyComponent open=true good="yes" parent={this.parent}>
Output
const element = React.createElement('h1', {}, "title");
const element = React.createElement('h2', {id: 'myId', className: 'myClass'}, "title");
const element = React.createElement('h3', {className: 'foo bar'});
const nested = React.createElement('div', {},
React.createElement('p', {className: 'first'}, "first paragraph"),
React.createElement('p', {className: 'second'}, "second paragraph")
);
const component = React.createElement(MyComponent, { open: true, good: "yes", parent: this.parent });
npm i babel-plugin-react-hiccup
.babelrc
{
"plugins": ["react-hiccup"]
}
babel --plugins react-hiccup script.js
require("babel-core").transform("code", {
plugins: ["react-hiccup"]
});
MIT