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

この単純なクラスをレンダリングすることができません。ここに私のコードです。シンプルリアクトコンポーネントがレンダリングに失敗する

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のステータスコードでとロード）コンソールをチェック。

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

出典

2016-08-31 Abhirath Mahipal

をスクリプトタイプ= "テキスト/バベル" を追加します。あなたはバベルのスクリプトが含まれていましたか？そしてどうやって？ – Maxx

* ReactDOM.render（）*呼び出しは、通常のjavascriptファイルに配置する必要があります。 –

@Maxx私はあなたから与えられた解決策を受け入れることができるように答えてください。 –

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

出典

2016-08-31 09:43:35 Maxx

ありがとう。私はそれを働かせるために多くの時間を費やしました。私がtype = "text/jsx"を使用する場合はどうすればいいですか？ –

は 'react-tools'のように見えますが、廃止予定だと思いますが、babelを使うべきです（そしてプロダクションでブラウザの蒸散を使わないでください） – Maxx

はJS FIDDLE

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

出典

2016-08-31 09:50:05

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

答えて

関連する問題