Understanding the virtual DOM
Why do we need to manipulate the DOM in the first place? It is because our web applications are not static. They have a state represented by a user interface (UI) that a web browser renders, and that state can be changed when an event occurs. What kind of events are we talking about? There are two types of events that we're interested in:
User events: When a user types, clicks, scrolls, resizes, and so on
Server events: When an application receives data or an error from a server, among others
What happens while handling these events? Usually, we update the data that our application depends on and that data represents a state of our data model. In turn, when a state of our data model changes, we might want to reflect this change by updating a state of our UI. Looks like what we want is a way of syncing two different states: the UI state and data model state. We want one to react to the changes in the other and vice versa. How can we achieve this?
One of the ways...
