- With React, we can render this JSX directly to the HTML DOM using React's rendering API known as ReactDOM.
What's ReactDOM?
ReactDOM offers a simple method to render React elements to the DOM which looks like this:
ReactDOM.render(componentToRender, targetNode), where the first argument is the React element or component that you want to render, and the second argument is the DOM node that you want to render the component to.Keep in mind that ReactDOM.render() must be called after the JSX element statements.
Using the ReactDOM.render() method to render this component to the page. You can pass defined JSX elements directly in as the first argument and use document.getElementById() to select the DOM node to render them to. For this particular example they alread have a div with id='challenge-node' available.
const JSX = (
<div>
<h1>Hello World</h1>
<p>Lets render this to the DOM</p> {/* we want to render this entire element JSX to the page */}
</div>
);
ReactDOM.render(JSX, document.getElementById('challenge-node'))
{/* Inspect <iframe #document <html> <body> it will have a id='challenge-node' where it currently doesn't have a text, so we're trying to inject this JSX component into the interior of this challenge-node */}
Top comments (0)