logo - ReactJs CreateClass no es una función

react logo

Question

var React = require(''react'');

module.exports=React.createClass({
   render:function(){
   return(
        <div>
           <h1> the list  </h1>
        </div>   
   )}
})

Cuando ejecuto el código anterior, aparece el siguiente error:

app.js:4 Uncaught TypeError: React.createClass is not a function

¿Es esto debido a una diferencia de versión o un error tipográfico?

package.json-I have included create-react-class as seen here but not in the bower.json file 


 {
    "dependencies": {
        "browser-sync": "^2.18.13",
        "browserify": "^14.4.0",
        "create-react-class": "^15.6.2",
        "ejs": "^2.5.7",
        "express": "^4.16.0",
        "gulp": "^3.9.1",
        "gulp-live-server": "0.0.31",
        "react": "^16.0.0",
        "reactify": "^1.1.1",
        "vinyl-source-stream": "^1.1.0"
      }
    }

gulpfile.js -Am me falta alguna dependencia en este archivo

var gulp= require(''gulp'');
var LiveServer= require(''gulp-live-server'');
var browserSync=require(''browser-sync'');
var browserify = require(''browserify'');
var reactify= require(''reactify'');
var source = require(''vinyl-source-stream'');

gulp.task(''live-server'', function(){

    var server= new LiveServer(''server/main.js'');
    server.start();
})

gulp.task(''bundle'',function(){
  return browserify({
    entries:''app/main.jsx'',
    debug:true,
  })
  .transform(reactify)
  .bundle()
  .pipe(source(''app.js''))
  .pipe(gulp.dest(''./.tmp''))

})


gulp.task(''serve'',[''bundle'',''live-server''],function(){
    browserSync.init(null,{
        proxy: "http://localhost:7777",
        port:9001
    })
})

Y mi main.jsx tiene lo siguiente

 var React = require(''react'');
var createReactClass = require(''create-react-class'');

var GroceryItemList=require(''./components/GroceryItemsList.jsx'');

React.render(<GroceryItemList/>,app);

the groceryitems.jsx tiene lo siguiente

var React = require(''react'');
var createReactClass = require(''create-react-class'');
module.exports=React.createReactClass({

        render:function(){
            return(
                <div>
                    <h1> Grocery Listify </h1>
                </div>

            )

        }
})    

Cuando agrego createReactClass obtengo un error: createReactClass no es una función y cuando agrego importación y sintaxis ES6 obtengo ''desaceleración de importación ilegal'' Gracias,

Naveen

Answer 1

Este es seguramente un problema de versión. Si está comenzando de cero, le sugiero que cree un React component extendiendo React.Component lugar de usar React.createClass ya que está en desuso desde la versión 16.0 adelante y se ha movido a un paquete separado ''create-react-class'' como @Dream_Cap también menciona

También vaya con la sintaxis ES6 para las importaciones. Modificaría su código para

import React from ''react'';

export default class App extends React.Component {
    render(){
       return(
           <div>
               <h1> the list  </h1>
           </div>   
        )
     }
}

Answer 2

Gracias por toda la ayuda. Así es como se ve la respuesta final: 1) use react-dom para renderizar

 var ReactDOM = require(''react-dom'');
  var List=require(''./components/List.jsx'');
  ReactDOM.render(<List/>,app);

2) use create-react-class (not react) y module.exports= createReactClass({ '' module.exports= createReactClass({ .... en lugar de module.exports=React.createReactClass (esto da un error'' createReactClass ''no es una función

Gracias a todos de nuevo! ''

Answer 3

Intente con npm install primero, podría ser que sus dependencias en package.json no estén completamente instaladas.

Answer 4

React.createClass no figura en la documentación actualizada, debe ir a createComponent con clase ECMA6

Answer 5

Según los documents , debe obtener el paquete de clase nrea create react. Desde la línea de comando de la ruta del archivo de su proyecto, debe hacer npm install create-react-class --save , y luego modificar el código de esta manera:

var React = require(''react'');
//You need this npm package to do createReactClass
var createReactClass = require(''create-react-class'');

    module.exports=createReactClass({
            render:function(){
                return(
                    <div>
                        <h1> the list  </h1>
                    </div>   
                )
            }

También necesita React DOM para representar los componentes de esta manera:

npm install react react-dom
var ReactDOM = require(''react-dom'');
ReactDOM.render(<GroceryItemList/>,app);

Answer 6

Si recibe un error que indica que React.creatClass es una función indefinida es porque las versiones más recientes de react no lo admiten.

Puedes probar lo siguiente:

Instale el paquete NPM create-react-class:

npm install create-react-class --save-dev

Luego cree una nueva variable bajo la variable ReactDom:

var createReactClass = require (''create-react-class'');

Ahora, en lugar de usar React.createClass () para los componentes, use var createReactClass ()

Ejemplo: Reemplace esto:

var TodoComponent = React.createClass ({render: function () {return ( <h1> Helloooo </h1> );}});

Con este:

var TodoComponent = createReactClass ({render: function () {return ( <h1> Helloooo </h1> );}});

Answer 7

Nuevas advertencias de desaprobación de React v15.5.0 +

El mayor cambio es que hemos extraído React.PropTypes y React.createClass en sus propios paquetes. Aún se puede acceder a ambos a través del objeto React principal, pero el uso de ambos registrará una advertencia de desaprobación única en la consola cuando esté en modo de desarrollo. Esto permitirá futuras optimizaciones de tamaño de código.

Migrar desde React.createClass

Cuando React se lanzó inicialmente, no había una forma idiomática de crear clases en JavaScript, por lo que proporcionamos la nuestra: React.createClass .

Más tarde, se agregaron clases al lenguaje como parte de ES2015 , por lo que agregamos la capacidad de crear componentes React usando clases de JavaScript. Junto con los componentes funcionales, las clases de JavaScript son ahora la forma preferida de crear componentes en React .

Para sus componentes existentes de createClass , le recomendamos que los migre a clases de JavaScript. Sin embargo, si tiene componentes que dependen de mixins , la conversión a clases puede no ser inmediatamente factible. Si es así, create-react-class está disponible en npm como reemplazo npm :

// Before (15.4 and below)
var React = require(''react'');

var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// After (15.5)
var React = require(''react'');
var createReactClass = require(''create-react-class'');

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

Sus componentes continuarán funcionando igual que antes.

Si está interesado en utilizar nuevas clases de JavaScript , le sugiero que eche un vistazo here .

Pero para un acceso rápido, incluyo algunas líneas aquí:

La forma más sencilla de definir un componente es escribir una función de JavaScript:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Esta función es un componente React válido porque acepta un solo argumento de objeto props (que significa propiedades) con datos y devuelve un elemento React. Llamamos functional estos componentes porque son, literalmente, funciones de JavaScript.

También puede usar una clase ES6 para definir un componente:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Los dos componentes anteriores son equivalentes desde el punto de vista de React.

Answer 8

import React, { Component } from ''react'';
import logo from ''./logo.svg'';
import ''./App.css'';

const App = function(){};
App.prototype = Object.create(Component.prototype);
App.prototype.render = function(){
     return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
     )
   }
export default App;

De esta forma, podría evitar la palabra clave Class