My Thoughts on React and Vue.
Tags: react, vue, javascript
Published: 2019-07-25 07:43:45

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

![React Counter Image](https://thepracticaldev.s3.amazonaws.com/i/qvr82579ns0f05pnxanx.png)


###Vue Counter App
![Vue Counter Image]
(https://thepracticaldev.s3.amazonaws.com/i/4w37rhe6imx6j1kmst6v.png)



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.
![React Counter App without Babel Standalone Library]
(https://thepracticaldev.s3.amazonaws.com/i/zeareapkfrzuwzev5tz5.png)


Sample description of the __createElement__ API

   ```javascript
    /**
* @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.
```html
<!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.

###Thanks!!! Have a Good Day Everyone.