How is JSX more complicated than any template language?

How are Vue components any simpler than React components?

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.

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.

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.

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

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.

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 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.

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

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.

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.

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')

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