Vue vs. React (Old)

⚡️ Tags: 📍Comparison 📍Framework

Similar

• virtual DOM
• provide reactive and composable view components
• maintain focus in the core library, with concerns such as routing and global state management handled by companion libraries

Styled Components: styled-components (opens new window)

Prop validators: prop-types (opens new window)

Router: react-router (opens new window)

State Management: redux (opens new window)

Styled Components: vue-styled-components (opens new window)

Prop validators: vue-types (opens new window) (v1 + v2)

Router: vue-router (opens new window)

State Management: vuex (opens new window)

Templates vs. JSX

Vue uses HTML-based templates

Any valid HTML is also a valid Vue template

React uses JSX, a declarative XML-like syntax that works within JavaScript.

<label htmlFor="namedInput">Name:</label>
<input className="form-control" id="namedInput" type="text" name="name"/>

Things are customized:

• htmlFor where original attribute is for
• className where orginal attribute is class

If a tag is empty, you may close it immediately with />, like XML:

const element = <img src={user.avatarUrl} />;

React - Full programming language

In React, You can leverage the power of a full programming language (JavaScript) to build your view. This includes temporary variables, flow controls, and directly referencing JavaScript values in scope.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

Functions as Children

Yeah, full language. Look this

// Calls the children callback numTimes to produce a repeated component
function Repeat(props) {
  let items = [];
  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }
  return <div>{items}</div>;
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>}
    </Repeat>
  );
}

• props.children in Repeat is a function

But In Vue, no support! You can define something like this with Vue:

<template>
<h1> Hello, {{ formatName }}! </h1>
</template>
<script>
export default {
    props: ['user'],
    computed: {
        formatName() {
            return this.user.firstName + ' ' + this.user.lastName;
        }
    }
}
</script>

Vue has few concepts which React does not. There are mixins, custom directives, filters, these help much in reusability.

---

References

• (Vue) Comparison with Other Frameworks (opens new window)
• Comparing Vuex and Redux by developing an application (opens new window)
• I created the exact same app in React and Vue. Here are the differences. (opens new window)