我正在尝试运行一个JSX代码,但是得到了这个错误。我确实安装了npm安装-g babel-cli npm安装--save babel-preset-env babel-preset-react,但我仍然得到错误。
这是我的代码index.html
<html>
<body>
<div id="appRoot"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script src="scripts/app.js" type="text/jsx"></script>
</body>
</html>
src/app.js->JSX代码
console.log("App.js is running");
const appRoot = document.querySelector("#appRoot");
const template = <p>This is a JSX code!</p>;
ReactDOM.render(template, appRoot);
babel命令->将JSX转换为ES5的babel命令
babel src/app.js --out-file=public/scripts/app.js --preset=env,react -watch
错误
subhro@subhro-X550LD:~/React-Project$ babel src/app.js --out-file=public/scripts/app.js --preset=env,react -watch
SyntaxError: src/app.js: Unexpected token (4:17)
2 |
3 | const appRoot = document.querySelector("#appRoot");
> 4 | const template = <p>This is a JSX code!</p>;
| ^
5 |
6 | ReactDOM.render(template, appRoot);
您有错误:
预置=>预置
Babel src/app.js--out-file=public/scripts/app.js--presets=env,react-watch