反应 - 未捕获的语法错误：意外的令牌：'<'答案

【问题标题】：REACT - Uncaught SyntaxError: Unexpected token : '<'反应 - 未捕获的语法错误：意外的令牌：'<'
【发布时间】：2022-01-31 10:25:08
【问题描述】：

我正在制作一个反应系统，但由于以下错误，index.html 没有运行 index.js。试了很多次，还是不行。

图片： error in index.js index.html execute

OBS：我尝试将类型更改为“text/jsx”，但它也不起作用。

【问题讨论】：

这能回答你的问题吗？ ReactJS: "Uncaught SyntaxError: Unexpected token <"

标签： html reactjs react-redux jsx

【解决方案1】：

你错过了一个重要的步骤，将你的代码转换成可读的东西。 JSX 只是 .createElement 的 React 之上的语法糖，没有编译步骤就无法使用。

简短的回答是，除非您有特定的原因尝试这样做（例如，您正在尝试学习/理解），否则我建议您使用开箱即用的工具，例如 NextJS 或 create-react -app，因为他们会给你一个生产就绪的解决方案。或者，看看使用React without JSX。我猜你正在尝试做类似这个问题中提到的事情：ReactJS: "Uncaught SyntaxError: Unexpected token <"。但是，您没有为我们提供足够的背景信息来帮助我们解决这个问题或您这样做的动机。

再深入一点，您的编译工具（例如 babel）将采用 JSX 并将其编译成普通 JS 可以理解的代码。

const HelloWorld = ({name}) => <div>Hello {name}</div>
const MyCoolElement = () => <HelloWorld name='Bob' />

ReactDOM.render(<MyCoolElement>, document.getElementById('root));

变成这样：

const HelloWorld = ({name}) => React.createElement('div', null, `Hello ${name}`);

const MyCoolElement = () => React.createElement(HelloWorld, {name:'Bob'}, null);

ReactDOM.render(React.createElement(MyCoolElement, {}, null), document.getElementById('root));

【讨论】：

【解决方案2】：

你在使用 webpack 吗？我没有看到 javascript 库包含在哪里...

【讨论】：

【解决方案3】：

浏览器无法读取 jsx。你可以试试这个方法：https://dev.to/devalnor/running-jsx-in-your-browser-without-babel-1agc

【讨论】：