My Thoughts on React and Vue.

First of all, I'm gonna talk about the class syntax of React, not the new way of creating components using the Hooks API and the difference in writing an application between React and Vue.

React Counter App

Vue Counter App

As you can see I made a counter App using the two famous frameworks (technically React is a library).

Obviously, the React Counter App LOC is a lot than the Vue Counter App. We have more 2 script tags in the React App than the Vue App. The first one is the ReactDOM library because we need this library to bind our React Component to the Dom and the second is the Babel Standalone library we need this due to the reason that browsers can't understand "JSX" the Html like syntax that we used in the render method inside the Component and the first parameter that we pass in the React.render method expects a React Element. So babel library compiles our "JSX" code so the browser understands it.

We can also get rid of the babel library.

Sample description of the createElement API

    /**
* @param type this expects a valid html element like "div" or "p" and can be also JSX Element 
* @param elementAttributes this expects an object that contains the attributes or props of that element
* @param children the child element or children elements of this Element can be any valid html element or JSX Element
* 
* @example
* createElement('div', 
*  { style: { backgroundColor:'black' } }, 1)
* createElement('div',
* { className:"bg-white" }, 
* createElement('h1', null, 'Hello World' ))
* 
* createElement('div',
* { className:"bg-white" }, 
*  createElement(App, {data:[] } ) )
*/  
    React.createElement(element,attributes,...children)

But the downside of this inside the render method in our Component it looks like
we're nesting elements inside elements it looks ugly and not readable. We're doing it the Imperative Way, not the Declarative Way. Remember that React is a Declarative library for building UI not Imperative.

Now let's talk about Vue. Vue is also a system that uses the Declarative Way
in making UI Interfaces or "templates". We just included the Vue script because we don't need JSX in making Vue apps but we can also use it maybe in medium and large scale apps. The DOM bindings are already included in the script. Basic knowledge of HTML, CSS and Javascript will help you a lot in making Vue apps these are the only technologies you might need in making Vue Apps. I just said "might" because just as I said earlier it depends on the size of your application.

Here's the equivalent using the Hooks API.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React App</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="root">

  </div>
  <script type="text/babel">
    function Counter() {
      const [count,setCount] = React.useState(0);
      return (
        <div style={{textAlign:'center'}}>
          <button onClick={()=>setCount(count+1)}>
              +
            </button>
            {count}
          <button onClick={()=>setCount(count-1)}>
            -
            </button>
          </div>
      )
    }
    ReactDOM.render(<Counter />, document.getElementById('root'));
  </script>
</body>

</html>

Using the Hooks API makes the LOC a lot like the Vue App. But we still have the Babel Standalone library. The Hooks API really changes the way in how we write our React Apps.

Blog

My Thoughts on React and Vue.

Mark Abeto

React Counter App

Vue Counter App

Thanks!!! Have a Good Day Everyone.

Join Our Newsletter. No Spam, Only the good stuff.

Related