React vs. Vue (Exact Todo App) By Example
In 2018 i learned React . In the beginning it was little bit difficult because my background was from PHP but than i decided to explore the core concepts of React . I recently moved to Vue and due to coming from React it was fun to work with Vue . The experience working with both was quite different. While Vue was much fun and simpler, React was more architectured to work with .
The documentation of any framework is important . React official documentation offer a decent documentation to newcomers. While Vue`s official documentation offer an engaging documentation . It is easy to understand the core concepts of framework if the developers have some front-end framework experience .In 2018 The Vue repo in GitHub just passed React and went over 100,000 stars.
Now lets move on the topic which i have decided to share with you .
Prerequisites? not really
For this tutorial you don’t have to be an expert in Javascript, React . Basic knowledge is enough to get the hang of this tutorial. Because i will tell you from scratch .
OK then, let’s get this party started!
React vs. Vue (Exact Todo App) Comparison By Example
If we look through all the available content to learn any technology the basic application we try to build is TODO-App because it clears us the basic understanding how the technology works .
So now i am going to create a TODO application with both of these frameworks and will compare how did they both behave . It is a beginner friendly, so if you’ve done ‘Hello World’ through CLI in both , that’s perfect .
Tools to follow along
1) InstallNode and npm, if you haven’t
2 ) Installcreate-react-app with npm create-react-app---global
and install vue-createwith npm install -g@vue/cli
Now, we’re good to go.
Now lets create a new React and Vue app
Just use following commands to create projects .
1) create-react-app react-todo
It’ll create a new folder react-todo with some files and folders.
2 )vue create vue-todo
It’ll also create a new folder vue-todo with some files and folders.
HERE YOU GO NOW
Run react app with npm start
cd react-todo then npm start
Run vue app with npm run serve
cd vue-todo then npm run serve
First we will clean the pre-defined template in both .
Our react template will look something like this
and Vue template will look like this .
Add bootstrap cdn link in both React and Vue from bootstrap official website . Since this is not a bootstrap`s blog so i will not cover it .
Where should i add CDN link ?
In React we have public folder it contains all the static files , images and index.html. Insideindex.html in the header tag simply add bootstrap cdn link in it .
Vue has public folder too it also contains all the static files , images and index.html. Inside index.html in the header tag simply add bootstrap cdn link in it .
Get started
lets create an array in the App.js file in src in React like below .
Here we have an array of todos with 3 objects with different id and task . React uses state to store the data inside the constructor function .
While Vue has a different story it uses data function this function returns the object in which all the data is stored . Open App.js file in src and inside script tag we have to define data function . Inside data function rest of the work is the same as React have like below .
So now we have set up our task how can we display it ?
That`s the question came into our mind . React and Vue does the same work but in a different way . So lets dive in it .
How does React acts ?
React uses mapfunction to loop through an array . Map function takes in a function and for each of the elements in the array its going to to call the function and whatever this function does its going to create a new array and replace the array with it .
So here we have map function it takes a function with 2 arguments first we have the item for loop and second we have the index of each array item . Purpose of index ? Wait for that section …..
Afterwards we are displaying the list item by using {item.name} .
You will see following like this .
One thing you have noticed about the key inside the li tag .
So basically when react renders the dom it keeps a unique key for each element so that when the state changes and it re-renders it and its going to know which elements exactly changed and what element its going to update . So we passes prop called key as {item.id} which is a unique key for each of the elements in the array .
How does Vue acts ?
Vue uses the same prespective i.e: looping to display the content but using another way . We can use the v-for directive in Vue .It allows us to loop over an array and render data from within it.
The v-for directive needs a syntax in the form of todo in todos, where todos is the source data array and todo is an alias for the array element being iterated on . So we can now display each if the todo with help of using 2 curly braces {{todo.name}} as shown above
Vue also keeps the unique key to determine the exact element because if we update it later the DOM knows what the index has been changed . In React we passes a prop as key but in Vue we use v-bind directive as v-bind:key="todo.id" .
Create Todo
First of all lets add an input field in both of the apps .React:
Vue:
How does React acts ?
In React we are going to listen to the onChange event and this onChange event is going to receive our handler and we gonna call this handle this.handleChange so when this input value changes we will call this function .
So now we will create a function called handleChange() so handleChange function takes an event . This event this actually normal javaScript event that fires every time when the input is being changed . Now lets create an state called newTodo and then inside handleChange() we are going to use setState . So what is setState()? Let’s hand this over to Revanth Kumar for an explanation:
“This is because React wants to re-run certain life cycle hooks, [such as] componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate, whenever state changes. It would know that the state has changed when you call the setState function. If you directly mutated state, React would have to do a lot more work to keep track of changes and what lifecycle hooks to run etc. So to make it simple React uses setState.”
setState()basically takes new values to combine into the live values, then triggers a re-render.
So inside handleChange() we are going to set the new value to the newTodo state as shown below .
Lets type something in the input ………
Wait what its showing an error wooooooopppppssss .
It says setState is undefined at handleChange() function and so we have to bind in the constructor . Calling a function from a class doesn’t mean it’s being called with the value of the object that generated that function. By the way If your functions don’t require approach to the state of your component, then you don’t need to bind them.
So lets bind it inside the constructor by just adding the following line in the constructor .
So just use use console.log(this.state.newTodo) in the application and type anything you want .
If we want to set the default value of the newTodo we can so lets do it .
This should show the value inside the input tag in the App.js .
Check it . Noooooooppppps its not working ….
What we are going to do is we gonna come to input tag in the App.js and we are going to set the value and we can set as value={this.state.newTodo}
So lets try this now . Refresh the page
Hoorraaah it worked !!
So right now we have achieved TWO WAY BINDING between the state and inputs . State value is what the input value is and input value is what the state value is vice-versa .
Now lets add the button above the todos list using bootstrap .<button className="btn btn-info mb-3 form-control">Add New Todo</button> . Now what we want is when this button is clicked this should add the new todo . So we should add an event listener in the button tag as onClick={this.addTodo}
which means it is going to call the function of addTodo. So create a function addTodo in the constructor and code some stuff i will explain it to you .
I am creating an object of newTodo . In this object i am putting the value of id but how ? First of all i am obtaining the length of the whole array of todos then subtracting 1 from it and acquiring the id of the last object then adding 1 . Confused ? let me explain by example .
Just take the example of our whole todos array it has 3 values and we are fetching the length of it inside index so our whole todos`s last element is 3. So 3 - 1 is 2 and then get this id and add 1 . Thats how we can get the id .
Afterwards i am clonning the whole array of todos then by using javascript function called push i am adding the newTodo’s object . Please note that stateis immutable we cannot change it by using this.state.todos.push(newTodo) . So we have use setState in React .
So just set the state of the todos by oldTodo .
Here we go we have achieved our goal by adding the new item in our todo array . Lets just try .
We did it !!!!!!!!
One things you have noticed is that after adding the new todo in the todos array still it is showing the value we type in the input field . So in setState just add newTodo: '' .
Thats it now are able to add new data in our array .
Move onto Vue now .
How does Vue acts ?
In Vuejs, our input field has a handle on it called v-model. This enables us to do two-way binding in Vue . So just add v-model inside input tag and name it "newTodo" .
Add newTodo to the data() inside the script tag where we put the todos object .
So just add {{ newTodo }} right after where we are displaying all the todos list as :
Now type anything inside input and you can see the output after the todo list .
That was an easy way to achieve two way binding compare to React Now lets add the button above the todos list using bootstrap as we did in React .<button className="btn btn-info mb-3 form-control">Add New Todo</button> . Now what we want is when this button is clicked this should add the new todo .
Vue.js offers us to intercept any DOM event by using the v-on directive on an any tag . So if we want to do something when something is clicked we can use v-on:click . Vue js allows us to use this in a simplest form as @click simple is that .
Our target is when the button clicks we should add the new todo in the array . So just add @click in the button tag as :
We can choose to use the parentheses as@click="addTodo" is equivalent to @click="addTodo()". But in my point of view @click="addTodo()" is easily readable for everyone that we are calling a function .
You can create JavaScript methods in an Vue app.
The Vue App can contain many methods. All are like JavaScript functions, but they should coded in the property methods instead . Now lets make a function called addTodo() and code some stuff i will explain it to you .
Simple is that much more like we did in React section . Creating a new object of newTodo . Generating the id and placing the name using newTodo . Then we are cloning the current todo object and then pushing the newTodo in it . In the end we are setting the newTodo empty so that it will not show after adding the new button . Comparing to React that was much easier to achieve the target .
Delete Todo
Now lets come to another part of deleting the todo .
First of all add the delete button using bootstrap in both apps right after where we are displaying the todo array .
and
How does React acts ?
We are going to add an event listener onClick={this.deleteTodo} .
This means we are calling the function when this button clicks . So now make a function called deleteTodo() . This function is going to be called every time when the button is clicked but how do we know which exact button has been clicked because every single number of todo we have exactly the same number of buttons what we are do now ? So we should not call this function directly like this . We are going to call this function with another function passing the index in the deleteTodo() . Index is coming from the map function as i told you in the very first section of this story .
Now code some stuff in deleteTodo() . I will explain it to you .
I am receiving the index in the function . Then i am cloning the current state of todos . After that i am using delete function in oldTodos passing the fired index . In the end i am setting the state . That it …..
How does Vue acts ?
First add index in the v-for we use in the li tag as :
Now add an event listener in the button tag we created for delete passing the index in it as :
Now its time to create a function of deleteTodos with some code .
That was awesome we did it in a single line of code . Receiving the index then modifying the array using splice function . According to developer.mozilla The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements. Taking the syntax of splice() first parameter is index at which to start changing the array (with origin 0)and second is an integer indicating the number of old array elements to remove .
Its time to update our todos list .
React Update
First of all i am going to create a new button called update before where we are displaying our todos .
So what i want is when we clicks this button we should call a function called updateTodo() . So create a function and bind it inside the constructor and this function is also going to take an index as well .
Now we want when the user clicks on the update button we want replace Add Todo button with Update Todo button . Another thing we want that we are going to display the value of that todo ( which we clicked ) inside input tag and finally when the user clicks on Update Todo button it’s going to update that todo .
First we want to change the text of Add Todo button with Update Todo button . In our state we are going to have an editing state which should be false by default .
Now come to updateTodo() function and changed the state of editing to true.
Come to Add Todo button and changed the hard quote Add Todo text to :
As soon as we click on the update button Add Todo text will be changed to Update Todo . Now when we click on the specific update button on each todo it should display that todo inside input tag .
Coming to updateTodo function . In this function we are going to retrieve that specific todo by index and then in setState function we are going to set that newTodo by that todo .
We store that specific todo inside const todo then changed the state of newTodo to todo.name . Now we want that when the users clicks on Update Todo button it will changed that specific text from what the user typed .
Go and create function called modifyTodo bind it inside the constructor and it is going to be an in-charge of saving that input . Then we want when the users clicks on Update Todo it should call modifyTodo .
Using ternary operator again so when we are in editing mode let the handle be modifyTodo if not it should call addTodo . Therefore , when we click that Update Todo it will call modifyTodo . We are going back to the constructor and creating a new state called index and by default it is null (Do it yourself ). Coming back to the updateTodo function and in setState set the state of index to index . Through this we know exactly which specific index we want to modify .
Now in modifyTodo function lets code in it i will explain .
I am trying to keep this as simple as possible first of all we retrieve todo out of state passing the index to it then we updated the name using newTodo’s Then we retrieve all of the todos out of the state afterwards we replace todo with that specific index with the new one and then finally we set the state of todos with modifiedTodo, and set the editing mode to false therefore we no longer be able to see Update Todo text in the button , setting the newTodo to empty means our input field will become empty and last but not the least setting the index back to null.
Now Its Vue Turn
How does Vue acts ?
Create a new button called update right before where we are displaying our todos . Now this function should call a function updateTodo when it is clicked . So using @click event handler we can call updateTodo function passing the index to it .
We want exactly the same experience as we have done in React .
So first we want to change the text of Add Todo button with Update Todo button . In our data function we going to use editing and by default it is false .
Now come to the updateTodo function and change the value of editing to true.
Scroll to button of Add Todo and changed the text to this below and also changed the event handler so that we can call function when when editing mode is true or false vice-versa .
Hope it will be clear to all of you nothing is new same target but different approach . Going back to the data() and create index in it and by default it is null ( Do it yourself ) . Then come to updateTodo function set the index to the index which we are receiving in the parameter .
Coming to updateTodo function . In this function we are going to retrieve that specific todo by index and then replace newTodo with todo.name so that it can display the exact text in the input field which we have clicked .
Now in modifyTodo function lets code in it i will explain .
We retrieve todo out of data() object passing the index to it then we updated the name using newTodo’s Then we retrieve all of the todos afterwards we replace todo with that specific index with the new one which is const todo , then we set the editing mode to false therefore we no longer be able to see Update Todo text in the button , setting the newTodo to empty means our input field will become empty and last but not the least setting the index back to null.
One thing i want to add is that we don’t want to add todo in our array if the user has not typed anything in our app . So we are going to disable the button in that case .
In React:
We use disabled property to disable the button if the length of the newTodo has less than 1 means we restrict the user to add empty item .
In Vue :
Same target different strategy .
That was awesome .
Thats It we have !!!!!!!
Go around and play …..
Wait Wait Wait there is a bug in our App !!!!!!!!!!!!!
If you have found that’s GREAT
FIX THE BUG
Let me explain after deleting all of our todos we are unable to add another one in our array . Let me just fix it .
Reacts shows an error as :
While Vue shows us as :
React Solution
Go to addTodo and inspect the error . We are generating the new id for the upcoming element so what we are doing we are getting the id of the last element of the whole array and then we are adding one to each ID in that case if there is no element .id will give us error .
To fix that create a function produceId() (Bind it in the constructor )this function will help us to to generate the id .
This function will look for the last element then it will check if there is last element then return its id plus 1 if there is no last element it will return just 1 to be the id of it .
See what we did . In the last we are going to call this function in id of the newTodo object in addTodo function .
Vue Solution
Exact the same approach .
Go and create a function call produceId and rest of the work is here :
And there we have both Apps !!
To be honest working with both of the framework is great . React is the most popular framework out there these days, it has some market advantage . React’s community is much much stronger than any other framework in the market .While Vue is a fresh framework . Vue.js can weight around 20KB and due to its low size its very fast and flexible that allows much better performance in comparison to any other frameworks.
Comparing to React , Vue has much less code . So personally i love this part of Vue .
In the last couple of years both of the framework has changed a lot . Choosing between them is personally your choice and it is depend on the project you want to build .
I will favour to React because I know it is better specially for large projects , but I could get used to Vue simply easy and flexible . What do you think? Vue or React ? Let me know in the comments!
If you’re stuck at any moment and/or have further questions, you’re more than welcome to leave a comment or message me directly! Feedback is always welcome!
Hi, I’m Khizer. I’m currently a student of Karachi University , Karachi , Pakistan . I like technology and love coding . I persuade myself to develop the real-world applications and try to keep my code as clean as possible whether i am learning or developing project . The reason behind to publish this article because i want to contribute to the society and help other students to get the basics fundamentals of React and Vue .
