When you define a component's render method and invoke the React.createElement method, you are not actually rendering anything in the document (you are not even creating DOM elements).

It is only through the React.render function that the representation created by invoking these React.createElement calls are effectively converted into real DOM elements and attached to the document.

This representation, defined by ReactElements, is what React calls the Virtual DOM. And ReactElement must not be confused with DOM elements; it is instead a light, stateless, immutable, virtual representation of a DOM element.

So why did React get into the trouble of creating a new way of representing the DOM? The answer here is performance.

As browsers evolved, JavaScript performance kept getting better and better, and today's application bottlenecks aren't actually JavaScript. You've probably heard that you should try touching the DOM as little as possible, and React allows you to do that by letting you interact with its own version of the DOM.

However, that is not the only reason. React has built a very powerful diffing algorithm that can compare two distinct representations of the Virtual DOM, compute their differences, and with that information, create mutations that then get applied to the real DOM.

It allows us to get back to the flow we used to have with server-side rendering. We can basically, on any change of the application state, ask React to re-render everything, and it will then compute the minimal number of changes required and apply only that to the real DOM.

It frees us developers from worrying about mutating the DOM and empowers us to write our user interfaces in a declarative way, while reducing bugs and improving productivity.