I found a problem in my code when I was trying to use these two functions in my React version 15.2.0, nonetheless, I found a workaround but I would like to know if there's a better solution.
//app.jsx
var React = require('react');
var ThumbnailList = require('./thumbnail-list');
var options = {
ThumbNailData: [{
title : 'Download the ISO',
number : 32,
header : 'Learning React',
description: 'The best library for creating fast and dynamic websites.',
imageUrl : 'image source'
},{
title : 'Download the ISO',
number : 64,
header : 'Learning Gulp',
description: 'Speed your development framework!',
imageUrl : 'image source'
}],
};
var element = React.createElement(ThumbnailList,options);
React.render(element, document.querySelector('.container'));
So, whenever I try to run my index.html file nothing is displayed but this first error comes into the console: React.render is not a function. I found that this occurs because this new version of React needs the react-dom, that is,
//app.jsx
var React = require('react-dom');
var ThumbnailList = require('./thumbnail-list');
var options = {
ThumbNailData: [{
title : 'Download the ISO',
number : 32,
header : 'Learning React',
description: 'The best library for creating fast and dynamic websites.',
imageUrl : 'image source'
},{
title : 'Download the ISO',
number : 64,
header : 'Learning Gulp',
description: 'Speed your development framework!',
imageUrl : 'image source'
}],
};
var element = React.createElement(ThumbnailList,options);
React.render(element, document.querySelector('.container'));
Now the problem is solved but now comes the second problem when you try to run again the index.html: React.CreateElement is not a function. What I did was to add another variable requiring react, that is,
var React = require('react-dom');
var React2 = require('react');
var ThumbnailList = require('./thumbnail-list');
var options = {
ThumbNailData: [{
title : 'Download the ISO',
number : 32,
header : 'Learning React',
description: 'The best library for creating fast and dynamic websites.',
imageUrl : 'image-source'
},{
title : 'Download the ISO',
number : 64,
header : 'Learning Gulp',
description: 'Speed your development framework!',
imageUrl : 'image-source'
}],
};
var element = React2.createElement(ThumbnailList,options);
React.render(element, document.querySelector('.container'));
In few words, to solve the problem of React.render
var React = require('react-dom')
to solve the problem of React.createElement
var React2 = require('react')
My questions are:
Why the react-dom created the problem with React.createElement?
Is it because of this new version of React?
Is there a better approach to solve these problems without having to invoke react-dom and react?
Any thoughts and comments are appreciated ;)
