Is there any difference between React.render() and ReactDOM.render()?

Question

I have noticed that some of the places in articles they have used React.render() and some of the places ReactDOM.render(). Is there any specific di

Answer 1

React.render has been deprecated as of React 0.14. With packages like react-native, react-art, react-canvas, and react-three, it is clear that the beauty and essence of React has nothing to do with browsers or the DOM.

To make this more clear and to make it easier to build more environments that React can render to, the main react package has been split into two: react and react-dom.

This paves the way to writing components that can be shared between the web version of React and React Native.

The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. Think of these as the isomorphic or universal helpers that you need to build components.

The react-dom package has ReactDOM.render, .unmountComponentAtNode, and .findDOMNode.

Answer 2

React.render has been deprecated since React 0.14. React diverged into two separate libraries. The core library knows how to work with React components, nest them together and so on, but to take the component and render it to the DOM is a separate library called ReactDOM. So to render a component, you don't use React you use ReactDOM.

import React from 'react';
import ReactDOM from 'react-dom';

Then you would apply it like so:

ReactDOM.render(App);

If you try to run it like that, back then you would probably have gotten an error that says:

Invalid component element. Instead of passing a component class, make sure to instantiate it by passing it to React.createElement.

If you get that error, it's a bit cryptic, think of the following function below is creating an instance of a component to the DOM:

const App = function() {
  return <div>Howdy!</div>;
}

I passed App as a class to ReactDOM.render() and not an instance of the component. So it's saying please ensure you make an instance of the component and then pass it, or we need to instantiate it and then pass it to the DOM.

So you would fix it by passing an instance like so:

ReactDOM.render(<App />);

So that would create an instance of App and pass it to ReactDOM.render() but you would not be quite there yet as you would probably have gotten the following error message:

Target container is not a DOM element.

So React is saying I am trying to render this but I don't know where to render it to because ReactDOM takes a second argument which is a reference to an existing DOM node on the page. When you render this <App /> component, insert that HTML into this element that already exists in our HTML document. You would go to your index.html file and find the div with class="container" or whatever it is and that is the root node. All we have to do is pass a reference to that container like so:

ReactDOM.render(<App />, document.querySelector('.container'));

Then you will get the component rendering to the screen. And lastly, five years ago we got ES6 syntax so that App component from above could be rewritten like so:

const App = () => {
  return <div>Howdy!</div>;
}

So using a fat arrow like that is identical to using the function keyword.

Answer 3

This is a very recent change introduced with 0.14. They split up React into a core library and the DOM adapter. Rendering is now done via ReactDOM.render.

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html