Can someone explain what DOM is, kinda wish it just gave a little more info within the lesson, but it seems someone deemed it unnecessary.
From the Lesson
“It’s worth noting that under the hood the challenges are calling ReactDOM.render(JSX, document.getElementById('root')) . This function call is what places your JSX into React’s own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.”
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0
There is a slight gap between the pure JS curriculum and the front-end section and its advised you look some additional info regarding JS DOM manipulations outside FCC, before you proceed with front-end and React.
Basically DOM represents a tree-like structure which includes all elements on the HTML page, where HTML root element is on the top(or the bottom, depends how you look at it ^^) and from there all other elements branch out, like the <body> and any existing elements you might have added. Very similar to how you would target some elements in CSS, e.g. nav>ul>li to target the list items part of the list within a nav element, the DOM represents the same structure. JS provides many useful methods to target and manipulate that structure, ultimately giving you the ability to manipulate the HTML and bring logic in your app, make it dynamic.
To access the DOM and manipulate it, you call the document object in JS. Using its methods, you can do that. For example a very common method(used in the challenge) is document.getElementById, which basically finds the element with the id you provide as argument. You can store that element in a variable and access/manipulate it.
The way React work is, it creates your entire page within JS and all whats available in your app, or the majority of it, exist in your JS code and you have direct access and control over it. It does that by targeting one “root” element, serving as an anchor(not to be confused with the anchor tag) and attaching to it your entire app, all the elements you create via React. They first exist in the React DOM, which is then rendered on the “real” DOM.
The entire line ReactDOM.render(JSX, document.getElementById('root')), simply sais, get the element on the html with Id “root” and render on it my app(or the particular JSX component in this case). I say simple, but the whole thing is not a simple thing to process and fully comprehand and its totally fine if for now, you simply overlook this whole thing and just proceed with the lessons and what they teach you, just keep in mind, things dont just “magically” happen and there is that addition in the background, loading our code on the html page.
That’s what the Dom is.
The freecodecamp curriculum doesn’t do a good job explaining react. I recommend Free react course on scrimba you can also find the full course the freecodecamp YouTube channel
After taking the course I could build several react projects from scratch on my own without fear. Projects like a codepen clone or file explorer. You can find some of them on my codepen. The codepen clone and the file explorer are not available on codepen tho.
No, it’s not. The DOM is a model (an Object-oriented version) of what the browser renders, it’s an interface that allows you to program against it. You can’t directly access what the browser renders, not programmatically.
You can tell it in advance what to render on screen, for a given web page, by using HTML. Then once that is done, you can use the programmable interface (the DOM) to manipulate what’s on screen on that specific web page.
The DOM is a programming API for documents. It is based on an object structure that closely resembles the structure of the documents it models.
A model is the actual data representation for the information at hand. Examples are the structural model and the style model representing the parse structure and the style information associated with a document. The model might be a tree, or a directed graph, or something else.
Thanks for the correction.
I meant to say the Dom provides an interface that we can use to manipulate what is actually displayed. It’s not what is actually rendered. I was just trying to explain it as sparsely as possible without making the topic more confusing than it actually is.
When we manipulate the Dom, the browser then follows the model to change or update what it displays.