web-dev-qa-db-fra.com

"Uncaught TypeError: React.createClass n'est pas une fonction" dans le fichier Render.js (application électronique)

Je suis nouveau sur react.js et j'essaye de faire en sorte que ce code remplace une ligne dans un fichier html dans une application électronique avec tout ce qui retourne dans la variable MainInterface 

Ceci est mon fichier Render.js

var React = require('react');
var ReactDOM = require('react-dom');

var $ = jQuery = require('jquery');
var bootstrap = require('bootstrap');

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

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

ReactDOM.render(
  <MainInterface />,
  document.getElementById('projects')
);//render

Ceci est le fichier html (cherchant à remplacer WPM ... en cours de chargement) (j'ai la dernière balise html qui manque ici dans mon fichier)

> <!DOCTYPE html> <html lang ="en">   <head>
>     <meta charset="utf-8">
>     <meta name ="viewport" content="width=device-width, initial-scale=1.0">
>     <meta http-equiv="X-UA-Compatible" content="ie=Edge">
>     <link rel="stylesheet" href="css/app.css">
>     <title>Project Manager</title>   </head>   <body>   <div claa="main">
>     <div class="page" id="projectratings">
>       <div id="projects">
>         <h2>WPM ... loading</h2>
>       </div>
>     </div>   </div> <script src="js/render.js"></script>   </body>

C'est mon package.json

{
  "name": "ETest",
  "version": "1.0.0",
  "main": "app/main.js",
  "devDependencies": {
    "create-react-class": "^15.6.2",
    "electron": "^1.7.8",
    "electron-packager": "^9.1.0",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-concat-css": "^2.3.0",
    "gulp-react": "^3.1.0",
    "gulp-run": "^1.7.1",
    "react": "^16.0.0",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.0.0",
    "reactify": "^1.1.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "electron-reload": "^1.2.2",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4"
  }
}

J'ai essayé d'installer creat-react-class et de l'utiliser (comme indiqué dans la ligne commentée dans le fichier render.js)

J'ai désinstallé et réinstallé réagi et réagi-dom

ne sais pas quoi d'autre me manque

continue juste à obtenir 

C:\Users\user\Desktop\ElectronTesting\process\js\fake_6052bf8b.js:8 
Uncaught TypeError: React.createClass is not a function

mon fichier render.js se trouve dans ElectronTesting\process\js\render.js je ne sais pas pourquoi il pointe vers fake_6052bf8b.js Je suppose que c'est un type de fichier temporaire (corrigez-moi si je me trompe)

Merci pour toute aide. 

** EDIT Ouais, juste une simple erreur, j'ai oublié de remplacer React.createClass par createReactClass, merci pour l'exemple de code qui m'a enfin fait voir !!

javascriptelectronjsxpackage.jsonreact-dom
3
Tavem

Réaction supprimée createClass de la version 16. Vous pouvez utiliser create-react-class pour migrer facilement comme indiqué dans la documentation de réaction.

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

en savoir plus à ce sujet https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass

19
sbr

export default class App extends React.Component{
    render() {
        return(
           <h1>its works</h1>
        );
    }
};

cela fonctionne pour moi, consultez ce ReactJs CreateClass n'est pas une fonction , donc il exporte React.component au lieu d'utiliser React.createClass

2
Francis Tito

Dans la dernière version de React, vous remarquerez que React.createClass a été supprimé de la bibliothèque. L'un des changements les plus importants est que vous pouvez créer des composants React à l'aide de classes JavaScript.

0
Sudabe-Neirizi