react-dom

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
);