用babel编译jsx文件

babel可以把jsx文件编译成es5文件，也可以把es6编译成es5，还支持其它的各种语言编译。这篇文章介绍babel的jsx -> js文件的编译过程。首先写一个jsx文件：

const a = <div />

const b = (
  <div
    foo='hello'
    bar={baz}>
    <span>42</span>
  </div>
)

安装babel的jsx的插件（babel-plugin-transform-react-jsx · Babel，babel/packages/babel-plugin-transform-react-jsx at master · babel/babel · GitHub）：

$ npm install babel-plugin-transform-react-jsx

编译jsx文件：

$ babel --plugins transform-react-jsx script.js

编译后的输出：

const a = React.createElement('div', null);

const b = React.createElement(
  'div',
  {
    foo: 'hello',
    bar: baz },
  React.createElement(
    'span',
    null,
    '42'
  )
);

在线的compiler：

• React Without JSX – React

参考资料：

• WTF is JSX
• Configure Babel · Babel
• JSX In Depth – React

• 上一篇 docker的gef容器
• 下一篇 在docker中使用jupyter-book