基本的なリアクションヘルプ - 何も表示されない

現在、基本的なプロファイルカードを作成しようとしています。基本的なリアクションヘルプ - 何も表示されない

私のコードは

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Profile</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script> 

    <script type="text/jsx"> 
     var App = React.createClass({ 
      render: function(){ 
       return (
        <div> 
         <Profile /> 
         <Hobbies /> 
        </div> 
       ); 
      } 
     }); 

     var Profile = React.createClass({ 
      render: function(){ 
       return (
        <div>    
         <h3>John Smith</h3> 
         <img src='http://lorempixel.com/100/100/' alt='John Smith' /> 
        </div> 
       ); 
      } 
     }); 

     var Hobbies = React.createClass({ 
      render: function(){ 
       return (
        <div> 
         <h5>My hobbies:</h5> 
         <ul> 
          <li>Coding</li> 
          <li>Designing</li> 
          <li>Guitar</li> 
         </ul> 
        </div> 
       ); 
      } 
     }); 

     ReactDOM.render(<App />, document.body); 
    </script> 

</head> 
<body> 

</body> 
</html>

ですが、私は、ブラウザ内で私のhtmlページを開いたとき、それは全く何もレンダリングdoesntの。私は何が欠けていますか？

コンソールログにエラーはありません。

出典

2017-09-15 ltjfansite

これは、JSXを使用しているため、BabelをReact関数呼び出しに変換する必要があるからです。

あなたのコードにこのスクリプトを追加します。ここには、reactとreact-domが含まれています。

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

これを組み込んだ後で動作するはずです。

出典

2017-09-15 13:09:55 codeslayer1

私にはES5 React.createClassのように見えます。私はあなたがOPがJSXを使用していることを意味していると思うし、それを蒸散させるためにバベルが必要です。 –

さてさて、私は何をしているのですか？私は複数のチュートリアルを見ているので、おそらくBabelとJSXが混在しています。しかし、babel.jsファイルが追加されました。 – ltjfansite

@DavinTryon申し訳ありませんが悪いです。私はそれがすでにES5コードであることを忘れていました。しかし、ええ、とにかく、あなたはJSXを蒸散させるためにバベルが必要です。 – codeslayer1

基本的なリアクションヘルプ - 何も表示されない

答えて

関連する問題