React.render() not rendering component

Question

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'?

http://plnkr.co/edit/jb0mhDms1Gup7LDYrkGY?p=preview – Dhaval Patel Nov 09 '15 at 08:45 — Dhaval Patel, Nov 09 '15 at 08:45

score 0 · Accepted Answer · answered Nov 09 '15 at 04:39

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.

React.render() not rendering component

1 Answers1