我的React组件无法渲染

Question

I am making an app on a Node/Express server and React for the front-end. 我正在Node / Express服务器上制作一个应用程序，并在前端进行React。 I started with a very simple component but it doesn't render. 我从一个非常简单的组件开始，但是它没有渲染。 Anyone can tell me why this is happening? 任何人都可以告诉我为什么会这样吗？

Here is my index.html: 这是我的index.html：

<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>

And here the dashboard.js with the React component: 这是带有React组件的dashboard.js：

/*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'));

My package.json: 我的package.json：

{
  "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"
  }
}

Answer 1

This worked for me, thanks 这对我有用，谢谢

include the babel standalone script in index.html file it will work, use this: 将babel独立脚本包含在index.html文件中即可使用，请使用以下命令：

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

我的React组件无法渲染

问题描述

1 个解决方案

解决方案1
0 2017-05-11 03:03:01

我的React组件无法渲染

问题描述

1 个解决方案

解决方案1 0 2017-05-11 03:03:01

解决方案1
0 2017-05-11 03:03:01