ReactJS: React.render is not a function and React.createElement is not a function

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:

1. Why the react-dom created the problem with React.createElement?

2. Is it because of this new version of React?

3. Is there a better approach to solve these problems without having to invoke react-dom and react?

Any thoughts and comments are appreciated ;)

First of all, since React v0.14, there is this new package called react-dom. It abstracts the "environment" that you will run React, and, in your case, is the browser.

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#two-packages-react-and-react-dom

So, since you have now two packages: "react" to create your React components and "react-dom" to "integrate" React with the browser, you need to call the correct methods that each one of them provides.

Then, answering your questions:

Why the react-dom created the problem with React.createElement?

The package that has React.createElement is react and not react-dom.

Is it because of this new version of React?

Yes, you are not able to call React.render (from package react) anymore, you need to use ReactDOM.render (from package react-dom).

Is there a better approach to solve these problems without having to invoke react-dom and react?

I don't see it as a "problem", you just need to know that now there is a specific package to manipulate DOM. Also, it is a "good" pattern, because if sometime you want to render your components as an HTML (to render it using a server), you just need to adapt some things and your code will be the same.