reactjs Cannot read property 'keys' of undefined

Question

I am learning reactjs through a tutorial and ran into this error. That says \"Cannot read property \'keys\' of undefined\" My code is very minimal so I assume that it has to

Answer 1

Today is my first day with React, and I've faced this issue when I tried to use Babel to transpile the JSX!

The issue is the version you are trying to use, please use this one instead:

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

Don't forget to write type="text/babel" in the <script> tag which you will write the JSX in to let Babel transpile it for you, if you don't, you will find this error (As I have faced it too! :D):

Uncaught SyntaxError: Unexpected token <

Answer 2

Edit: oddly, after our comments above, I checked to see if it was indeed the babel core version, I am using this one in my fiddle:

https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js

The second I switch to your version above I get this:

Uncaught TypeError: Cannot read property 'keys' of undefined

Use React.createClass not ReactDOM.createClass and wrap multiple lines of html in parenthesis like so:

Working Example: https://jsfiddle.net/69z2wepo/38998/

var Hello = React.createClass({
  render: function() {
    return (     
       <div>
        <h1>Hello World</h1>
        <p>This is some text</p>
       </div>
    )
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Answer 3

I haven't worked with React before, but there are a few things that I see that may be causing your issues. First, React.createClass instead of ReactDOM.createClass. Second, you need to wrap your html in parentheses:

var HelloWorld = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>This is some text></p>
      </div>
    );
  }
});

This should get it working

Answer 4

Just to be clear, as the other answers are a bit convoluted. The problem was using "babel-core" instead of "babel-standalone". Just look up for a cdn for babel-standalone instead.

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js

Answer 5

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>

This is the version of babel-core which isn't giving me the error as shown below:

If you want to use the latest version, You can use the latest standalone version. (as per 22-Nov-2018)

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

But this gives the following warning :

"You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/"