React - Render HTML Elements to the DOM

[RAC0304]

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);
// Change code below this line

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: React - Render HTML Elements to the DOM

Link to the challenge:

freeCodeCamp.org

[jrd656]

Solution:

const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);
// Change code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'))

We are told:

The code editor has a simple JSX component. Use 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. There is a div with id='challenge-node' available for you to use. Make sure you don’t change the JSX constant.

To break that down:

• Use the ReactDOM.render() method to render this component to the page.
  (In a previous paragraph we are told that the method looks like this: ReactDOM.render(componentToRender, targetNode).
• Pass in the defined JSX element directly as a first argument.
  (simply pass JSX as the first argument.
• … and use document.getElementById() to select the DOM node to render them to. There is a div with id='challenge-node' available for you to use.
  (This is a bit more complicated, and requires a bit of familiarity with plain javascript and DOM manipulation. We want to pass an HTML element that has already been created (by someone else, to keep things simple for this task). The way we can do this is by using document.getElementById('challenge-node'))

Combine the above together and you get the solution.

NB: The div element will likely sit in an index.html file, and contain an element that looks likes this:
<div id="challenge-node"></div>

What we are doing here is injecting our React element inside the div, to appear on a web page. You will not have to think about this in your first year of coding, but it will come up occasionally. Good luck!