Question

所以我使用express作为我的Web应用程序的后端。文件结构如下：

Src
--HTML
----index.html
----style.css
index.js
package.json

我的index.html看起来像：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Papers</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="/styles.css" rel="stylesheet" />
</head>
<body>

    <h1 class="title">Testing</h1>
    <div id="homepage">
        <h1>Testing</h1>
        <div id="objects"></div>
    </div>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

    <!-- Create React Component -->
    <script type="text/babel">
    // this import won't work
    //import DropToUpload from 'react-drop-to-upload';

    var Objects = React.createClass({

    });
    ReactDOM.render(<Objects/>, document.getElementById('objects'));
    </script>


</body>

在html中，我试图从'react-drop-to-upload'导入DropToUpload。但那不行。我还尝试通过一些像https://medium.com/front-end-hacking/getting-started-with-your-react-app-with-express-server-1c701a3c6edb这样的在线教程来设置webpack。但我根本无法让webpack与express一起工作并做出反应。有人可以建议如何导入HTML或如何修改我提到的教程，使其与最新的webpack一起使用？或者提供其他可行的教程或模板。谢谢！

如何在HTML中导入react组件？

0 个答案: