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

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独立脚本来转换你的jsx，把cdn链接放在head部分，脚本：

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

2.而不是storyBox使用StoryBox （大写S），检查这个答案是有原因的。

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>

PS如果你想尝试使用npm包进行反应，这里是一个简单的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)

查看工作代码：

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

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

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

问题描述

4 个解决方案

解决方案1
8 已采纳 2017-07-05 07:04:11

解决方案2
2 2017-07-05 07:06:37

解决方案3
1 2017-07-05 07:03:22

解决方案4
0 2017-07-05 07:03:18

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

问题描述

4 个解决方案

解决方案1 8 已采纳 2017-07-05 07:04:11

解决方案2 2 2017-07-05 07:06:37

解决方案3 1 2017-07-05 07:03:22

解决方案4 0 2017-07-05 07:03:18

解决方案1
8 已采纳 2017-07-05 07:04:11

解决方案2
2 2017-07-05 07:06:37

解决方案3
1 2017-07-05 07:03:22

解决方案4
0 2017-07-05 07:03:18