My Reactコンポーネントがレンダリングされない

ノード/エクスプレスサーバー上でアプリケーションを作成しており、フロントエンド用に反応しています。私は非常に単純なコンポーネントから始めましたが、レンダリングされません。なぜこれが起こっているのですか？リアクトコンポーネントとMy Reactコンポーネントがレンダリングされない

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <!--Load React and D3 script here-->  
    <script type="text/babel" src="/js/dashboard.js"></script> 
    <!--link custom css file--> 
    <link rel="stylesheet" type="text/css" href="/css/style.css"> 
</head> 
<body> 
    <div class="container"> 
     <h1>My Dashboard</h1> 
     <!--Initialise React app here--> 
     <div id="app"> 
     </div> 
    </div> 
</body> 
</html>

そして、ここでdashboard.js：：これは働いていた

{ 
    "name": "", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "body-parser": "^1.17.1", 
    "dotenv": "^4.0.0", 
    "express": "^4.15.2", 
    "mongodb": "^2.2.26", 
    "node-wit": "^4.2.0", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "request": "^2.81.0", 
    "request-promise": "^4.2.0" 
    }, 
    "devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-preset-env": "^1.4.0" 
    } 
}

出典

2017-05-10 chemook78

レンダリングでアプリケーションを欠場しましたか？ 'ReactDOM.render（、document.getElementById（ 'app'））;' –

申し訳ありません、ここではスタックオーバーフローの書式設定でエラーが発生しました。私は実際にレンダリングでAppを持っていた – chemook78

あなたはエラーが発生していますか？ – lux

：

/*global React*/ 
/*global ReactBootstrap*/ 
/*global ReactDOM*/ 

alert("hello world"); 

const App = React.createClass({ 
//parent component to render all elements and hold state 
    getInititialState(){ 
     return{ 

     }; 
    }, 

    componentDidMount: function(){ 


    }, 

    render: function(){ 

     return (
      <div className="container"> 
       <h1>Chart Here</h1> 
       <p>Hello</p> 
      </div> 
     ); 

    } 

});//App component 

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

マイpackage.jsonここ

は私のindex.htmlです私のために、ありがとう

incそれを使用して、index.htmlファイル内のバブルのスタンドアロンスクリプトをludeこれを使用：

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

出典

2017-05-11 03:03:01 chemook78

My Reactコンポーネントがレンダリングされない

答えて

関連する問題