web-dev-qa-db-fra.com

ReactJs CreateClass n'est pas une fonction

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, le message d'erreur suivant s'affiche:

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

Est-ce à cause d'une différence de version 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 -Am il manque quelques dépendances 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 main.jsx a le suivant

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

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

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

l'epicerieitems.jsx a 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 la commande createReactClass, un message d'erreur s'affiche: createReactClass n'est pas une fonction et lorsque j'ajoute la syntaxe d'importation et ES6, la récupération est incorrecte.

Naveen

reactjs
41
Naveen DINUSHKA

Selon les documents , vous devez obtenir le paquet 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);
39
Dream_Cap

C’est sûrement un problème de version. Si vous commencez tout juste, je vous conseillerais de créer un React component en développant React.Component au lieu d’utiliser React.createClass car il est obsolète à partir de la version 16.0 et a été déplacé vers un package séparé 'create-react-class' sous le nom @Dream_Cap également mentionné.

Également aller 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>   
        )
     }
}
44
Shubham Khatri

Si vous obtenez une erreur indiquant que React.creatClass est une fonction non définie, c'est que les nouvelles versions de react ne prennent pas en charge cette fonctionnalité.

Vous pouvez essayer le ci-dessous:

Installez le package NPM create-react-class:

npm installer create-react-class --save-dev

Créez ensuite une nouvelle variable sous la variable ReactDom:

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

Maintenant, au lieu d'utiliser React.createClass () pour les composants, utilisez var createReactClass ()

Exemple: Remplacez ceci:

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

Avec ça:

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

14
Chandra Agarwala

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!

3
Naveen DINUSHKA

Nouveaux avertissements de dépréciation de React v15.5.0 +

Le plus gros changement est que nous avons extrait React.PropTypes et React.createClass dans leurs propres packages. Les deux sont toujours accessibles via l’objet principal React, mais l’utilisation de l’un ou de l’autre enregistrera un fichier ponctuel avertissement de dépréciation à la console en mode de développement. Cette volonté activer les optimisations futures de la taille du code.

Migration de React.createClass

Lorsque React a été initialement publié, il n'y avait pas de moyen idiomatique de créer des classes en JavaScript, nous avons donc fourni notre propre: React.createClass.

Plus tard, les classes ont été ajoutées à la langue dans le cadre de ES2015, donc nous ajout de la possibilité de créer des composants React à l'aide de classes JavaScript . Avec les composants fonctionnels, les classes JavaScript sont maintenant lesmoyen privilégié de créer des composants dans React.

Pour vos composants createClass existants, nous vous recommandons les migrer vers des classes JavaScript. Cependant, si vous avez des composants qui reposent sur mixins, la conversion en classes peut ne pas être immédiate réalisable. Si tel est le cas, create-react-class est disponible dans npm sous forme de fichier instantané 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 />;
  }
});

Vos composants continueront à fonctionner comme auparavant.

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

Mais pour un accès rapide, j'inclus quelques lignes ici:

Le moyen le plus simple de définir un composant consiste à écrire une fonction JavaScript:

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

Cette fonction est un composant React valide car elle accepte un seul argument d'objet props (qui représente les propriétés) avec des données et renvoie un élément React. Nous appelons ces composants functional car ce sont littéralement des fonctions JavaScript.

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

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

Les deux composants ci-dessus sont équivalents du point de vue de React.

3
Alex Jolig
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 cette façon, vous pourriez éviter le mot clé de classe

1
user9610264

Commencez par essayer l’installation de npm. Il est possible que vos développements dans package.json ne soient pas complètement installés.

0
zero8

React.createClass ne figure pas dans la documentation mise à jour, vous devez utiliser createComponent avec ECMA6 Class 

0
Ramkumar Khubchandani