React explained to a Vue.js developer
This article isn’t an umpteenth attempt to make a comparison between Vue and React. If it’s what you want, you can find one here, here, here and here. Oh, and here too.
This article is more about telling you how to translate some advanced features in one framework to another.
Even if they are quite similar, React and Vue can be very different on certain points. As a Vue developer at work and React developer at home I often find myself struggling to translate concepts. So I listed the one I use the most and their translation.
Here’s my list.
Watch me 👁
The watch Vue’s property is pretty cool. In a nutshell, this property lets you react to some props or state changes the way you want. Just tell Vue which part of the state or the props it has to watch and how to react to the changes.
With React we use the componentWillUpdate lifecycle. This lifecycle is triggered each time the state or the props change. This way you can easily track the updates and react to them.
Decentralized logic 🤔
If you’re coming from Vue there’s a great chance that you’re using mixins. I know I do 😌. Mixins are pretty efficient if many of your components share the same logic or function(s). Just export it in a mixin then import it in the component, and it’s done !
With React, it’s an other story. React is in love of functional programming and prefer components composition over using mixins. There’s a fantastic article written by the great Dan Abramov on this subject, you can find it here.
But what means components composition AKA higher-order components ?
Components composition means extract the shared logic in one component which will be only responsible of that. Then you just have to merge it with others components to add its functionalities to them.
In the example above, the Resources component will be only accessible if the user is logged, thanks to the Authentification higher-order component.
Asynchronous actions 🌐
Sometimes you need to perform asynchronous tasks in your actions, like calling an API for example. With Vuex (Vue’s state manager), asynchronous tasks are natively supported by actions.
On the other hand Redux, React’s state manager, doesn’t let us do that. We have to add a redux middleware (redux-thunk) to perform asynchronous tasks in our actions.
With this method, we first, create an action with the asynchronous task in it. We call it, and when the asynchronous task is finish, an other action get call to pass the data to the reducer.
I hope you liked it ! This is a very personal list which not aims to be exhaustive, but it may help you (at least I hope 😀). Don’t hesitate to tell me I’m wrong in the comments or insult me on twitter. Thanks for reading this ! ✌🏻
