反応コンポーネントの読み込みの問題

Question

今週の週末に反応を覚え、JSFiddleでうまくいきましたが、私は4番目のコンポーネント（var gooBye ...）を追加することにしました。これを引き起こしている可能性のあることについての考えはありますか？エラーはコンポーネント名は、例えば、大文字で始めるべき JSFiddle React components

          
  
 
   
 
    
var Hello = React.createClass({ 
 
    render: function() { 
 
     return <div>Hello {this.props.name}</div>; 
 
    } 
 
}); 
 

 
var testButton = React.createClass({ 
 
\t render: function() { 
 
    \t \t return <button name="button">Click</button>; 
 
    } 
 
}); 
 
    
 
var goodBye = React.createClass({ 
 
\t render: function() { 
 
    \t \t return <div>GoodBye</div>; 
 
    } 
 
}); 
 

 

 
React.render(
 
\t <Hello name="People" />, 
 
\t document.getElementById('myClass'); 
 
); 
 
    
 
ReactDOM.render(
 
    \t testButton(), 
 
    document.getElementById('test2'); 
 
); 
 
    
 
React.render(
 
    <goodBye />, 
 
    document.getElementById('test3'); 
 
); 
 
 
    
<div id="myClass"> 
 
    </div> 
 
<div id="test1"> 
 
</div> 
 
<div id="test2"> 
 
    </div> 
 
    <div id="test3"> 
 
    </div> 
 
<script type="text/jsx"> 
 
    \t \t \t ReactDOM.render(
 
    \t <h1>Test component in html body</h1>, 
 
     document.getElementById('test'); 
 
    ); 
 
</script> 
 

 

 
</body>
 
   
 
  
 
 

 

Answer 1

をポップアップしませんGoodBye。

JSXの要素名が小文字で始まる場合、Reactはそれが元のHTML（またはSVG ...）要素であるとみなします。たとえば、<div>または<input>です。大文字で始まる場合、それはそれがReactコンポーネントであるとみなされます。 <Hello>または<GoodBye>です。あなたはReactDOM.renderを使用する必要が

：

var GoodBye = React.createClass({ 
    render: function() { 
     return <div>GoodBye</div>; 
    } 
}); 

ReactDOM.render(
    <GoodBye />, 
    document.getElementById('test3') 
); 

Answer 2

あなたは、私は彼らに私はあなたのjsfiddleコンソールを開き秒を見ることができ、複数の構文エラーがあります。 (<example>, asdfasdf;)は(<example>, asdfasdf)

ReactDOM.render(
    <TestButton />, 
    document.getElementById('test2') // no semi-colon here! 
); 

する必要がありますあなたはあなたのコンポーネントの前に首都を持っている必要があります：react.renderはあなたの括弧内にその最後のセミコロンを持ってカント 推奨されていません。

var TestButton = React.createClass({ 
    render: function() { 
     return <button name="button">Click</button>; 
    } 
}); 

ここでは、あなたの例（上記のコード）のいずれかを使用しています...構文は非常に注意してください。

Fiddle React