var React = require('react'); module.exports=React.createClass({ render:function(){ return( <div> <h1> the list </h1> </div> )} })Cuando ejecuto el código anterior me sale 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 - ¿Me estoy perdiendo 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);el Grooveitems.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, aparece un error: createReactClass no es una función y cuando agrego import y la sintaxis de ES6 aparece 'desaceleración de importación ilegal' Gracias,
naveen
Este es seguramente un problema de versión. Si está comenzando de nuevo, le sugiero que cree un React component extendiendo React.Component en lugar de usar React.createClass ya que está obsoleto desde la versión 16.0 en adelante y se ha movido a un paquete separado 'create-react-class' como @Dream_Cap también menciona
También vaya con la sintaxis de ES6 para las importaciones. Modificarías tu código para
import React from 'react'; export default class App extends React.Component { render(){ return( <div> <h1> the list </h1> </div> ) } }Según los documentos , debe obtener el paquete npm create react class. 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);Si recibe un error que indica que React.creatClass es una función indefinida, es porque las versiones más nuevas de React no lo admiten.
Puedes intentar los siguientes pasos.
Instale el paquete npm create-react-class :
npm install --save-dev create-react-class Luego crea una nueva variable debajo de la variable ReactDom :
var createReactClass = require('create-react-class'); Ahora, en lugar de usar React.createClass() para los componentes, use la 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>`); } });