React TypeError: React.renderComponent nie jest funkcją

Question

Mam tę dziwną wiadomość po wykonaniu samouczka React, budującego prostą aplikację. http://blog.revathskumar.com/2014/05/getting-started-with-react.html

użyłem altanę zainstalować reagować i włączone skrypty tak:

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

jak w tutorialu. Początkowo myślałem, że skrypty nie zostały załadowane, ale to oczywiście nie jest sprawa. Na czym polega problem?

Answer 1

altanka instaluje najnowszą wersję w tym przypadku wersja 0.12.0.

Występuje zmiana w konwencji funkcji renderowania.

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

Component has been removed from all of our React.render* methods.

więc używać

React.render(

zamiast

React.renderComponent(

Answer 2

Te dni to

ReactDOM.render(

i dołączyć plik źródłowy:

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

To jest ostrzeżenie od React:

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

Answer 3

1. Pobierz najnowszy reagować Starter Kit ->https://facebook.github.io/react/downloads.html
2. Stosować react.js i react- pliki dom.js w folderze kompilacji.
3. Zamiast używania "text/JSX" "text/Babel" zamiast, zgodnie z niniejszą minified bibliotekę ->https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js

Oto pełne skrypt celach

<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> 

Answer 4

trzeba napisać ReactDOM.render, zamiast 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 

Te trzy JavaScript jest wymagane

Answer 5

Ostatnio 'React.render()' jest amortyzowana więc używać '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')); 

Answer 6

miałem ten sam problem; Śledziłem dokładnie samouczek i dostałem ten sam błąd, który zrobiłeś.

Oto zmiany, które musiałem wprowadzić, aby uruchomić go ...

npm install --save react-dom 

zmienił index.jsx zawartość:

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

I got it

Jestem bardzo nowy reagować, więc to nie może być najlepszym rozwiązaniem, ale to jest moje teraz.

edit: Mam od znalazł inną, nowszą instruktażu (które działa) https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html