What is react-dom?
The react-dom package provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements in response to data changes. It is a companion package to React that facilitates rendering components to the DOM and interacting with the DOM tree.
What are react-dom's main functionalities?
Rendering React Elements
This feature allows you to render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Component Lifecycle Management
react-dom manages the lifecycle of components, including mounting, updating, and unmounting components.
class MyComponent extends React.Component {
componentDidMount() {
// Code to run when the component is mounted
}
componentWillUnmount() {
// Code to run before the component is unmounted and destroyed
}
}
Handling Events
react-dom provides a synthetic event system that wraps the native event system, providing a cross-browser interface to native events.
function MyComponent() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
Server-side Rendering
react-dom/server provides methods for rendering components to static markup (typically used on the server) such as renderToString and renderToStaticMarkup.
ReactDOMServer.renderToString(
<MyComponent />
);
Portals
Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
ReactDOM.createPortal(
child,
container
);
Other packages similar to react-dom
preact
Preact is a fast 3kB alternative to React with the same modern API. It provides similar functionalities for rendering UIs but with a smaller footprint, making it a good choice for performance-sensitive applications.
inferno
Inferno is an extremely fast, React-like library for building high-performance user interfaces on both the client and server. It offers a similar component-based UI building experience but focuses on performance optimizations.
vue-server-renderer
This package is part of the Vue ecosystem and provides server-side rendering capabilities similar to react-dom/server. It's used to render Vue components on the server and send the static markup to the client.
react-dom
This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as react
to npm.
Installation
npm install react react-dom
Usage
In the browser
var React = require('react');
var ReactDOM = require('react-dom');
class MyComponent extends React.Component {
render() {
return <div>Hello World</div>;
}
}
ReactDOM.render(<MyComponent />, node);
On the server
var React = require('react');
var ReactDOMServer = require('react-dom/server');
class MyComponent extends React.Component {
render() {
return <div>Hello World</div>;
}
}
ReactDOMServer.renderToString(<MyComponent />);
API
react-dom
findDOMNode
render
unmountComponentAtNode
react-dom/server
renderToString
renderToStaticMarkup