This article is in response to
https://itnext.io/anyway-this-is-why-i-prefer-vue-over-react-ad2653595fc5
I’m not writing this article for defending React, sparks more debates or whatsoever.
Rather, this article is an intention to correct some misconception in that article.
So, I hope you understand this article is not React vs Vue.
Before I proceed, I like Vue the way it’s really fast to learn.
But I have been using React before Vue was cool and still using React
despite Vue’s popularity and ease of use.
First, JSX Template
“Web designers know HTML & CSS, they can hardly screw up a Vue HTML template but they can easily screw up a JSX template (loops, ternary…).”
Let’s add focus on the line,
“But they can easily screw up on JSX template (loops, ternary…)
I must say, this is not really true. Loops, ternary operator are NOT JSX template.
They are just javascript features.
And this should be an advantage because you can use this not only in React,
but also in any javascript application. This is just one way how programmer handle logic.
And loops, ternary are just a basic in most programming language, not only Javascript.
Ternary operator also good if you want to have concise syntax instead of using if else block for simple conditional.
Second, React limits the choice
“Vue gives you the choice, React doesn’t, that’s sad for a front-end library.”
With “choice”, He means Vue lets its users choose to use HTML, JSX or createElement. Meanwhile, React only lets its users use JSX or React.createElement.
Well, if you know HTML and JSX, you will have no problem learning it. There is only very few and minor differences and due to Javascript counterpart, like class become className or for become htmlFor, etc. It’s actually “again” just javascript, nothing more, nothing less.
He said web designers are familiar with HTML & CSS, but let me ask him, does web designers also familiar with plain Javascript? doesn’t he?
Meanwhile, vue uses directive (like angular), v-for, v-if, etc. Let me clarify, this is not javascript nor HTML, isn’t it?
He said “React: Array maps and ternary around JSX, harder to read IMHO”
Yes, I must agree with him this time, Array maps and ternary around JSX are harder to read. But, only if you’re not familiar with javascript. It’s just a matter of taste, and yes he stated it too. Good one!
Component Props Validation
He said this
“React: you need an external library to do that, I don’t understand why, since component props are used so often (maybe to give choice?)”
Did you meant prop-types? Well, if you use React since the beginning, you will know that it was first part of React core then it’s moved to separate package. Deliberatly. It let’s you choose to use that package or using any other package.
Beside, the choice React gives use. It also let non React users to use prop-types package.
Calling setState
Well, I think only newcomer still using setState, It’s enough to use setState. But I have to say, React is a library not a framework, meaning we can choose how we would handle our state. Most of React users know redux, some use mobx, unstated but there are several other state managements. It’s up to the user. You want to do functional programming style, go with Redux. You want ease of use and optionally class based state object? you can go with Mobx. And with Mobx, you can get the same reactivity, indeed, when I learn Vuex, I learnt that it has similirity with how Mobx handle State for React application.
Pass a callback to use previous state
Actually, with this callback updater on setState has it’s own benefit. To make sure that the update to the state are consistent accross all state’s consumers. To avoid unexpected behaviour.
For simpler state, you don’t have to even use this. And using Mobx, the state change action is much much concise.
Component communication out of the box
“React: props (+ lifting state up) parent-to-child”
Hey, where did you learn React? React and Vue are just the same on this. React not only props parent-to-child but also event child-to-parent. This is what I taught to people learnt React in 2015, come on!
React: learn the API, learn JSX, which is a new “language” (no big deal)
Wrong, JSX is not a new language, it’s just as directive. If directive is an extension for HTML, to teach HTML new trick (like what angularjs does), JSX is an extension for Javascript to let you write javascript with syntax like HTML. Familiar with HTML? then you’re good to go with JSX. Don’t blame for loop and ternary again, it’s just javascript, not JSX.
Conclusion from me
Using React you will deal a lot with Javascript. That’s why my motivation to learn react back few years ago because React teaches you javascript. And if you’re good with javascript, you’re good with React.
In my personal subjective opinion, if you want to be a better javascript, you can try to stick with React.
But, for the case React or Vue, it doesn’t matter which. The important thing is, what can you build with it?
Because, with today’s community and tooling. I think the statement, “Framework X can do Y, what can framework Z do it?”, this type of statement are not relevant. Any framework can have or borrow features from other framework almost officially of using third party package.
So, whichever your favorite framework, if it makes you a better developer, makes you closer to your goal. That’s great! Keep up! Build the product you’ve always wanted.
And, for Indonesian fellow who wants to become a fullstack web developer with Laravel and Vue, you can join waiting list for the Book I and my Vue’s enthusiastic developer partner is writing. It will teach you how to build an app with Laravel and Vue.
Join the waiting list here and become fullstack developer ==> http://arrowfunxtion.com/waiting-list-buku-frontend-developer-laravel-vue/
Thank you for reading this. Like this article? Please share it.
