Ad

Unable To Execute Basic Reactjs Script Sample

- 1 answer

I am new to ReactJS. I tried the following and not able to see "topBar" (react element) related content:

    require(['react', 'ReactDOM', 'topBar'], function (React, ReactDOM, topBar) {

    var App = React.createClass({
        displayName: 'App',

        render: function () {
            return React.createElement(
                'div',
                { className: 'designer-layout' },
                React.createElement('topBar', null)
            );
        }
    });
    var r = ReactDOM.render(React.createElement(App, null), document.getElementById("web-designer-container"));
});

The code for topBar.js looks like the following:

define('topBar', ['react'], function (React) {
    return React.createClass({
        render: function () {
            debugger;
            return React.createElement(
                'div',
                { className: 'top-bar' },
                React.createElement(
                    'div',
                    { className: 'title ' },
                    'Web test'
                )
            );
        }
    });
});

Following is the htm:

<html>
<head>
        <script src="jquery-2.2.0.js"></script>
        <script src="require.js"></script>


</head>
<body>
<div id="web-designer-container">

</div>
        <script>
            require.config({
                baseUrl: '',
                paths: {
                    "react": 'react-0.14.2',
                    "ReactDOM": 'react-dom'
                }
            });
            //require(['app'], function(app) { app(); });
            //require(['app']);
        </script>
        <script src="app.js"></script>
</body>
</html>

"app" gets rendered but not "topBar" (properly). What am I missing?

Update (including JSX):

require(['react', 'ReactDOM', 'topBar'],
    function (React, ReactDOM, topBar) {
        var App = React.createClass({
            render: function () {
                return (
                        <div className="designer-layout">
                            <topBar />
                        </div>
                    );
            }
        });
        var r = ReactDOM.render(<App />, document.getElementById("web-designer-container"));
    });

define('topBar', ['react'], function (React) {
    return React.createClass({
        render: function () {
            return (
                <div className="top-bar">
                            <div className="title ">Web Test</div>
                        </div>                  
                );
        }
    });
});
Ad

Answer

dont use camel-casing for component names. Try with

<TopBar/>
Ad
source: stackoverflow.com
Ad