#1 House of Commons- Vuejs & React

Hello Everyone, Welcome to my blog 🙏. I hope you are all safe and that this blog finds you in good health ❤️.

As Front-end developers, we often switch between the frameworks based on the project requirements, and we spend a fair amount of time understanding the frameworks and relating those with our previous knowledge gained from another framework. The way I follow for learning new frameworks is to find the similar properties that work the same and understand them better, and it is a great way to relate frameworks.

In this blog, let’s check on the similar properties in Vue Js and React. I hope you’ll like it.

Introduction

VueJs (pronounced as view)is a Javascript framework built on top of HTML, CSS, and Javascript and created by Evan You. Reactis an open-sourced Javascript Library to build efficient user interfaces and was created by Jordan Walke and maintained by Meta (formerly Facebook).

State / Data variables

To set the context beforehand,

In React, we use the useState hook to set state variables used in the component whereas,

In VueJs, we use data option to declare the reactive state of the component.

Hooks

Almost every web framework has hooks and is the same for Vue and React. Now the question comes, Which hooks are identical in them? 🤔🤔

With no delay, let’s break the ice!

useEffect ≈ ["created", "mounted", "computed", "watch"]

Let’s understand them with some scenarios.

Scenario 1: Goku wants an API to be called before the page loads and he was well aware of doing this in React but couldn’t figure out how to do it in Vue. No worries, we are here to help him out.

But, first, let’s see it in React with useEffect hook.

Now, let’s see the same thing in Vue, we use created hook

Scenario 2: Now that Goku was able to make an API call using created hook in Vue but now he strucked with new challenge i.e. he want to access DOM element and manipulate some HTML elements. No worries, Again we are here to help him out.

This can be done in React with the same useEffect hook.

Now, let’s see the same stuff in Vue using mounted hook.

Why not created() hook?

Because, by the time created hook is called, we don’t have any DOM node created so we can’t use created() hook here.

In my next blog, Let’s know the similarities of the useEffect() hook with the watch & computed properties of Vue.

---------------------------------------------------------------------------------------------------------

Please check the working code of the above examples

👉 Vue Examples

👉 React Examples

---------------------------------------------------------------------------------------------------------

Here we go, That’s it folks for this blog.

Hope everyone liked it.

If you like it, give it a love ❤️ , and share it with your friends.

For more exciting content on Frontend,

Please do follow me 🎯.

Thanks a lot, Everyone 🙏. Until Next time, Happy Learning ✍️

Abhishek Kovuri, UI developer