React vs Vanilla JS

Today we are going to talk about the difference between Vanilla JS development vs React.js development. When I started learning vanilla JS to develop my front end, there wasn’t too much about it that was very daunting. The technique we learned in school was Create, Do Something, Append. This a typical in regular DOM manipulation. If you aren’t familiar with DOM manipulation, I’ll be discussing it in my next blog post. Here is a link for now.

Virtual DOM

So when it comes to React, there are a couple of big differences that make React development kind of daunting at first. One of the big differences is the Virtual DOM. What is the Virtual DOM? Here is the definition from React’s website.

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

Let’s break this down for a minute. React’s VDOM keeps track of changes that are made in its nodes, and when detected will update the document with the changes that are made. This is efficient because when the screen gets updated, it only updates the div holding THAT data and not the entire document.

Outro

Aside from being efficient, this type of rendering is really pleasing to the user. To replicate this with vanilla JS would be kind of a nightmare. This type of rendering is my favorite thing about React. I’m going to dive deeper into Component Layout in my next post.

Thanks for reading!