Relation between user input, WEB browser, HTML, React

Tell us what’s happening:
I am confused with processes behind the scenes.
Are bellow statements correct?

After user makes an input:

  1. States of HTML DOM are updated.
  2. React’s components are reading HTML DOM and are updating React’s own DOM (and vice versa).
  3. HTML DOM is located in the WEB browser.
  4. React’s own DOM is located where?
  5. Components we’re writing suppose to facilitate the communication between HTML DOM (located in the WEB browser) and React’s own DOM.

If above is not correct, I kindly ask for correct answers.
Many, many thanks in advance.

Your code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line

  // Change code above this line
}
// Change code below this line
handleChange() {
this.setState(event=> {
  input: event
}
)
}
// Change code above this line
render() {
  return (
    <div>
      { /* Change code below this line */}

      { /* Change code above this line */}
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

Your browser information:

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

Challenge: Create a Controlled Input

Link to the challenge:

Hi @Deyan11,

I will try to explain.

Let’s say that we have two different things here: the real DOM and the virtual DOM.

Real DOM is what you see in your browser.
Virtual DOM is a representation of the DOM nodes in the browser memory operating by React.

When you start typing in your input and set a new input state in your code(it is called a controlled component), the React sees it, updates the virtual DOM, and then compare it with the real DOM.

After that, it decides what node to update in the real DOM to sync them, so basically, you can think of the real DOM as a consumer of all updates that React provides.

I hope it will help you :slight_smile:

2 Likes

It helps a lot! Still have to digest it though :grinning:
Nonetheless, it looks like I am on my way to grasp the concept. Thanks!

1 Like