[进阶指南] 不使用 JSX 开发 React（ Day28 ）

在 什麽是 JSX （Day2） 的时候有写过，JSX 会经过 Bable 转译成 React.createElement 语法，可以说其实每个 JSX 元素都只是呼叫 React.createElement 的语法糖。

ReactDOM.render(
  React.createElement("h1", null, "Hello Bable"),
  document.getElementById('root')
);

不使用 JSX 也不想一直重复写 React.createElement

1. 使用变数 const h = React.createElement;
2. 使用社群专案 react-hyperscript 或 hyperscript-helpers 等

Hyperscript 指的是使用 JavaScript 来创建 Hypertext（超文本），一个比较经典 Hyperscript 实现是hyperhype/hyperscript。与 ejs，JSX，jade 等模板语言（template language）不同，Hyperscript 通过函数来创建 DOM 元素。

使用变数缩写:

const h = React.createElement;

ReactDOM.render(
  h('div', null, 'Hello World'),
  document.getElementById('root')
);

不同 “hyperscript” 写法比较:

// JSX
<ul id="bestest-menu">
  {items.map( item =>
    <li id={"item-"+item.id} {...attrs(item.id)}>{item.title}</li>
  )}
</ul>

// plain hyperscript
h('ul#bestest-menu', items.map( item =>
  h('li#item-'+item.id, attrs(item.id), item.title))
);

// hyperscript-helpers
ul('#bestest-menu', items.map( item =>
  li('#item-'+item.id, attrs(item.id), item.title))
);
//来源：https://github.com/ohanhi/hyperscript-helpers

以上今天

参考资料：
https://zh-hant.reactjs.org/docs/react-without-jsx.html
https://github.com/ohanhi/hyperscript-helpers
https://yoyoyohamapi.gitbooks.io/cycle-js-21/content/9.html