ReactJs CreateClass n'est pas une fonction

Question

var React = require('react');

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

Lorsque j'exécute le code ci-dessus, j'obtiens l'erreur suivante :

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

Est-ce à cause d'une version d'une différence ou d'une faute de frappe ?

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 -je Suis pas certains de la dépendance dans ce fichier

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
    })
})

Et mon principal.jsx est la suivante

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

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

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

le groceryitems.jsx est la suivante

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

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

            )

        }
})    

Lorsque j'ajoute le createReactClass j'obtiens une erreur: createReactClass n'est pas une fonction et quand j'ajoute l'importation et l'ES6 syntaxe-je obtenir 'importation illégale de décélération ' Merci,

Naveen

Answer 1

C’est sûrement un problème de version. Si vous débutez à l’état frais, je vous conseillerais de créer un React component en étendant React.Component plutôt que d’utiliser React.createClass depuis son obsolète version 16.0 et a été déplacé vers un package séparé 'create-react-class' comme @Dream_Cap mentionne également

Allez également avec la syntaxe ES6 pour les importations. Vous modifieriez votre code pour

 import React from 'react';

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

Answer 2

Selon les documents , vous devez obtenir le package npm create react class. A partir de la ligne de commande du chemin de fichier de votre projet, vous devez faire npm install create-react-class --save , puis modifier le code comme suit:

 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>   
                )
            }
 

Vous devez également utiliser React DOM pour rendre les composants comme suit:

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

Answer 3

Si vous obtenez une Erreur indiquant que Réagir.creatClass est une fonction non définie, c'est parce que les nouvelles versions de réagir, de ne pas le supporter.

Vous pouvez essayer de le ci-dessous:

Installer le mécanisme national de prévention de création de réagir la classe package:

npm install créez-réagir-classe --save-dev

Ensuite, créez une nouvelle variable en vertu de la ReactDom variable:

var createReactClass = require('create-réagir-class');

Maintenant, au lieu de l'aide de Réagir.createClass() pour les composants de l'utilisation de la var createReactClass()

Exemple: Remplacer ce:

var TodoComponent = Réagir.createClass({ render:function(){ rendement(<h1>Helloooo</h1>); } });

Avec ceci:

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

Answer 4

Nouvelle Dépréciation des Avertissements de Réagir v15.5.0+

Le plus grand changement est que nous avons extraites React.PropTypeset De réagir.createClass dans leurs propres paquets. Les deux sont encore accessibles par la principale, React objet, mais en utilisant soit vous connecter une seule fois dépréciation d'avertissement sur la console lorsque le mode de développement. Ce sera permettre à l'avenir de la taille du code des optimisations.

La migration de Réagir.createClass

Lorsque Réagir a été initialement publié, il n'y avait pas idiomatiques façon de créer des classes en JavaScript, donc nous avons donné notre propre: React.createClass.

Plus tard, les catégories ont été ajoutées à la langue dans le cadre de l' ES2015, de sorte que nous ajout de la possibilité de créer Réagir composants à l'aide de classes JavaScript. Avec des composants fonctionnels, JavaScript classes sont maintenant la le moyen privilégié pour créer des composants de Réagir.

Pour votre createClass composants, nous vous recommandons de migrer classes JavaScript. Toutefois, si vous avez des composants qui dépendent de l' mixins, la conversion de classes peuvent ne pas être immédiatement possible. Si oui, create-react-class est disponible sur npm comme une goutte d'eau dans remplacement:

// 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 />;
  }
});

Votre composants continuera à fonctionner de la même manière qu'avant.

Si vous êtes intéressé à utiliser de nouvelles classes javascript, je vous suggère de jeter un oeil à ici.

Mais pour un accès rapide-je inclure quelques lignes ici:

La façon la plus simple de définir un composant est d'écrire une fonction JavaScript:

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

Cette fonction est valide Réagir composant car il accepte un seul props (ce qui est synonyme de propriétés) argument d'objet avec les données et renvoie une Réagir élément. Nous appelons ce type de composants, functional parce qu'ils sont littéralement des fonctions JavaScript.

Vous pouvez également utiliser un ES6 classe pour définir un composant:

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

Ces deux composantes sont l'équivalent de Réagir de point de vue.

Answer 5

Merci pour toute l'aide. Voici comment se présente la réponse finale: 1) utilisez react-dom pour rendre

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

2) utilisez create-react-class (not react) et exportez-le ' module.exports= createReactClass({ .... au lieu de module.exports=React.createReactClass (cela donne une erreur' createReactClass 'n'est pas une fonction

Merci encore à tous! '