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

Question

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

我不是把你的世界作为输出.任何人都可以告诉我我缺少什么,它是一个基本代码,使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

May*_*kla 8

做这些改变:

1.包括babel独立脚本来转换你的jsx,把cdn链接放在head部分,脚本:

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

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，10 月前
查看次数：	615 次
最近记录：	8 年，3 月前