React TypeError: React.renderComponent non è una funzione

Question

Ho questo strano messaggio dopo aver seguito un tutorial React per creare una semplice app. http://blog.revathskumar.com/2014/05/getting-started-with-react.html

ho usato scrigno di installare reagire e inclusi gli script in questo modo:

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

come nel tutorial. All'inizio pensavo che gli script non fossero stati caricati, ma ovviamente non è così. Qual è il problema?

Answer 1

bower installa l'ultima versione in questo caso versione 0.12.0.

c'è una modifica nella convenzione della funzione di rendering.

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

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

modo da utilizzare

React.render(

anziché

React.renderComponent(

Answer 2

Oggigiorno è

ReactDOM.render(

e comprendono il file sorgente:

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

Questo è l'avvertimento da Reagire:

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

Answer 3

1. Scarica l'ultima Starter Kit React ->https://facebook.github.io/react/downloads.html
2. Utilizzare react.js e react- i file dom.js nella cartella build.
3. Invece di utilizzare l'uso "text/JSX" "text/babel", invece, fa riferimento a questa libreria minimizzato ->https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js

Ecco lo script completo per il vostro riferimento

<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

si dovrebbe scrivere ReactDOM.render, anziché 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 

Questi tre Javascript è necessario

Answer 5

Lately 'React.render()' sono ammortizzati Così utilizzare '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

Ho avuto lo stesso problema; Ho seguito il tutorial con precisione e ho ottenuto lo stesso errore che hai fatto.

Queste sono le modifiche che dovevo fare per farlo funzionare ...

npm install --save react-dom 

cambiato index.jsx contenuti:

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

E che ce l'ha

Sono molto nuovo a reagire, quindi questo potrebbe non essere la soluzione migliore, ma è la mia, per ora.

Edit: allora ho trovato un altro, walkthrough più recente (che funziona) https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html