I have no idea how this works, please help! - React Challenge

Hopefully, there’s just something I’m missing here and I’m being silly, but the difficulty of this coding curriculum went from 5% to 90% difficulty in one task!

I followed the hints to arrive at the code that got the pass, but that’s a little unfulfilling and hope someone can enlighten me as to how everything works.

I don’t even know where to begin to ask for specific pointers, as all of the code (the facts it’s after the HTML code, the declartion, the everything!) is pretty alien to me.

I’ve completed JavaScript basics and the HTML/CSS courses, so have very basic understanding of code and would be extremely grateful for anyone to break this down in the simplest possible way :slight_smile:

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
ReactDOM.render(JSX, document.getElementById("challenge-node"))

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS armv7l 12371.89.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36.

Challenge: Render HTML Elements to the DOM

Link to the challenge:

Here’s a useful link: https://reactjs.org/docs/introducing-jsx.html
I think it’s better to follow the fcc curriculum in a linear way from top to bottom, at least for the first three certificates, as it gradually introduces new ideas.

As @xyxb23 pointed out, JSX is a syntactic sugar for calling
React.createElement(component, props, ...children)

The idea is to have a syntax that look and feel similar to HTML, but in JS.
For example the following React snippet

const JSX = (
<div>
  <p className="red-text">Hello World!</p>
</div>
);
// change code below this line
ReactDOM.render(JSX, document.getElementById("test"))

Is conceptually similar in JS as:

// select root node
let root = document.getElementById('test');
// create html elements
let parent = document.createElement("div");
let p = document.createElement("p");
p.innerHTML = "Hello World!";
p.classList.add("red-text")
// populate the nodes
parent.append(p);
body.append(parent);

Hope this helps :slight_smile:
And no worries, with time and practice it will click and all will make sense!

Don’t worry about it too much.

This:

ReactDOM.render(JSX, document.getElementById("challenge-node"))

Is boiler plate and once it’s set up you won’t have to worry about it. The first param is the root component of your React app (in this case “JSX”) and the second is the element in your HTML file where you will be putting your React rendering - again, something you usually don’t have to touch.

This:

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

is standing in for your root React component. Normally it will be a function that returns JSX or a JS class with a method called “render” that returns JSX. But that will come later.

For now, just do the exercises. React is weird and confusing at first, but becomes cool and powerful. Don’t worry too much about every detail - it will all sink in later.

Thank you so much all and very sorry for the late response, this is in a different area to the learning!

A lot of that makes sense and some is still going over my head, but I really appreciate that! Taking the advice of going from the beginning that Freecodecamp have laid out. Hopefully I’ll be back in a short while to say ahhhh yes, it all seems so simple now!

Seriously though, I appreciate it :slight_smile:

1 Like