In what way does REACT encourage you to manipulate the DOM directly?

Hi Sam, Basically virtual dom is more efficient way of manipulating the dom in terms of speed. Without virtual dom, browser gets the html file and parse it. Then it goes through the process of creating so called dom nodes.Then it is calculating the styles(css) of each element.The third step would be layout( every node/element) is given screen coordinates(where it should appear on screen), and finally it should do the last step(painting those nodes on the screen). As you se from above browser needs to do quite few steps just to show element on page.When you do an update of html element browser is repeating all of those steps above(you can see here why it is less efficient than virtual dom).

Say you modified 100 nodes, one by one. That would mean 100 (potential) re-calculations of the layout, 100 (potential) re-renderings, etc..

But when you do same thing on virtual dom, al those changes are done on separate dom(virtual one) and only those changes are dumped to the real dom(more efficient).

If you need to manipulate real dom nodes in react, you can always use "REFS". Ref is nothing but a reference to a node, or instance of an component in your application. You will provide ref="someName" on an html element(for example input) : <input ref="username" type="text"/> Then you can access native elements functions(attributes) by calling this.refs.username.value (just an example)