This in React - Is my understanding correct?

Take a look at this code from the React Tutorial (Lesson 29):

Let’s focus on the onChange attribute of the input element.
My understanding is: The onChange attribute is a native html attribute that triggers a JS function. Before changing the HTML DOM, the {this.handleInput} will be converted to a clear JS refernce (Such as ControlledInput.handleInput. HTML can’t deal with this.handleInput). Then when there is a change the handleChange function will be called. However, it will be called by itself, out of the context of ControlledInput. Therefor, in order for this in handleInput to refer to ControlledInput a binding must be made to the ‘this’ value, which is taken care of by the arrow function.
Is my understanding correct?
Thanks in advance.

After learning more and reading the React intro by Facebook, I understand the topic and my question can be deleted, or marked as resolved.
In short the JSX code
return <div>...</div>
does not affect the Dom directly. It simply creates a JS object, percisely with


The same is with the Input element.