CODEWITHSUNDEEP
javascriptreactjsrequirejs
edwardffs
edwardffs

Reputation: 432

ReactJS + RequireJS returns empty page

I'm currently trying to learn how to make ReactJS and RequireJS work together since I want to use Chartist to make a online dashboard webapp.

However, I'm having trouble understanding how it works, since it keeps returning me empty pages, like there was to JS code at all. Here are my samples:

// main.js
requirejs.config({
    // module name mapped to CDN url
    paths: {
        // Require.js appends `.js` extension for you
        'react': 'https://unpkg.com/[email protected]/dist/react',
        'react-dom': 'https://unpkg.com/[email protected]/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)

Currently, it gives me an empty div where the ID is "root". As you can see, it's a pretty small example, but if I got this working I could move forward

Upvotes: 0

Views: 968

Answers (1)

Balaji731
Balaji731

Reputation: 1129

Change your HTML like below:

<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/[email protected]/dist/react',
        'react-dom': 'https://unpkg.com/[email protected]/dist/react-dom',
    }
});
 require(['main'], function() {

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

Config files moved here and main.js file has been required. Don't need to use <script src="main.js" type="text/babel"></script>, I guess its not working.

In main.js if you use babel to convert JSX, you can directly write JSX componenet, So I wrote react without JSX like below. 

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

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

Upvotes: 1

Related Questions