Reactjs Невозможно прочитать ключи свойств undefined

Я изучаю реакцию через учебник и сталкиваюсь с этой ошибкой. Это говорит: "Невозможно прочитать ключи свойств undefined". Мой код очень минимален, поэтому я предполагаю, что он имеет отношение к структуре языка. Кто-нибудь знает проблему и возможное решение?

   <!DOCTYPE html>

<html>
<head>

    <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.min.js"></script>
    <title>ReactJs</title>
</head>
<body>
    <div id="app"></div>

    <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.getElementById('app'));
    </script>
</body>
</html>

Ответы

Ответ 1

Редактирование: как ни странно, после наших комментариев выше, я проверил, действительно ли это была базовая версия babel, я использую эту в своей скрипке:

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

Второе, я перехожу к вашей версии выше, я получаю следующее:

Uncaught TypeError: Cannot read property 'keys' of undefined

Используйте React.createClass not ReactDOM.createClass и оберните несколько строк html в круглых скобках так:

Рабочий пример: 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')
);

Ответ 2

Сегодня мой первый день с React, и я столкнулся с этой проблемой, когда попытался использовать Babel для перевода JSX!

Проблема - это версия, которую вы пытаетесь использовать, вместо этого:

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

Не забудьте написать type="text/babel" в теге <script>, который вы напишете в JSX, чтобы позволить Babel перекрыть его для вас, если вы этого не сделаете, вы найдете эту ошибку (поскольку я столкнулся с ней тоже!: D):

Uncaught SyntaxError: Unexpected token <

Ответ 3

Я раньше не работал с React, но есть несколько вещей, которые, как я вижу, могут вызывать проблемы. Сначала React.createClass вместо ReactDOM.createClass. Во-вторых, вам нужно заключить html в круглые скобки:

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

Это должно заставить его работать