REACT - 未捕获的语法错误：意外令牌：'<'

Question

我正在react中创建一个系统，但由于某些原因，index.html由于以下错误而没有运行index.js。我试了很多，但都不起作用。

图像：index.js中的错误index.html执行

OBS：我试着把类型改为"text/jsx"，但也不起作用。

Answer 1

您缺少了一个重要步骤，即将代码转换为可读的内容。JSX只是.createElement的React之上的语法糖，没有编译步骤就无法使用。

简单的答案是，除非你有特定的理由尝试这样做(例如，你正在尝试学习/理解(，否则我建议你使用NextJS等开箱即用的工具或创建react应用程序，因为它们会为你提供一个生产就绪的解决方案。或者，考虑在没有JSX的情况下使用React。我猜你是在尝试做这个问题中提到的事情：ReactJS："；未捕获的语法错误：意外的标记<"；。然而，您没有为我们提供足够的背景来帮助我们或您这样做的动机。

深入了解细节，您的编译工具(例如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));

Answer 2

您正在使用webpack吗？我不知道javascript库包含在哪里。。。

Answer 3

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