ReactJS沒有渲染

所以我剛剛在幾個人中就對ReactJS感到滿意，並且想要真正開始用它創建東西。在開始真正進行編碼之前，我做了一個基本測試，看看React是否正在做它應該做的事情，事實並非如此。它根本沒有渲染，並且在代碼中看不到任何語法錯誤。
<style>在索引文件中當然只是爲了測試，當然我會在外部文件中使用Sass。我在這裏失蹤或做錯了什麼？先謝謝你。ReactJS沒有渲染

var React = require('react'); 
 
var ReactDOM = require('react-dom'); 
 

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

 
ReactDOM.render(<Box />, document.getElementById('app'));

<!DOCTYPE html> 
 
<html lang = "en"> 
 
    <head> 
 
     <meta charset = "UTF-8"> 
 
     <title>React App</title> 
 
     <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> 
 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
     <script src="app.js"></script> 
 
     
 
     <style> 
 
      body { 
 
       height: 100%; 
 
       width: 100%; 
 
       background-color: rebeccapurple; 
 
      } 
 
      
 
      #app { 
 
       height: 100px; 
 
       width: 100%; 
 
       background-color: rgba(255,255,255,0.1); 
 
      } 
 
      
 
      * { 
 
       margin: 0 auto; 
 
       padding: 0; 
 
      } 
 
      
 
      h1, h2 { 
 
       color: white; 
 
      } 
 
    
 
     </style> 
 
    </head> 
 
    <body> 
 
     
 
     <div id="app"></div> 
 
     
 
    </body> 
 
</html>

來源

2017-03-31 Cass

它是否給你的瀏覽器控制檯的任何錯誤？如果是的話請添加消息。 – TRomesh

如果您已經包含該文件，請勿使用require。 – Li357

http://codepen.io/anon/pen/NpeLjL似乎工作正常。 – mkaatman

按照以下步驟，將工作：

刪除這些行：

var React = require('react'); 
var ReactDOM = require('react-dom');

2.包括div其中後script所定義的ID，如下所示：

<body> 
    <div id="app"></div> 
    <script src="app.js"></script> 
</body>

3.包括babel基準，它需要transpile的JSX碼成普通js代碼，包括在報頭此參考：

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

4.定義script的類型，如下所示：

<script src="app.js" type='text/jsx'></script>

檢查工作示例：

<!DOCTYPE html> 
 
<html lang = "en"> 
 
    <head> 
 
     <meta charset = "UTF-8"> 
 
     <title>React App</title> 
 
     <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
 
     <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> 
 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <div id="app"></div> 
 
     <script type='text/jsx'> 
 
     var Box = React.createClass({ 
 
      render: function() { 
 
       return (
 
        <div> 
 
         <h1>React</h1> 
 
         <h1>React2</h1> 
 
        </div> 
 
       ); 
 
      } 
 
     }); 
 

 
     ReactDOM.render(<Box />, document.getElementById('app')); 
 
     </script> 
 
    </body> 
 
</html>

來源

2017-03-31 17:26:50

做了這些1.和2.因爲上面的那種建議已經加入你的第三和第四步到我的代碼，現在它的工作完美... 非常感謝你Mayank :-) – Cass

很高興，它幫助你:) –

ReactJS沒有渲染

回答

相關問題