I have been learning Vue and React for the past couple months in my coding bootcamp. The first thing I learned is Vue then I learned React. I could not say which one is better because each one of them has their own strengths and their own weaknesses. For me learning Vue is relatively easier from learning React but not by a huge margin. I will make a series on the differences between the two frameworks. 
This first thing I felt when I dive into React after working with Vue is how different they handle Form input. Vue has two way binding on its data because of this v-model, This is the main reason why they can handle form differently.

Handling Form in Vue

In Vue we have v-model which can bind the value from the input to the state or we usually call it data.

• You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. - vuejs.org *

If you see the gist file we put v-model on each input to bind their state to the input. On the first input we bind email and on the second input we bind password. By filling the input the state/data will also be changed because of the v-model. When you press submit you can see in your browser console :

It works like magic in Vue which is very awesome!

Handling Form in React

On the other side, React does not have any features similar to the v-model on Vue. So we should handle Form differently in react.

In react we can put name on each input, the name we put on the input should be the same with the name on the state.

<input type="email" name="email" placeholder="email" />

Why?
Because we should handle the input with onChange every time we type in the input box.

<input type="email" name="email" placeholder="email" 
onChange={this.formChange} />

formChange = e =>{
this.setState({
  [e.target.name] : e.target.value
})

This function will handle the change on the input box. Every time it changes we will also change the state. e.target.value is the value of the things we put into the input. And if you try to console.log e.target.name it will show that name is equal to the name we assign to the form input. If we put it email then it will be email and if we put it password it will be password. This is the reason why the name we put on the input it must be the same as the state name we have. So basically :

[e.target.name] : e.target.value

will result in :

email : (input value from email)
// or
password : (input value from password)

If we put the name in the input as my_email and my_password then e.target.name will be my_email and my_password . We don't have a state with the name of my_email and my_password . So our state will still be an empty string.

Then we will provide the same method named "submit" to handle the button click event.

submit = () =>{
   console.log('email :', this.state.email)
   console.log('password : ', this.state.password)
   this.setState({
     email : '',
     password : ''
   })
 }

The handle event is the same with Vue but when you empty the state the input won't change into an empty string because of the one way binding. To handle that we should put value property to the input.

<input type="email" name="email" placeholder="email" 
onChange={this.formChange} value={this.state.email} />

By putting value we refer the value of the input to the state so if we empty the state the form input will be empty too.
This is the first episode on comparing React to Vue. I hope that it helps for those who wanted to learn Vue with the basic of React or learning React with the basic of Vue. There are more episodes to come so stay tuned!
I post in my Instagram daily about my journey in web development and also sharing the progress of my articles.

Julian Anderson

@juliancanderson

78/100
​​#100DaysOfCode
​​Integrating react-native-maps to the application. I failed 4 times installing it and after some google search and combining github issues with Medium articles… instagram.com/p/BpUdfJ0Bl2t/…

14:46 PM - 24 Oct 2018

3 3