Rect Hello world错误

Question

Rect Hello world错误

我是新的反应,而我正在运行你好世界的反应它给我的错误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>

Run Code Online (Sandbox Code Playgroud)

感谢你的支持.

Answer 1

Fez*_*sta 5

您正试图在纯HTML/JavaScript(<h1>Hello, world!</h1>)中使用JSX .

浏览器不直接支持JSX,它需要在构建时由Babel转换(转换)为JavaScript.

或者,您可以使用React而不使用JSX,您的代码将是:

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

Run Code Online (Sandbox Code Playgroud)

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

作为第三个选项,您可以在您的HTML文件中嵌入Babel,但这是您应该仅为了学习目的而做的事情,因为它对于生产应用程序来说不够高效:

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，6 月前
查看次数：	58 次
最近记录：	6 年，8 月前