シンプルリアクトコンポーネントがレンダリングに失敗する

Question

この単純なクラスをレンダリングすることができません。ここに私のコードです。

allView.js

var StatCard = React.createClass({ 
    render: function() { 
     return (
       <div class="card"> 
        <div class="ui statistic"> 
        <div class="value">4480</div> 
        </div> 
        <div class="header">Schools</div> 
        <div class = "meta">matcher</div> 
       </div> 
      ); 
    } 

}); 

// console.log("Before ReactDOM.render"); -> It doesn't log anything 

ReactDOM.render(<StatCard />, document.getElementById('chartarea')); 

HTMLファイル

<div id="chartarea"> </div> 



</body> 
<script type="text/jsx" src="static/js/all/allView.js"></script> 

私はJSに比較的新しいですがそんなにを行うことができません。 私も置いても異なる場所にスクリプトタグを置いたスクリプトタグ

代わりtype="text/babel"を使用してみました

に資産計上

変数を追加しましたtype="text/jsx"同様の質問やドキュメント

• を読んだ後、次のことをやりました最終的には適切と思われます。
• 置き換えられた要素の終了タグをチェックして再チェックしました。
• デモフィドルに記載されているように関連する反応ファイルが含まれています。
• 私はコメントせずにconsole.logステートメントを配置し、まだ何も私のコンソール上に表示されなかっ

（すべてのファイルは、200のステータスコードでとロード）コンソールをチェック。

ご協力いただきまして誠にありがとうございます。

Answer 1

あなたはbabelスクリプトを含んでいましたか？そしてどうやって？

Answer 2

はJS FIDDLE

<script type="text/babel" src="static/js/all/allView.js"></script>