Hacker Read top | best | new | newcomments | leaders | about | bookmarklet login

The complexity of creating a component in react is identical to Vue.


sort by: page size:

This whole "React is complicated" is a strawman.

How is JSX more complicated than any template language?

How are Vue components any simpler than React components?


I don't know React but, since I know Vue, I'm confident that I could pick up React fairly quickly.

The reason Vue was easier for me to learn is because it feels like regular JS + HTML, and single file components only strengthen that initial confidence when learning the framework.

Vue just feels relatively normal and was an easier transition for me into the SPA world. React feels like an entirely new thing, even though they are extremely similar at the core.


I think react has a steep initial learning curve but once you grasp the concepts it's not complicated. It is more verbose than vue though and requires more setup and boilerplate to get started.

In fairness, you're comparing a situation where you already know the specialised knowledge to one where you do not. Higher order components are simple in React precisely because you know the framework inside out and you know what a JSX transform does, internally, sight unseen.

That's not particularly intuitive! It just feels that way because you know it well.

> There's always a 'Vue' way to do it, rather than a 'Javascript' way to do it.

I mean, come on. There's a 'React' way to do almost everything too. Want to create an element? No document.createElement for you, you'll be wanting to import ReactDOM, make a class that extends Component (or make a stateless component via a function. Also not intuitive!), then render that component into the DOM.


Oh please. React itself might not be that difficult but thrown in couple overly engineered libraries like react-router and immutable.js and that poor beginner will start feeling a bulging Javascript fatigue in their foreheads.

Once you get rolling both of them are good but it's no easy task to start-up a React project on your own. You need a lot libraries, have to twiddle with immutability which is no piece of cake with JS and be constantly aware of small quirks like keys when looping jsx-elements, className instead of class, how to add css preprocessor, using setState instead of directly assigning to it with the constant farce with deeply nested Object.assigning oh such fun.

React tries to make the world a better place with more theoretical approach while Vue focuses on tried-and-true methods that work and are straight-forward for everyone with a little experience in programming. (v-if might not be pretty but it beats JSX conditional) Granted modern frontend development has a lot of different things to be aware of that make it bit difficult for beginners but IMO Vue makes it a lot more simpler and productive. Some things I wish might be better like the ecosystem but oh well. Overall I'm happier and the only problem is having to fight off overly smug React-developers who have rubbed their egos so hard that they aren't able to even think about better solutions anymore.


Oh no, JSX that compiles down to the exact set of `new Object` calls you would expect in a tree structure, how can I understand such complexity!?

Really, you're kidding yourself if you think React isn't far simpler than Angular or Vue or any of these other frameworks. If you have some different direction in mind, fine, but I doubt it scales


Thanks for the explanation.

I tried out React a while ago, didn't like the idea of JSX, then saw the complexity of the React ecosystem, and then decided "nope, too much complexity."

I ended up using Vue, although from that I'm seeing, Vue is going down the "let's add complexity" route with Vue 3.

I'll look at React again and reassess in this new light.


Because "simple" and "easy" are not synonyms.

For example, Backbone is much simpler than React. React keeps a full virtual copy of the DOM in runtime and uses complex diffing algorithms to decide when and how to actually update the DOM in a manner which is entirely opaque to the developer. Backbone just does the DOM updates you tell it to, when and how you tell it to. And since Backbone is so much simpler, it logically follows that building an application in Backbone much be much easier than building the same application in React, right? Right?

In Vue, a component generally consists of a raw JS object, an (almost) HTML template, and a block of raw CSS. The framework does some opaque but straighforward work to bind these three together into a single conceptual entity. This is indeed more complex, but the added complexity follows the grain of my preexisting intuitions. The end result, in practice, is components which have a clean internal structure and much less boilerplate. Slightly more complex, but easier.


- React takes way more configuration to get started than Vue. You can technically use either of them with or without build tools, but without Babel and Webpack, Vue is still reasonably usable and React is laughably obtuse.

- React out of the box may not be any more complicated than Vue, but it also does a whole lot less than Vue does. Chiefly, you don't get tracking of deep state changes without adding a second (state management) framework on top, and the major ones designed for use with React are also designed for scale, and require tons of boilerplate and highbrow programming theory to get up and running with (I'm looking at you, Redux).

- React itself is pretty highbrow, forgoing straightforward OOP concepts for functional-programming ideals. Which isn't a bad thing! But it makes it harder for newcomers who just want to get the text on their page to match up with what's being typed in an input.


exactly. React works so well with js. And vue claims to be simple but tbh its hard. working with async await function, promises are so weird. And you need packages for simple stuff also.

It's not about how complex the component is. In my experience what matters is how easy it is to use. With React it's easy to build a world in a teacup, and that's mostly a good thing.

For "regular CRUD developers", the vast majority of us, I have zero concern about how big or crazy component code is until it's so huge it impacts page size. I'll use the easiest most feature complete library out there.

React does encapsulation like jQuery never could. I don't care if I have this vanta black box on my page as long as it's easy to mess with and gets the job done


But how many React components are that simple? Almost none.

React is much simpler.

Nah, React is quite simple. It doesn't have much complexity to it as a base library. Yes hooks have some gotchas but once you understand their design (that they are functions with a built-in memory of lifecycle state), they're easy to grasp. Svelte and Vue on the other hand, they have multiple ways of doing things and have their own HTML DSL. You couldn't pay me to write another v-for or #if again.

I find React easier to reason about, which is a big advantage for me.

I had this argument with people a few times, and I always used to say "I could imagine writing a rudimentary version of React myself, without seeing their source code. I couldn't imagine that for Vue".

One day I decided to put my money where my mouth is, and did it. Only about 400 lines of code with all the main hooks. I'd share it here, but more to the point I'd encourage others to try it themselves instead - the code isn't the point.


> React and Vue makes it easier with single file components and wrapping it in functions which makes handling state and configuration

But is this really true? If you have simple presentational components, this is probably true. But your app is tied together by "container components". The state is unique to the app you're writing. You have to somehow map the state to the components. Maybe you use "container components". In one project, you use Redux, in another, you drill props down to all children. In the next, there's React Context or whatever the next thing is. Do components load their own data (like some widgets) or is there a root component that loads all data and handles the state for the entire app?

I'd argue writing presentational components isn't that different from writing just HTML and CSS. The tough parts of React is where all the unique state logic is placed.


Why can't you comment on React?

I don't really like Vue.js after coming from ReactJS, main reason is how hard is it to create components, which is the main attraction of React.

This is ReactJS code for a List group that has list items which are composed of buttons, can anyone post the Vue.JS equivalent code?

var Button = function(props){

return <button>{props.text}</button>

}

var ListItem = function(props){

return <div>I am a item <Button text="click me" /></div>

}

var ListGroup = React.createClass({

  render: function() {

    return <div>

    	<ListItem name="hello"/>

    </div>;

  }
});

ReactDOM.render(

  <ListGroup />,
  document.getElementById('container')
);

React is simple

I find implementing certain common things in react to be a pain, such as state management and route guards.

Vue is similarly unopinionated, but it is more intuitive to my particular brain.

next

Legal | privacy