Skip to content

Instantly share code, notes, and snippets.

@gitmathub

gitmathub/vuejs-reactjs.md

Last active Sep 23, 2019
Embed
What would you like to do?
VueJs : ReactJs

Comparing ReactJS with ViewJs

Attributes

Vuejs

<div :id="dynamicId"></div>

ReactJs

  • No quotes (would make expression to a string)
<div id={dynamicId}></div>

List & Keys

Vuejs

<ul>
  <li v-for="post in posts" :key="post.id" >
    {post.title}
  </li>
</ul>

ReactJs

  • process lists in js functions and save JSX in a variable. Pass this variable to the render function
const posts = posts.map(post =>
 <li key={post.id}>
   {post.title}
 </li>
)
return <ul>{posts}</ul>

JS Expressions in HTML

Vuejs

<div>number: {{ number + 1 }}</div>

ReactJs

<div>number: {number}</div>

Event Emitter

Vuejs

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>
<!-- shorthand -->
<a @click="doSomething"> ... </a>

React

  • https://reactjs.org/docs/handling-events.html
  • camelCase onClick
  • reference of a function (no brakets, event submitted automatically, this would need binding)
  • arrow function (with brakets, event needs to be passed explicit, no this problem)
<!-- function reference -->
<button onClick={activateLasers}>Fire!</button>
<!-- arrow function with passing event -->
<button onClick={ event => { activateLasers(event)} }</button>activateLasers}>Fire!</button>

Event Handling

  • in case of form submit event.preventDefault()

Vuejs

methods: {
  handleSubmit(event) {
    event.preventDefault()
    console.log(event.target.value)
  }
}

ReactJs

function handleSubmit(event) {
  event.preventDefault()
  console.log(event.target.value)
}

Components Communication

Vuejs

  • parent to child: props
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

Conditional Rendering

Vuejs

<h1 v-if="isLoggedIn">Hello User!</h1>
<h1 v-else>Welcome Guest!</h1>

ReactJs

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

Form Handling

VueJs

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

ReactJs

state = {message: ''};

handleChange(event) {
  this.setState({message: event.target.value});
}
<input type="text" value={this.state.message} onChange={(event) => this.handleChange(event)} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.