Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
114
rated 0 times [  119] [ 5]  / answers: 1 / hits: 23739  / 7 Years ago, wed, october 4, 2017, 12:00:00

I'm new to react.js and I am trying to get this code to replace one line in an html file inside an electron app with whatever is in return inside the MainInterface variable



This is my Render.js File



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


This is the html file (looking to replace WPM ... loading) (I do have the last html tag that is missing here in my actual file)



> <!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>


This is my 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
}
}


I have tried installing creat-react-class and using that (as seen in the line that is commented out in the render.js file)



I have uninstalled and reinstalled both react and react-dom



not sure what else I am missing



just keep getting



C:UsersuserDesktopElectronTestingprocessjsfake_6052bf8b.js:8 
Uncaught TypeError: React.createClass is not a function


my render.js file is found at ElectronTestingprocessjsrender.js
not sure why it points to fake_6052bf8b.js I've been assuming that's some type of temp file (please correct me if I am wrong)



Thanks for any and all help.



**EDIT yep just a simple mistake, forgot to replace React.createClass with createReactClass, thanks for the code example that made me finally see it!!


More From » electron

 Answers
22

React removed createClass from version 16.
You can use create-react-class to migrate easily as shown in react documentation.



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


read more about this https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass


[#56317] Saturday, September 30, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ryans

Total Points: 514
Total Questions: 92
Total Answers: 121

Location: Liberia
Member since Fri, Oct 22, 2021
3 Years ago
;