ReactJS 语法错误：意外标记 '<'答案

【问题标题】：ReactJS syntax error: unexpected token '<'ReactJS 语法错误：意外标记 '<'
【发布时间】：2018-06-08 16:02:39
【问题描述】：

我正在学习关于反应组件的 udemy 课程，我遇到了这个 Syntax error.

我使用 yarn 安装了以下依赖项： “依赖”：{ "babel-preset-env": "1.5.2", “babel-preset-react”：“6.24.1” }

这是 myJSX 文件：

class Header extends React.Component {
    render() {
        return <p>This is from header</p>;
    }
}

const jsx = (
    <div>
        <h1>Title</h1>
        <Header />
    </div>
);


ReactDOM.render(jsx, document.getElementById('app'));

我正在使用此命令将其转换为主 JS 文件：

babel src/app.js --out-file=public/scripts/app.js --preset=env,react --watch

请让我知道我在这里做错了什么

【问题讨论】：

错误消息由文本组成，向我们展示错误消息，而不是图片。
输出的错误信息是什么？
不需要单独添加 JSX 支持吗？创建 React + JSX 小提琴时，您的 sn-p 在 JSFiddle 中工作
这段代码没有错误，看这个codepen.io/FederalCircle/pen/aKBXor，这可能是babel的东西
@Leite JSX 通过 react 预设支持开箱即用。

标签： javascript reactjs babeljs jsx unexpected-token

【解决方案1】：

这不是 100% 有帮助，但正如 babel docs 中所述，您应该使用 presets 而不是 preset

babel script.js --presets react

所以你的完整 babel 命令：

babel src/app.js --out-file public/scripts/app.js --presets env,react --watch

【讨论】：

很高兴它有帮助！ :) 不要忘记为将来可能会来这个帖子的人接受这个答案。