Search code examples
reactjsbabeljsjsxreact-domcreateelement

Who converts React.createElement into HTML tags?


Babel converts jsx to React elements using React.createElement. But it is not same as document.createElement which creates HTML tags. So, my doubt is who and when React elements are converted into HTML tags? Is it ReactDOM?


Solution

  • So, my doubt is who and when React elements are converted into HTML tags? Is it ReactDOM?

    Yes, ReactDOM is responsible for that. React does the rendering process to produce a virtual dom, and then react does reconciliation to figure out what has changed. Any changes are then handed off to ReactDOM so that it can update the dom.

    Note that while ReactDOM is the most common thing to use with React for updating the screen, it's not the only possibility. For example, React Native uses the output of React's reconciliation to update native dom elements, or React-Canvas can draw to a canvas. You can even write a custom renderer if you want using react-reconciler, though that's very rarely needed.