What to Know About Working with Vue.
js after Using ReactSimilarities and differences between Vue and ReactConnor FinneganBlockedUnblockFollowFollowingMay 5vue.
jsDuring my time at Flatiron School, the majority of our time learning frontend development was spent working with Vanilla JavaScript, React, and Redux.
Recently, I started working on a project that uses Vue.
js, and I had to familiarize myself with the popular JavaScript framework.
During my research, I thought it might be a good idea to take a look at Vue and React side-by-side and look at some of the high-level similarities and differences.
In this piece, I will outline some key points when comparing Vue and React, with an emphasis on what someone coming to Vue for the first time after working in React would want to know.
SimilaritiesReact and Vue both utilize a virtual DOM to make reactive components, meaning the components automatically change on the page when data is altered.
They both are designed to enable component-based development, which improves scalability by breaking an application into repeatable chunk of codes that are easily reusable as an application grows.
Both frameworks are also lightweight and fast and make use of lifecycle methods to give developers control over when and how different elements of the page should render.
Vue and React have a fair amount in common and both can be great choices for you, depending on the goal of what you’re building and what you’re looking to accomplish.
DifferencesThe BasicsEven though I’m much more comfortable with React now, I do feel that it has a steeper learning curve.
I’ll get into some of the reasons why below, and it began to make sense after a couple weeks of intensive study, but that it is something to consider when working with developers who many not have had exposure to either React or Vue before.
One key difference is that React uses JavaScript exclusively, while Vue uses an HTML/CSS/JavaScript structure that would likely be more familiar to Vanilla JS developers.
To control the UI of an application, React developers use JSX, a JavaScript extension that creates React elements and looks like a mashup between HTML and JavaScript.
Let’s take a look at a React component and a Vue component side-by-side to see the difference:“Hello, world!” in Vue, from the Vue docsIn this Vue example, the component itself is render in standard HTML in the form of a div.
Then, in the JavaScript below, the new instance of Vue targets the element with the id of #app using the with the line el: '#app' (‘el’ stands for element), and then any data that is needed for the component follows.
The message is then rendered in the div by way of the {{ message }} line.
Whatever data is stored with the key of message will be displayed.
If you were to open the console of this component and write app.
data = "Howdy", the message on the screen would change.
“Hello” in React, from the React docsIn React, the functional component returns the element with data it received as props interspersed using JSX (props.
name).
This example also shows how the element on the page is connected to React.
Manipulating DataManipulating the data you have stored in Vue is fairly simple, as any changes automatically update data on the page and in storage via Vue’s reactive binding system.
To give an example, let’s say we have a button to add an item to the cart.
In the HTML file, we would write something like this:In the index.
html fileAnd in our Vue instance, we would track this data and method like such:In the main.
js file{{ count }} displays the number of items stored in our data, and the v-on: click binds the button to our addToCart and knows to perform it any time a user clicks the button.
Updating the data is as simple as referencing this.
count in our Vue instance and incrementing.
In React, it’s not quite so simple.
You can’t simply update the data stored in the state by saying this.
count += 1.
You have to explicitly use the function setState() to update the data being stored in state.
The whole counter component would look something like this:Overall, not too different from Vue aside from the function that handles the actual incrementing.
The setState() function allows the developer greater control over the lifecycle methods of its components, but it can feel tedious depending on the use of the application.
Again, it all comes down to personal preference.
Conditional RenderingIn Vue, there are a couple of options for conditional rendering.
The first looks fairly similar to conditionals in vanilla JavaScript — you add a v-if directive to one element which will display if the condition is true, and v-else to the alternative option.
For example, if you had an online store and were looking to change what’s displayed based on the inventory, you would write something like the following:<h3 v-if="count > 0"> {{ count }} items left</h3><h3 v-else>Out of stock!</h3>In these cases, the element will only be rendered if the condition is met.
Another option is v-show.
When you use v-show, the element will always be rendered, but the display setting will be toggled in the CSS depending on whether or not the condition is met.
For example, if you wanted to display a message only when an item is on sale, you would write:<h3 v-show="onSale">This item is on sale!</h3>There are also a few options for this in React.
One is to use simple JS if-else rendering, although that can get fairly verbose.
A shorter version is to use in-line conditional rendering with the ternary operator.
Extending our example above, in a React component this would render like:render() { return( <div> {this.
state.
count > 0?.( <h3> {this.
state.
count} items left</h3> ) : ( <h3>Out of stock!</h3> )} </div>)}You can also make use of the && operator in a similar way to v-show.
When there’s no alternative and you only want something to display if a certain condition is met, like our on sale example from before, you would do the following:render() { return( <div> {this.
state.
onSale && <h3>This item is on sale!</h3> } </div>)}I hope you found this to be a helpful high-level overview, and if you’d like to explore React and Vue in greater detail, I encourage you to explore the resources below.
ResourcesComparison with Other Frameworks – Vue.
jsVue.
js – The Progressive JavaScript Frameworkvuejs.
orgReact vs Vue: The Core Differences – MentorMateIn this blog, we'll examine the main differences in the way React and Vue work and the core ideas behind them.
Our…mentormate.
comI created the exact same app in React and Vue.
Here are the differences.
React vs Vue.
Finally, a side-by-side code comparison between Vue and React!.????medium.
com.. More details