VueJs : ReactJs

vuejs-reactjs.md

Comparing ReactJS with ViewJs

• Comparing ReactJS with ViewJs
  • Attributes
    • Vuejs
    • ReactJs
  • List & Keys
    • Vuejs
  • JS Expressions in HTML
    • Vuejs
    • ReactJs
  • Event Emitter
    • Vuejs
    • React
  • Event Handling
    • Vuejs
    • ReactJs
  • Components Communication
    • Vuejs
  • Conditional Rendering
    • Vuejs
    • ReactJs
  • Form Handling
    • VueJs
    • ReactJs

Attributes

Vuejs

• https://vuejs.org/v2/guide/syntax.html
• https://vuejs.org/v2/guide/syntax.html#Attributes
• template with binding variables with v-bind (or shorthand: :)
• always use parameter="value" syntax (with quotes). If dynamic: use colons (:parameter="value")

<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

• https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions

<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>'
})

• child to paraent: emit
• example: https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

Conditional Rendering

Vuejs

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

ReactJs

• https://reactjs.org/docs/conditional-rendering.html
• (one solution more terrible than the other)

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

Form Handling

VueJs

• v-model 2 direction binding
• codepen: https://codepen.io/gitmathub/pen/PoYXgvL?editors=1111

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

ReactJs

• controlled components are using the state
• codepen: https://codepen.io/gitmathub/pen/rNBobQM?editors=1011

state = {message: ''};

handleChange(event) {
  this.setState({message: event.target.value});
}

<input type="text" value={this.state.message} onChange={(event) => this.handleChange(event)} />