簡單reactjs教程代碼不工作，開發工具沒有錯誤

我在udemy上跟着一個簡單的ReactJS教程，由於某種原因，我的代碼似乎是線路同一行不工作，我也沒有得到任何錯誤在Chrome中的開發工具。簡單reactjs教程代碼不工作，開發工具沒有錯誤

這是我的代碼，但我似乎無法弄清楚爲什麼它不工作。我使用Brackets作爲我的IDE並且也使用了chrome。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.20/browser.js"></script> 
    </head> 
    <body> 
     <div id="app"> 
     </div> 
     <script type="text/babel"> 

     var secondComp2 = React.createClass({ 

      render: function() { 

       return (

        <div> 
         <h1>{this.props.name}</h1> 
        </div> 

       ) 

      } 

     }); 

     ReactDOM.render(

      <secondComp2 name="hello world" />, 
      document.getElementById('app') 

     ); 

     </script> 
    </body> 
</html>

來源

2017-02-20 user2061886

它的規則，所有的React組件必須以大寫字母開頭，因爲小寫字母作爲HTML元素處理，

所以用這個：SecondComp2而不是secondComp2。

檢查工作fiddle：https://jsfiddle.net/5nvd3o6t/

來源

2017-02-20 04:12:51

反應的組分總是在駱駝的情況下定義。這將解決您的問題。

<script type="text/babel">  
     var SecondComp2 = React.createClass({  
      render: function() {  
       return ( 
        <div> 
         <h1>{this.props.name}</h1> 
        </div>  
       );  
      }  
     });  
     ReactDOM.render( 
      <SecondComp2 name="hello world" />, 
      document.getElementById('app')  
     );  
</script>

來源

2017-02-20 05:12:24

這是正確的，但你上面的那個人是第一個:-) – user2061886

快樂編碼:) –

簡單reactjs教程代碼不工作，開發工具沒有錯誤

回答

相關問題