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:\Users\user\Desktop\ElectronTesting\process\js\fake_6052bf8b.js:8
Uncaught TypeError: React.createClass is not a function
my render.js file is found at ElectronTesting\process\js\render.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!!
In the latest version of React, you will notice that React.createClass was removed from the library. One of the biggest changes is that you can create React components using JavaScript classes.
this works for me, checkout this ReactJs CreateClass is not a function thus its by exports React.component instead of using React.createClass
React removed
createClass
from version 16. You can usecreate-react-class
to migrate easily as shown in react documentation.read more about this https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactcreateclass