ReactDOM connects React with the browser DOM. It provides the root-rendering methods that place React elements inside a chosen DOM node, while React Core creates the elements themselves. section 1.4.2 section 1.7
Listing 1.1 Loading React libraries and code
<!DOCTYPE html>
<html>
<head>
<title>My First React Application</title>
<script #1
src="//unpkg.com/react@18/umd/react.development.js"> #1
</script> #1
<script src="//unpkg.com/react-dom@18/umd #2
/react-dom.development.js"></script> #2
</head>
<body>
<div id="root"></div> #3
<script type="text/javascript"> #4
... #5
</script>
</body>
</html>
Load React and ReactDOM from their React 18 UMD development builds, then reserve a div with the id root for rendered content. section 1.4.2
Render an element into a root
const reactElement = React.createElement( 'h1', null, 'Hello world!!!' ); const domNode = document.getElementById('root'); const root = ReactDOM.createRoot(domNode); root.render(reactElement); The same operation can be written more compactly: ReactDOM .createRoot(document.getElementById('root')) .render(React.createElement('h1', null, 'Hello world!')); section 1.4.2
Use ReactDOM by following this small browser-rendering pattern:
- Include React and ReactDOM, create a dedicated root div, and put the application code in a script. section 1.4.2
- Create a React element with React.createElement, select the root DOM node, create a root, and call render. section 1.4.2
- Prefer a dedicated container instead of document.body, because other libraries or browser extensions may manipulate the body. section 1.4.2
