React Question--

JavaScript
1

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

Challenge: Create a Simple JSX Element

Link to the challenge:

2

Document Object Model (DOM)

1 Like
3

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.

2 Likes
4

The HTML language uses tags to define the structure of a web page (a document). The DOM is a version of that structure modeled using JavaScript objects (Document Object Model). The browser builds this model of the defined HTML in JavaScript for you. Then you can write JavaScript to manipulate the model. The browser then takes care of keeping the model in sync with what’s seen on the page.

So as a pseudocode example:

<html>
  <body>
    <header class="page-header">
      <h1 class="page-title">Title</h1>
    </header>
  </body>
<html>

{ nodeType: "html", children: [
  { nodeType: "body", children: [
    { nodeType: "header", classList: ["page-header"], children: [
      { nodeType: "h1", classList: ["page-title"], children: [
        { nodeType: "text", children: "Title" }
      ]},
    ]},
  ]},
]}
2 Likes
5

When you go to a site the browser retrieves an html file from the server than creates a virtual Dom of html element. With JavaScript you can manipulate the virtual dom created by the browser.
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

1 Like
6

This Dom is a model that helps you provides an interface for manipulating what is displayed by the browser programmatically

7

I also think it’s really best if you also take the js course on scrimba. The full video is also available on the freecbodecamp YouTube channel it’s really explains what the Dom is and how you can use JavaScript to manipulate it. I think freecodecamp camp should have covered Dom manipulation with JavaScript before teaching react. Even tho they teach how to do it with jQuery.Learn JavaScript for free

8

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.
I do recommend a bit of Dom manipulation knowledge with JavaScript before taking the react course.

9

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.

2 Likes
10

As said, the M in DOM kind of gives it away. A model is usually a representation of something (in this case a data representation).

What the Document Object Model is

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.

model

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.

https://dom.spec.whatwg.org/#introduction-to-the-dom

1 Like
11

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.

12

Thanks for clearing up the confusion tho.

13

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