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.
Top comments (11)
I'm still a bit being afraid to try out React hook, but it looks really cool.
May I carefully ask you how you think about Vue 3.0?
I learned Vue first and recently trying to learning React for a practical reason. I honestly prefer Vue more, but people's comment about Vue makes me worried a bit. I read both criticism and justifying but still, it's hard for me to determine, due to my lack of knowledge.
React seems intimidating to start, but quickly gets easier. I think that's what everyone loves about it.
yea that's what I thought when I started using React. But when you understand the basic concepts like Components, Props,State,Binding Functions, and Immutability it really gets easier.
I hope so. I couldn’t reach that point yet.
Yea it's coming and it looks really awesome. RFC Proposal API.
Oh. This is really interesting. Glad to for hear that. Thank you for the information!
JSX is actually one of the best thing happen to me. It got it's quirk. But all the v-if, v-model, v- whatever and @ and : and. Whatever? Hell no! I will stick with JSX just because it's not pretending itself to be html template. Thanks
React vs Vue is not about the concepts. It’s about the money.
Facebook basically wanted to take over the industry by preventing lawsuits against them. This is why some companies banned react amongst their staff and this one of the reasons why Vue was sponsored by Alibaba.
While initially react was focusing on concepts, Vue just chosen to be more practical and to require less code. You don’t really need immutability, just go ahead and modify the state.
This is basically all the clash between them.
What matters today is not the thing itself but the infrastructure around it. You definitely have more rich tool palette with react: helpers, UI libraries, additional tools, bindings, integrations... in Vue, you can easily open an ui kit repo just to realize that everything except the repo name is in Chinese.
In 2017, Facebook was spending around $100k/mo to support React. Vue's palette is poorer not because Vue is bad – Vue is great. It’s poorer because Facebook invests ridiculous amounts of money in react.
But vue in next version has gone hook api hehhehe.
Vue will be even cleaner once the Hooks API is added in version 3. It's an RFC now.
yea it's coming. it looks awesome RFC Proposal API