React TypeError: React.renderComponent не является функцией

У меня есть это странное сообщение после того, как после учебного пособия React создайте простую программу. http://blog.revathskumar.com/2014/05/getting-started-with-react.html

Я использовал bower для установки реакции и включил скрипты следующим образом:

<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>

как в учебнике. Сначала я думал, что сценарии не загружены, но это, очевидно, не так. В чем проблема?

Ответы

Ответ 1

В наши дни это

ReactDOM.render(

и включить исходный файл:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>

Это предупреждение от React:

Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.

Ответ 2

bower устанавливает последнюю версию в этом случае версии 0.12.0.

есть изменение в соглашении функции рендеринга.

https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

Компонент удален из всех наших методов React.render *.

поэтому используйте

    React.render(

вместо

   React.renderComponent(

Ответ 3

В последнее время "React.render()" обесценивается. Используйте "ReactDom.render()" 

import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App.jsx';
require('./main.scss');

ReactDOM.render(<App />, document.getElementById('container'));

Ответ 4

У меня была та же проблема; Я точно следил за учебником, и я получил ту же ошибку, что и вы.

Это изменения, которые мне нужно сделать, чтобы заставить его работать...

npm install --save react-dom

изменено index.jsx содержимое:

/** @jsx React.DOM */
'use strict'
var ReactDOM = require('react-dom')
var Hello = require('./Hello')
ReactDOM.render(<Hello />, document.getElementById('content'))

И это получило

Я очень новичок, чтобы реагировать, поэтому это может быть не лучшее решение, но оно мое сейчас.

edit: с тех пор я нашел еще одно, более позднее пошаговое руководство (которое работает) https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

Ответ 5

Здесь полный script для вашей справки

<div id="target-container"></div>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
    var MyComponent = React.createClass({
        render: function(){
            return(
                <h1>Sample text</h1>
            );
        }
    });

    ReactDOM.render(
        <MyComponent/>,
        document.getElementById('target-container')
    );
</script>

Ответ 6

вы должны написать ReactDOM.render вместо React.render.

https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js

Эти три javascript необходимы