Question

在运行hello world时我是React的新成员，它给我错误 SyntaxError：期望的表达式，得到了'<'。

我的代码是。

<html>
    <head>
        <meta charset="UTF-8" />
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script>
            ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'));

        </script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

感谢支持。

Answer 1

您正在尝试在纯HTML / JavaScript（<h1>Hello, world!</h1>）中使用JSX。

浏览器不直接支持JSX，Babel需要在构建时将其转换（转换）为JavaScript。

或者，您可以在没有JSX的情况下使用React，您的代码将是：

ReactDOM.render(
  React.createElement('h1', undefined, 'Hello, world!'), 
  document.getElementById('root')
);

https://reactjs.org/docs/react-without-jsx.html

作为第三个选项，您可以将Babel嵌入HTML文件中，但这只是出于学习目的而应该做的事情，因为它对生产应用程序的性能不够：

<html>
    <head>
        <meta charset="UTF-8" />
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
        <script type="text/babel">
            ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root'));

        </script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

提示您好，世界错误

1 个答案: