React vs Vue - Beginners Guide

React js and Vue js are arguably two of the most popular and widely used JavaScript frameworks (or libraries) today. But how do they compare to each other?

React is a simple minimalistic framework (or library, whatever) used in building simple and reusable UI Components like buttons, forms, navbars and so on.

You can make two or more similar UI elements which share the same properties and functionalities in a modular approach.

React is currently used on the websites of many companies including popular companies like Facebook (it's creator), AirBnB and Uber and Netflix.

Vue js is very similar to React in some ways. It is a framework used in creating standalone and modular UI elements. It also utilizes the virtual DOM for rendering it's components to the real DOM.

Though not as popular as React, Vue is also used by some big-shot corporations like Google (yep 😄), Nintendo, Behance and Apple.

The main difference between both tools lie in their syntax, and that is what we'll be dissecting for the remainder of this article.

CREATING COMPONENTS WITH REACT

When creating a UI component with React, here's some key points to note about it's syntax:

Components in React are ussually defined as classes. If you're coming from an ES6 background, this shouldn't be new to you.
A XML-like Syntax called JSX or JavaScript Extension can be used to define the view of that Component.
Components can also be defined using a functional approach. These Component are called Functional Components.
Class based Components can hold local properties (state), Functional Components can't.
While state can be defined locally in a class Component, props can only be passed from the context of a parent element.
You can use an external state manager like Redux or define the state locally as you'll see in the code.
You can define methods in a component class and call the method in the view of that component

Below is a typical syntax for defining a class-based button component:

Import {Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { btnLabel: "I am a button, Click me!" };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(() => {
      return { btnLabel: "Clicked!" };
    });
  }

  render() {
    const { btnLabel } = this.state;
    return <button onClick={this.handleClick}>{btnLabel}</button>;
  }
}

Thanks to it's minimalistic architecture, React ships well and is frequently used with other libraries like Redux (state manager), GraphQL (API development) and React-Router (Routing implementation) to build full-fledged websites.

React Hooks

ES6 classes are not the only way you can create Components that works with some local state in React.

React provides some special Functions (*hooks") which can be used to manage state data.

Here's the same button component created with React Hooks:

import React, { useState } from "react";

export default function Button() {
  const [btnLabel, setBtnLabel] = useState("I am a button, Click me!");

  return (
    <button onClick={() => setBtnLabel("Clicked!")}>
      {btnLabel}
    </button>
  );
}

Relative to ES6 React, here's some things to note about this code:

The argument passed to useState hook function is simply the initial state. Just as you would define it in the constructor of a class Component.
Two piece of data is obtained from the useState hook (via array Destructuring)
The first is the actual state data and the second is the state updater function (synonymous to setState())

N/B: To learn about Array Destructuring and other ES6 Syntax, I'll highly recommend HTML To React by Sleepless Yogi . You even get to learn React too!

In the view, an event (click, in our case) would trigger setBtnLabel hook to run and the argument passed will become the new state.

So in a nutshell, hooks allow you create stateful React Components without using an ES6 Class.

CREATING COMPONENTS WITH VUE

Unlike React js, Classes are not used to create Components in Vue.

Each Vue component (which ends with a .vue extension) typically has three osections in it.

The first section is the template area which is for the template or view of that component. As expected, you define what elements you want this Component to render in the DOM.

The second section is the script section which holds the scripting and logic for that component. This includes any method you want to call from the view.

The third section is the style section which holds the styling and layout design (CSS, duh) of that Component.

Like React, you can use an external state manager like Vuex or define and manage the state locally in the Component.

The Async keyword is used in defining any method which will run asynchronously for example fetching data from an API.

Again, like in React, properties passed from the context of a parent is called props while local properties is called state.
The state of a Component is returned in the data method of that component, defined in the script section.

If you want to pass dynamic data to a Vue component, or attach some logic before some data renders, or maybe loop through data, you use a Vue directive. Examples are v-of, v-for, v-bind. There are many other directives for different tasks.

Here is a typical code for defining a button component with Vue:

<template>
  <div>
    <button>{{this.btnLabel}}</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        btnLabel: "I am a button, Click me!"
      }
    },
    name: 'Button.vue'
    props: [props, will, go here, if, any]
  }
</script>

<style scoped>

</style>