Question

我是React的新手，因为这是我的第一课。以下是我的代码：

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <meta charset="UTF-8">
    <title>Hello World with React</title>
</head>
<body>
    <div id= "react-container"></div>
    <script src="index.js"></script>
</body>
</html>

index.js：

const title = React.createElement(
    'h1'
    {id: 'title', className: 'header'},
    'Hello World'
    )

ReactDOM.render(
    title,
    document.getElementById('react-container')
    )

但是，浏览器中没有任何内容呈现。脚本和Html页面都在同一个文件夹中。一定有一个非常简单的错误，所以请有人帮我这个吗？谢谢你的时间！

Answer 1

您在https://support.hockeyapp.net/kb/client-integration-cross-platform/how-to-integrate-hockeyapp-with-xamarin#feedback

之后错过了,

＆＃13;

'h1'

＆＃13;

const title = React.createElement(
  'h1', {
    id: 'title',
    className: 'header'
  },
  'Hello World'
)


ReactDOM.render(
  title,
  document.getElementById('react-container')
)
/**/

＆＃13;

Answer 2

您在createElement中缺少逗号。语法为

React.createElement(component, props, ...children)

const title = React.createElement(
  'h1', {
    id: 'title',
    className: 'header'
  },
  'Hello World'
)

ReactDOM.render(
  title,
  document.getElementById('react-container')
)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="react-container"></div>

祝React好运！

Answer 3

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

    </script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
  </body>
</html>

＆＃13;

Answer 4

,字符串后面没有hi。把它

const title = React.createElement(
    'h1',
    {id: 'title', className: 'header'},
    'Hello World'
    )

React＆＃39; Hello World＆＃39;没有加载

4 个答案: