使用 Header 标记呈现文本

Question

我是 React 的新手，我遇到了一个令人困惑的情况。

我正在尝试使用 ReactDOM 呈现 H1 标签，但 header 的结束标签一直在变成字符串。

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title> React Project</title>
    <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>


</head>
<body>

    <div id="root"></div>
    <script type="text/javascript">
        ReactDOM.render(
        <h1>Hello World</h1>,   
        document.getElementById("root")
        );

    </script>

</body>
</html>

SublimeText 上的代码是这样的：

enter image description here

错误是[Uncaught SyntaxError: Unexpected token '<']

我尝试按照 React 官方网站的建议使用 Constant，

ReactDOM.render(
                 const element = <h1>Hello, world</h1>;
                document.getElementById("root")
                )

;

但是结果是一样的

那么在这种情况下我该怎么办？

Answer 1

你的 <script> 标签告诉浏览器它是 Javascript 但实际上它是 JSX。你需要用 Babel 之类的东西来转换 JSX。尝试指令 you can find here.

<!DOCTYPE html>
<html>
<head>
  <title> React Project</title>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello World</h1>,   
      document.getElementById("root")
    );
  </script>
</body>
</html>

请阅读this page to learn more。

Answer 2

你还需要使用 JS 预处理器来理解 JSX 格式，比如 Babel

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16.7.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"></script>
<div id="root"></div>
<script type="text/babel">
  ReactDOM.render( 
    <h1> Hello World </h1>,   
    document.getElementById("root")
  );
</script>

使用 Header 标记呈现文本

Rendering text with Header tag

html

javascript

rendering

reactjs

react-dom