logo标签列表

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

javascriptreactjsjsx
3

我没有得到“Hello World”作为输出。有人能告诉我我漏掉了什么吗？这是一段基础的代码，在使用createElement函数时用了另一种方式得到了输出。我是React的新手。

代码：

<!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>
尝试使用 ReactDOM.render(<StoryBox />,target) 这个语句 - 注意关闭组件。 - StudioTime
4个回答
9

请执行以下更改：

1. 包括 babel standalone 脚本 来转换您的 jsx，将 cdn 链接放在 head 部分，脚本如下：

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

2. 使用StoryBox（大写的S）代替storyBox，查看这个答案了解原因。

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>

2

您需要添加babel，将jsx转换为es5。这是示例代码。注意：您用于React的CDN出现错误，因此我使用了其他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>

顺便提一句，如果你想使用npm包来尝试React，这里有一个简单的GitHub存储库可供参考。

1

为了能够执行原始的JSX代码，您需要包含一个JSXTransformer。请尝试运行以下代码：

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

当没有子元素时，您需要添加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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接