为什么我要用反应+ ES6 + npm展示＆＃34;你好世界＆＃34;但是它没有显示任何东西

时间：2017-04-09 14:57:08

标签： reactjs ecmascript-6 

//html code
 <!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
       <script type="text/babel"></script>
       <div id="content"></div>   //show the content of component here
    </body>
  </html>

//js code
import {render} from 'react-dom';
import React from 'react';

class Calculate extends React.Component {
    render() {
        return <p>Hello, world!</p>;
    }
}

render(<Calculate />, document.getElementById('content'));

文件目录结构：
File directory structure

的package.json：
package.json

我想在html页面中显示＆＃34; hello world＆＃34;没有webpack到babel或在线文件，因为我使用npm工具下载反应，react-dom和babel到node_modules，然后我使用＆＃34 ;导入React从＆＃39;反应＆＃39 ;;＆＃34;导入我需要的东西，但在页面中看不到任何内容，我不知道为什么

2 个答案:

答案 0 :(得分：0)

如果您使用webpack从所有js文件创建捆绑文件，请在脚本标记中提供该捆绑文件的路径，并将脚本标记放在div = content

的div下面

答案 1 :(得分：-2)

嘿，但是<div>标签是什么？ 它没有描述任何东西。 首先在<div>中制作一些内容 例如：

<head>
<style>
.container {
     width: 20px;
     height: 20px;
     background-color: red;
}
</style>
</head>

这只是一个例子，但对于js使用<script>标记。

<script>
import {render} from 'react-dom';
import React from 'react';

class Calculate extends React.Component {
    render() {
        return <p>Hello, world!</p>;
    }
}

render(<Calculate />, document.getElementById('content'));
</script>

哎呀我犯了一个错误，REALLY给了它，它写在我的入门笔记上我已经看到了它，虽然它没问题。谢谢。 ; - ）

相关问题
最新问题