Search code examples
javascriptreactjsrefluxjs

React.render() not rendering component

I'm trying to get my head around React, Reflux and JSX. I have a simple file I'd like to try and get working. 

<html>
    <body>
        <div id="counter"></div>

        <script src="bower_components/react/react.js"></script>
        <script src="bower_components/reflux/dist/reflux.js"></script>
        <script src="bower_components/react-dom/react-dom.js"></script>

        <script type="text/jsx">
            var CounterComponent = React.createClass({
                render: function() {
                    return (
                        <div>Hello, world</div>
                    );
                }
            });

            React.render(<CounterComponent />, document.getElementById("counter"));
        </script>

    </body>
</html>

I've setup my actions, store and component. But React.render() doesn't actually create anything in my div. I've commented out much of the code to try and isolate why it's not rendering. I get no errors, so I assume it's something to do with the jsx not being seen...

Any ideas why this is failing to render my 'hello world'?

Solution

  • The JSX Transformer is available in Babel. Got this working by installing babel with bower, adding the following:

    <script src="bower_components/babel/browser.js"></script>

    and changing "text/jsx" to "text/babel"

    After this the component rendered correctly.