ReactJS + RequireJS返回空白页

Question

我目前正在尝试学习如何使ReactJS和RequireJS一起工作，因为我想使用Chartist制作在线仪表板Webapp。

但是，我很难理解它是如何工作的，因为它总是向我返回空白页面，就像根本没有JS代码一样。 这是我的样本：

// main.js
requirejs.config({
    // module name mapped to CDN url
    paths: {
        // Require.js appends `.js` extension for you
        'react': 'https://unpkg.com/react@15.3.2/dist/react',
        'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom',
    }
});

// load the modules defined above
requirejs(['react', 'react-dom'], function (React, ReactDOM) {

    var MyPage = React.createClass({
        render: function () {
            return (
                <div>
                    <h1>MY PAGE!</h1>
                </div>
            );
        }
    });

    // now you can render your React elements
    ReactDOM.render(<MyPage/>, document.getElementById('root'));
});

<!-- index.html -->
<html>
<body>
<!-- container for rendered React element -->
<div id="root"></div>

<!-- Require.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

<!-- main -->
<script src="../static/js/main.js" type="text/babel"></script>


</body>
</html>

from flask import Flask, render_template
from flask_cors import CORS

app = Flask(__name__)

CORS(app)

app.secret_key = "insert_random_value_here"

@app.route('/')
def register_page():
    return render_template("index.html")


if __name__ == '__main__':
    app.run(port=7000)

当前，它给我一个ID为“ root”的空div。 如您所见，这是一个很小的示例，但是如果我能做到这一点，我可以继续前进

Answer 1

如下更改HTML：

<html>
<head>

</head>
<body>
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

<!-- <script src="main.js" type="text/babel"></script> -->
<script type="text/javascript">
    // require config
    requirejs.config({
    // module name mapped to CDN url
    paths: {
        // Require.js appends `.js` extension for you
        'react': 'https://unpkg.com/react@15.3.2/dist/react',
        'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom',
    }
});
 require(['main'], function() {

        });   
</script>
</body>
</html>

配置文件已移至此处，并且需要main.js文件。 不需要使用<script src="main.js" type="text/babel"></script> ，我想它不起作用。

在main.js中，如果使用babel转换JSX，则可以直接编写JSX componenet，因此我编写了没有JSX的react，如下所示。

 requirejs(['react', 'react-dom'], function (React, ReactDOM) {

   const e = React.createElement;  
ReactDOM.render(   e('div', null, 'Hello World'),   document.getElementById('root') );
});

ReactJS + RequireJS返回空白页

问题描述

1 个解决方案

解决方案1
1 2018-03-20 06:06:26

ReactJS + RequireJS返回空白页

问题描述

1 个解决方案

解决方案1 1 2018-03-20 06:06:26

解决方案1
1 2018-03-20 06:06:26