HTML code:

<div id="content"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src=".1.19/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>

JSX code:

// create class
var HelloWord = React.createClass({
    render: function () {
        return (
            <div>
                <p>Hello Word!</p>
            </div>
        );
    }
});

// show content
ReactDOM.render(
    <HelloWord></HelloWord>, document.getElementById('content')
);

Console message after run:

Uncaught TypeError: Cannot read property 'keys' of undefined

Why?

HTML code:

<div id="content"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdn.bootcss./babel-core/6.1.19/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>

JSX code:

// create class
var HelloWord = React.createClass({
    render: function () {
        return (
            <div>
                <p>Hello Word!</p>
            </div>
        );
    }
});

// show content
ReactDOM.render(
    <HelloWord></HelloWord>, document.getElementById('content')
);

Console message after run:

Uncaught TypeError: Cannot read property 'keys' of undefined

Why?

• javascript
• reactjs

• 1 there is a problem similar with yours you can find it here – chenkehxx Commented Jul 5, 2016 at 3:12
• Version 6 doesn't work for me at all. – Vahid Amiri Commented Jul 9, 2016 at 3:30
• The version of babel must be less than 6.0.0 – Bhawan Commented Sep 19, 2017 at 6:17

1 Answer 1

I also ran into the same issue and while surfing the internet I found that there was a problem with the babel-core version that I used. I replaced that with another and got my code to work.

Try this

HTML

<div id="content"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>

JSX

var HelloWord = React.createClass({
    render: function () {
        return (
            <div>
                <p>Hello Word!</p>
            </div>
        );
    }
});

// show content
ReactDOM.render(
    <HelloWord></HelloWord>, document.getElementById('content')
);

It should work for you too.

Update:

You can use babel-standalone package for babel pilation with the newer version since babel-browser is deprecated.

<script src="https://cdnjs.cloudflare./ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>