Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

React vs ReactDOM?

I'm a bit new to react. I see we have to import two things to get started, React and ReactDOM, can anyone explain the difference. I'm reading through the React documentation, but it doesn't say.
by

2 Answers

espadacoder11
Before v0.14 they were part of main ReactJs file, but as in some cases we may not need both, they separate them and it starts from version 0.14, that way if we need only one of them, our app gonna be smaller due to using only one of those:

var React = require('react'); / importing react */
var ReactDOM = require('react-dom'); /* importing react-dom
/

var MyComponent = React.createClass({
render: function() {
return <div>Hello World</div>;
}
});

ReactDOM.render(<MyComponent />, node);

React package contains: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

React-dom package contains: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode, and react-dom/server that's including: ReactDOMServer.renderToString and ReactDOMServer.renderToStaticMarkup.
sandhya6gczb
React and ReactDOM were only recently split into two different libraries. Prior to v0.14, all ReactDOM functionality was part of React. This may be a source of confusion, since any slightly dated documentation won't mention the React / ReactDOM distinction.

As the name implies, ReactDOM is the glue between React and the DOM. Often, you will only use it for one single thing: mounting with ReactDOM.render(). Another useful feature of ReactDOM is ReactDOM.findDOMNode() which you can use to gain direct access to a DOM element. (Something you should use sparingly in React apps, but it can be necessary.) If your app is "isomorphic", you would also use ReactDOM.renderToString() in your back-end code.

For everything else, there's React. You use React to define and create your elements, for lifecycle hooks, etc. i.e. the guts of a React application.

The reason React and ReactDOM were split into two libraries was due to the arrival of React Native. React contains functionality utilised in web and mobile apps. ReactDOM functionality is utilised only in web apps. [UPDATE: Upon further research, it's clear my ignorance of React Native is showing. Having the React package common to both web and mobile appears to be more of an aspiration than a reality right now. React Native is at present an entirely different package.]

Login / Signup to Answer the Question.