React starter模板不做任何渲染

时间:2016-01-22 07:41:21

标签: javascript html reactjs

<body>
    <div id="content"></div>

    <script type="text/jsx">
     var x = React.createClass({
        render:function(){
            return (
                <h1>I love react</h1>
            );
        }
     });

     React.render(<x/>,document.getElementById('content'));
    </script>
</body>

下面我的reactjs代码出了什么问题?它什么也没做。我已经包括

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>

在头部。

2 个答案:

答案 0 :(得分:2)

你有几个错误

  1. 您需要包含ReactDOM并使用ReactDOM.render,因为不推荐使用位于React中的版本0.14.* .render方法。
  2. 定义组件你应该使用以大写字母开头的局部变量(应该是X而不是x
  3. 而不是type="text/jsx"您应该使用type="text/babel"(不要忘记包括babel
  4. Example

答案 1 :(得分:1)

<script type="text/jsx">无效。这是旧版本使用旧的jsx变换器的方式,但它现在已被弃用。

使用babel代替。 Read more about this topic here.

此外,您的组件名称应始终以大写字母开头。 <X />不是<x />