使用 babel 为 React 应用转译 jsx答案

【问题标题】：Transpiling jsx using babel for react app使用 babel 为 React 应用转译 jsx
【发布时间】：2016-07-25 19:42:59
【问题描述】：

我正在尝试使用 babel 转译一个 jsx 文件，但它给出了一个错误。

文件内容如下，(src/app.js)

class Channel extends React.Component{
    render() {
        return(
            <li> Something </li>
        )
    }
}

我使用以下命令转译并观察文件的变化。

1) babel src/app.js --watch --out-file js/app.js
2) babel src/app.js --presets es2015 --watch --out-file js/app.js

在这两种情况下，我都收到以下错误，

SyntaxError: src/app.js: Unexpected token (4:12)
  2 |     render() {
  3 |         return(
> 4 |             <li> Something </li>
    |             ^
  5 |         )
  6 |     }
  7 | }

这表明错误出现在嵌入在 javascript 文件 (jsx) 中的 html 标记的开头。 Babel 应该知道 html 标签并对其进行处理和编译，但我不知道它为什么会这样。

注意：我使用官网的 babel 文档安装了 babel。

【问题讨论】：

呃，你需要告诉它使用 JSX...
@gcampbell 怎么样？感谢您的评论！
babel-preset-react
谢谢@gcampbell，您的评论和问题的答案都对我有用。 :)

标签： javascript reactjs ecmascript-6 babeljs

【解决方案1】：

您还需要react 预设。

安装它：

npm i babel-preset-react

使用它：

babel src/app.js --presets es2015,react --watch --out-file js/app.js

【讨论】：