Question

我正在学习React和ES6。我使用了Webpack和Babel，在我的localhost上，我的应用程序运行正常。但我不知道如何在互联网上显示它。我有错误：未捕获的ReferenceError：未定义require。我使用'script type =“text / babel”...'和'script type =“text / jsx”......'但它没有帮助。我的HTML应用程序如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Movie List</title>
</head>
<body>
    <h1>My favourite movie list!-test</h1>
    <h3>REST API</h3><hr/>
    <main id="app"></main>
    <script type="text/babel" src="index.jsx"></script>
    <script type="text/babel" src="Movie.jsx"></script>
    <script type="text/babel" src="MovieInfo.jsx"></script>
    <script type="text/jsx" src="MovieList.jsx"></script>
    <script type="text/babel" src="MyButton.jsx"></script>
    <script type="text/babel" src="Thumb.jsx"></script>

</body>
</html>

以前我曾经：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Movie List</title>
    </head>
    <body>
        <h1>My favourite movie list!</h1>
        <h3>REST API</h3><hr/>
        <main id="app"></main>
        <script src="bundle.js"></script>
    </body>
</html>

以下是我的组件示例：

import React from 'react';

var thumbStyle = {
    paddingLeft: '0',
    width: '20%',
    display: 'inline-block',
    boxSizing: 'border-box',
    marginTop: 0,
    float: 'left'
};
var imgStyle = {
    width: '100%'
};

export default class Thumb extends React.Component {
    render() {
        return (
            <div style={thumbStyle}>
                <img 
                    src={this.props.src}
                    style={imgStyle} 
                    role="poster"
                    alt="poster"
                />
            </div>

        );
    }
}

Thumb.propTypes = {
    src: React.PropTypes.string.isRequired
}

编辑：我找到了解决方案。问题出在bundle.js上。在我将它放在服务器上之前，它没有正确构建。

首先，我必须使用Webpack构建bundle.js，然后将其发送到服务器。现在它工作正常。

反应api

0 个答案: