Question

我没有把你的世界作为输出。任何人都可以告诉我我缺少什么，它是一个基本代码，使用createElement函数以不同的方式获得输出。我是新来的反应。

代码：

<!DOCTYPE html>
<html>
    <head>
        <title>My First App</title>
    </head>
    <body>
        <div id="react-app"></div>
        <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
        <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>

        <script type="text/jsx">

            class StoryBox extends React.Component{
                render(){
                    return(<div> Hello World </div> );
                }
            }

            var target= document.getElementById('react-app')
            ReactDOM.render(<StoryBox>,target);
        </script>
    </body>
</html>

Answer 1

进行以下更改：

1。包括 babel standalone script 来转换你的jsx，将cdn链接放在head部分，脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

2。而不是storyBox使用StoryBox（大写S），请检查此 answer 。

3。您忘了关闭，在此处：<storyBox>，请使用此处：<StoryBox />。

4。而不是Div使用div。

检查工作代码段：

<!DOCTYPE html>
<html>
   <head>
      <title>My First App</title>
      <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
      <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
   </head>

   <body>

      <div id="react-app"></div>
      <script type="text/jsx">

         class StoryBox extends React.Component{
            render(){
               return(<div> Hello World </div> );
            }
         }

        var target= document.getElementById('react-app')
        ReactDOM.render(<StoryBox/>,target)

      </script>

  </body>
</html>

Answer 2

您还需要添加babel，将jsx转换为es5。这是示例代码。注意：您的cdn for react抛出错误，所以我使用了其他cdn。

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.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>
  </body>
</html>

P.S。如果你想尝试使用npm包做出反应here是一个简单的github存储库。

Answer 3

您需要包含JSXTransformer才能执行原始JSX。尝试运行以下代码：

<div id="react-app">
</div>

<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

<script type="text/jsx">
  class StoryBox extends React.Component{
    render(){
      return(<div> Hello World </div> );
    }
  }
  ReactDOM.render(<StoryBox />, document.getElementById('react-app'))
</script>

Answer 4

当没有孩子时，你需要添加JSX自闭标签/>。

替换此行：

ReactDOM.render(<StoryBox>,target)

到

ReactDOM.render(<StoryBox />,target)

参见工作代码：

＆＃13;

class StoryBox extends React.Component{
        render(){
            return(<div> Hello World </div>);
        }
    }
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox />,target)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id="react-app"></div>

＆＃13;

ReactJS中的简单“Hello World”无法正常工作

4 个答案: