CODEWITHSUNDEEP
javascriptreactjskey
NVA
NVA

Reputation: 1692

React JS Cannot read property 'keys' of undefined

I am beginning to learn React through a tutorial, however I ran into this error when I ran the code that I created.

The error seems to be one that has to do with the framework of the languages. Perhaps with the version of Babel that I imported for the translation.

Does anyone know the actual situation and how to find a soulution.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
    <title>ReactJs</title>
</head>
<body>
    <script type="text/babel">
        var HelloWorld = ReactDOM.createClass({
        render: function() {
        return <div>
        <h1>Hello World</h1>
        <p>This is some text></p>
        </div>
        }
        });
        ReactDOM.render(<HelloWorld/>, document.body);
    </script>
</body>
</html>

Upvotes: 2

Views: 2936

Answers (3)

Xuan
Xuan

Reputation: 5629

babel-browser is deprecated. use babel-standalone https://github.com/babel/babel-standalone instead:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Upvotes: 1

Jannik
Jannik

Reputation: 466

React.render has been deprecated since React 0.14 (released October 7, 2015):

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

I'd strongly recommend the awesome Create React App NPM module from Facebook, which creates React apps with no configuration, but still uses the latest ES6 and Babel features. Also it comes with hot reloading out of the box and has a build option, for creating a minified, bundled .js file ready for production.

https://github.com/facebookincubator/create-react-app

Upvotes: 0

ThinkTankShark
ThinkTankShark

Reputation: 39

I'm not sure if you have found the results yet, but I got the same error and found out it's the cdn version mismatch issues.

If you use these cdn's:

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

and change your 

ReactDOM.render(<HelloWorld/>, document.body);

to 

React.render(<HelloWorld/>, document.body);

it will work now.

Upvotes: 1

Related Questions