Https://www.freecodecamp.org/learn/front-end-libraries/react/render-html-elements-to-the-dom

Tell us what’s happening:
Describe your issue in detail here.
I can not understand this challenge. What does it mean to render a component to DOM node?

  **Your code so far**

const JSX = (
<div id="challenge-node">
  <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"))
  **Your browser information:**

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

Challenge: Render HTML Elements to the DOM

Link to the challenge:

It basically means construct the element(s) from the JSX and add it to the DOM (the document).

If you start here in the docs and read through, it and the next page, explains it.

There is also a JSX In Depth page you can look at.

Hi @mohd.usman ,

  • JSX is used to write readable HTML within JavaScript. JSX is written inside a component.

  • With React, we can render this JSX to react’s rendering API known as ReactDOM.

  • ReactDOM offers a simple method to render React elements to the DOM which means, the ReactDOM helps to build(render) the react elements to the DOM(which is a tree structure).

  • ReactDOM takes two arguments, the first is the component or element you want to render and the second is which DOM node you want to render.

I hope it helps

If we only need to display elements, can’t we do it with by using HTML only? I mean why do we have to use React in the first place if we are only displaying elements on page?

Great question mohammad.
You could simply add a static element using just HTML. But things we make using React often aren’t static (think of a carousel for example). Because these elements are changing, we need something else also (like Javascript). Now, two ways to do this are :

  1. Use HTML, and vanilla Javascript. When the user interacts with the carousel, you would use event listeners to do something to the carousel itself. That is, you will move stuff around with javascript so that the next slide could come into view.

  2. Using React.
    a. You tell React how the carousel should look like (using the render function you’re learning just now).
    b. You tell React to change the slide when user interacts with the browser.

That’s all. You don’t bother with moving elements in the browser yourself. As the data (such as current slide number) changes, React updates the stuff on the screen itself.

Learning render() is useful because it takes care of the 2.a. part and you wouldn’t be able to use React without it.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.