Whoa... Hang On, Isn't it the vanillaJS and ReactJs both are same? NO. May be by reading the tittle many will assume that they know everything about this topic. But there is so much to learn and understand between the two. If you are beginner in Front-End Space then After reading this article all of your doubts regarding VanillaJs & React will be cleared.
To be honest the basic difference between both of them is, JavaScript is a programming language, and when we say vanillaJS it is the plain JavaScript Without any framework. Whoa, wait a minute what is Framework? Framework is a platform which build on top of programming language to make complex software's or Web Apps. React is a Framework of JavaScript, Some other Frameworks of JavaScript are VueJs and AngularJs. Some also call it Library.
Ok, So till now hope you understood all the jargons used in Front-End Space, but what Frameworks actually do? and why we use use them on the top of JavaScript?
Let's understand this, Frameworks make our life easier, Also we can create complex web apps in so less time, But if you create same web app in plain JavaScript then it will take way more time than React. Why? Because in React we are Importing already written code. React is not only easy to use for complex UI's but is much more performant. React allows for direct work with component uses downward data binding to ensure that changes in child structure does not affect their parents, this makes code stable.
Understanding the Virtual DOM and Actual DOM
VanillaJS uses Actual DOM, and React Uses Virtual DOM, React uses virtual DOM with optimized rendering algorithm. The real DOM is very slow to change & update, So React found a way around this, It calculates what needs to be change & update only that part, which actual DOM will not do. In simple words Virtual DOM takes whatever the React is giving & put it on actual browser DOM. React DOM acts like a compiler which takes whatever react is giving & put it on the DOM.
React follows declarative programming & VanillaJS follows Imparative Programming. Let's Understand this.
Declarative Programming- In this programming logic of software is important than its flow. You don't have to tell a program what to do, Focus of logic rather than Flow, Focus of Result.
Imperative Programming- In this programming Focus of Process is Important. Focus is on creating algorithms that tell the computer how to do things. Implementation is key. for example React makes everything into small components and you can make entire UI's using those components, Also you can reuse the components as well.
That's it folks! Hope you understood the basic difference between frameworks and programming language. You can connect me On Twitter