REACT JS vs Vanilla JS

What is Vanilla JavaScript?

"Plain" Java Script also known as Vanilla Java Script is a simple scripting language written without libraries. It can be thought of as a language that doesn’t set any rules about how data can be defined, or how the UI can be changed. This property makes apps written without these libraries more free form and customizable.

What is React?

React itself is written in JavaScript, now does it mean that writing React is just writing Java script? No that is not true.

React is a library that defines the way apps are written. It is like telling the react how you want the format of the UI to be .It does this by setting very clear rules about how data can flow through the app, and how the UI will adapt as a result of that changing data.

React has quickly become popular because of the improvement it brings in the performance. React breaks down the UI into smaller and reusable components that can move around data amongst each other. This breaking down of the UI is what gives React an edge over Vanilla JS.

DOM or Document Object Model

Now you must be thinking that what is DOM and how does it tie up with React and vanilla js? Firstly let me tell you what is DOM. So, DOM or Document object oriented model is " The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM is further divided into:

1. Core DOM
2. XML DOM
3. HTML DOM

HTML DOM is the one that makes the difference in our case.The above definition of DOM can be found on the internet but what it means is that it is a object model and programming interface. It contains:

• Different HTML elements as objects
• Properties of those HTML elements
• Events for the elements
• Methods to access those elements

Now the fun part, how does this tie up with React and vanilla js Remember we talked about how the DOM contains the element in the DOM so to change a UI element you need to find that element and then change it according to your needs. This does not effect the performance when it is just one element but what if you had to do this on a big form. This work would be very tiring.

Now, the reason why react became so popular is because of the reusablity and feature called virtual DOM which does the manual work we as developers used to do in vanilla js. It has the same properties as the real DOM but what it does not have is the power to make changes on the screen.

The most important and fundamental reason why modern frameworks are used is that, with Vanilla JS, keeping the UI in sync with the state is hard.

Conclusion

Which one to choose? Well, this depends on your usage.

Vanilla JS is great but it cannot create huge complex apps and efficient UIs. When you are building a huge app and the functionality is complex so the general recommendation would be to use modern framework like React. Further, React has a feature called reusability which allows us to use reusable components which makes it easier for the developer.