Challenge link:
Hi, I’ve just started the React part of a front end libraries course and I’d like to know what I’m actually doing when I render an element and also some other stuff. I will simply explain my reasoning and If anything I say here is wrong, please correct me.
Let’s take for example the following code:
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'))
If I understand correctly I’ve created a react object (not sure?) called JSX, which would look like this if I didnt use JSX, just pure React:
function HelloWorld() {
return createElement(
'div'
,{},
createElement('h1',{},'Hello World'),
createElement('p',{},'Lets render this to the DOM')
);
}
ReactDOM.render(HelloWorld, document.getElementById('challenge-node'))
Unfortunately it doesn’t work and I don’t know why, I would appreciate if you could help me to rewrite this to work without JSX. The other thing I don’t understand is the render method:
ReactDOM.render(JSX, document.getElementById('challenge-node'))
ReactDOM.render(HelloWorld, document.getElementById('challenge-node'))
What I’m doing here is calling a ReactDom which is an object/function (I’m not sure?) imported from a react-dom package. I’m using a render method on it. That method has two arguments.
In my first example I’m passing a JSX component called JSX and in my second example I’m passing a function HelloWorld, which evaluates to a react component (again, I’m not sure what I’ve created).
The second argument is my node. It basically tells the compiler to look into a document container and find a child container with an ID of ‘challenge-mode’ (probably a <div id='‘challenge-mode’>) and put whatever my JSX or HelloWorld evaluates to in there
In one of earlier challenges Babel is mentioned, but I’m not sure where it comes into play. As far as I know when it comes to explaining what’s happening under the hood, because I’m implementing react and JSX code it’s all being trancribed first by Babel into ECMAScript which is then passed to ReactDOM, which is a copy of my browser’s DOM, then snippets of code that have been changed get edited into an actual browser’s DOM and finally direct changes in DOM cause changas on my screen, thus displaying Hello World.
Sorry for a lengthy post, but I hope I will gain some understanding of the fundamentals this way.