The v-* directives put me off from learning VueJS. Sticking control flow in dom tags is almost never a good idea - you already have Javascript, inventing your own syntax just means the developer now has to learn two ways to do the same thing, for not a lot of gain.

Absolutely! When I switched from Angular1 to Angular2 (alpha) it was such a pain trying to figure all their new directives.

I just wanted to render a list components or conditionally render something.

When I made the move to React - following the painful Angular2 beta update - I was so relieved to just use Javascript again.

We use a library call virtual-jade. Like react compiles jsx to JS, it compiles pug/jade to JS as h(node, attrs, children) calls. With with react, preact and snabdom.

It's been amazing writing templates that are just functions in a clean language like jade/pug. Jsx still has a lot of boiler plate.

https://github.com/tdumitrescu/virtual-jade

Also has a webpack loader https://github.com/tdumitrescu/virtual-jade-loader

Most of all I love this kind of libs that work well with other libs. It's like Lego programming. Choose bricks you like and stack them.

v-directives are just a bridge for old angular.js developers to jsx and render functions. Vue supports both.

Not saying that you're wrong, but the docs sure seem to imply that directives are the way to go: https://vuejs.org/v2/guide/index.html#Declarative-Rendering

Yeah, that was my own personal opinion prefacing the facts. Vue supports both, but the template system is generally used more in the Vue ecosystem than JSX is. Vue neatly fits between JSX and angular.js' clunky template language. Since the developer can quickly understand that Vue and React are both doing the same thing underneath, he can pick his preferred way to do it (template vs render func). I see in passing that more experienced devs I've worked with prefer the react way at a higher rate than those of less experience do. But mostly, you're right that v-directives are vastly more popular.

Every time I ask about people's JSX experiences in Vue I hear very little.

I came to vue liking JSX pretty well, but it does seem that culturally (or maybe just among newer developers like me) the single-file component with directives in the markup is more popular. Especially in tutorials. I haven’t really felt any pain with the default vue tenplating style that made me think switching to JSX again would be useful to me.

React is easy when you just do data -> rendering. But what about animations, modals and other forms of interactivity that doesn't fit squarely into this?

And while React is simple, you quickly have to add a router, some state management etc., so instead of a small simple library most React-projects I have seen end up being a custom framework.

None of these things come with Vue out of the box. The only difference is, React has often many solutions and massive community support to chip away at something until the very best stand-out solution emerges: redux, react-router, next, etc. React encourages this by staying out. Usually it then trickles down into other eco systems (vuex, vue-router, nuxt, element, ...). If something is very stable or close to perfect it's going to be made official, like modals:

Modals: https://reactjs.org/docs/portals.html

Or animations (in react-native at least, but if you click the link you'll see it works for the web just as well): https://www.webpackbin.com/bins/-KfKys3S2mgEH9UsE8GL

In Vue you're pretty much in the rain. The community isn't encouraged to explore due to half-baked-in solutions, and baked in stuff in general is browser-complacent and thereby very limited. So you get css class animation groups (=react-animation-group), state is a one trick pony tied to the lib, theming isn't considered. There are so many open gaps and holes in the eco system at large, i'm scratching my head over how this would possibly be a plus or easier to the developer. It is often not.

React has perfectly fine state management out of the box, and a "router" is about 20 lines of code for most people's use cases.

If needing more libs for projects is your issue with React you should try Mithril. Routing is included. There's nothing really magical about state management; plain old JS objects work for 90% of state management, and Mithril streams fill in the rest.

Re. animations, etc., those aren't too hard with lifecycle methods, which, if I understand correctly, Mithril copied from React.

> It's the most simple framework I've ever learned.

Not a framework, but library.