reactjs - page - React TypeError: React.renderComponent no es una función

react-helmet ssr

Question

Recibí este extraño mensaje después de seguir un tutorial de React que construye una aplicación simple. http://blog.revathskumar.com/2014/05/getting-started-with-react.html

Utilicé bower para instalar reaccionar e incluí los scripts así:

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

como en el tutorial. Al principio pensé que los scripts no estaban cargados, pero obviamente ese no es el caso. ¿Cuál es el problema?

Answer 1

1. Descargue el último kit de inicio React -> https://facebook.github.io/react/downloads.html
2. Use los archivos react.js y react-dom.js en la carpeta de compilación.
3. En lugar de usar "text / jsx" use "text / babel" en su lugar, haciendo referencia a esta biblioteca reducida -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js

Aquí está el script completo para su referencia

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

Últimamente, ''React.render ()'' se deprecia así que use ''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 3

Bower instala la última versión en este caso, la versión 0.12.0.

Hay un cambio en la convención de la función de render.

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

El componente se ha eliminado de todos nuestros métodos React.render *.

así que usa

    React.render(

en lugar de

   React.renderComponent(

Answer 4

Estos dias es

ReactDOM.render(

e incluir el archivo fuente:

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

Esta es la advertencia de React:

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

Answer 5

Yo tuve el mismo problema; Seguí el tutorial con precisión y obtuve el mismo error que tú.

Estos son los cambios que necesitaba hacer para que funcione ...

npm install --save react-dom

contenido index.jsx cambiado:

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

Y eso lo tengo

Soy muy nuevo para reaccionar, por lo que puede que esta no sea la mejor solución, pero es mía por ahora.

edición : desde entonces he encontrado otro tutorial más reciente (que funciona) https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

Answer 6

debe escribir ReactDOM.render , en lugar de 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

Estos tres javascript son necesarios