ReactJS syntax error: unexpected token '<'

Question

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

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

这是我的 JSX 文件：

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

请告诉我我做错了什么

Answer 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

ReactJS syntax error: unexpected token '<'

ReactJS syntax error: unexpected token '<'

javascript

jsx

reactjs

babeljs

unexpected-token