ReactJs CreateClass no es una función

var React = require('react'); module.exports=React.createClass({ render:function(){ return( 

the list

)} })

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

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

¿Esto se debe a una diferencia de versión o a 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 algo de 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(,app); 

the groceryitems.jsx tiene lo siguiente

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

Grocery Listify

) } })

Cuando agrego el createReactClass obtengo un error: createReactClass no es una función y cuando agrego la importación y la syntax ES6 obtengo ‘illegal import deceleration’ Gracias,

Naveen

Según los documentos , debe obtener el paquete npm create reaction class. Desde la línea de comandos 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( 

the list

) }

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

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

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á obsoleto desde la versión 16.0 adelante y se ha movido a un paquete separado 'create-react-class' como @Dream_Cap también mencionan

También vaya con la syntax de ES6 para las importaciones. Usted modificaría su código para

 import React from 'react'; export default class App extends React.Component { render(){ return( 

the list

) } }

Si obtiene un error que indica que React.creatClass es una función indefinida es porque las versiones más nuevas de reactjsr no son compatibles.

Puedes probar lo siguiente:

Instale el paquete NPM create-reactjsr-class:

npm instala create-react-class –save-dev

Luego crea una nueva variable debajo de la variable ReactDom:

var createReactClass = require (‘crear-reactjsr-clase’);

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

Ejemplo: Reemplazar esto:

var TodoComponent = React.createClass ({render: function () {return (

Helloooo );}});

Con este:

var TodoComponent = createReactClass ({render: function () {return (

Helloooo );}});

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(,app); 

2) use create-react-class (no reaccione) y module.exports= createReactClass({module.exports= createReactClass({ …. en vez de module.exports=React.createReactClass (esto da un error’ createReactClass ‘no es una función)

¡Gracias a todos de nuevo! ‘

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

Welcome to React

To get started, edit src/App.js and save to reload.

) } export default App;

De esta forma, podrías evitar Class keyword

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

El mayor cambio es que hemos extraído React.PropTypes y React.createClass en sus propios paquetes. Ambos siguen siendo accesibles a través del objeto React principal, pero al usar cualquiera de ellos se registrará una advertencia de desaprobación por única vez en la consola cuando se encuentre en modo de desarrollo. Esto permitirá futuras optimizaciones del tamaño del código.

Migrando desde React.createClass

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

Más tarde, las clases se agregaron al lenguaje como parte de ES2015 , por lo que agregamos la capacidad de crear componentes de React utilizando 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 createClass existentes, 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 npm create-react-class está disponible en npm como un reemplazo npm :

 // Before (15.4 and below) var React = require('react'); var Component = React.createClass({ mixins: [MixinA], render() { return ; } }); // After (15.5) var React = require('react'); var createReactClass = require('create-react-class'); var Component = createReactClass({ mixins: [MixinA], render() { return ; } }); 

Sus componentes continuarán funcionando igual que antes.

Si estás interesado en utilizar nuevas clases de JavaScript , te sugiero que le eches un vistazo aquí .

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 

Hello, {props.name}

; }

Esta función es un componente Reaccionar válido porque acepta un único argumento de objeto props (que representa propiedades) con datos y devuelve un elemento Reaccionar. Llamamos a tales componentes functional porque son literalmente funciones de JavaScript.

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

 class Welcome extends React.Component { render() { return 

Hello, {this.props.name}

; } }

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

React.createClass no aparece en la documentación actualizada. Debe ir a createComponent con la clase ECMA6.