With a traditional application, you may have to listen for changes in the data, process it, and update the DOM yourself using something like jQuery. This is an imperative style, because you are specifying what and how the DOM should change based on the data. For example, on the user search page, when the results come in, it looks like this:
listener('searchResult', function (users) {
users
.map(user => document.createTextNode(users.name.first + users.name.last))
.foreach(node => document.getElementById('userList').appendChild(node))
});
In contrast, React uses a declarative style, which means you don't need to handle the DOM update itself. You simply declare how you want the data to be processed and displayed, and React will figure out a way to reach that state.
<ul>
{ state.users.map(post => <li>users.name.first + users.name.last</li>) }
</ul>
listener('searchResult', function (users) {
state.users = users;
});
The declarative style encourages you to write deterministic UI components, whose job is simply to faithfully reflect the state. When done this way, the UI will always render in the same way when given the same state object. This makes the job of the developer much easier, as all he/she needs to do is to ensure the state has the correct values.
For instance, in the example above, all the developer needs to do is to ensure the state.users array contains the latest list of users, and update it when necessary. He/she never have to manually manipulate the DOM.