In react, there are as many ways to do the same things as there are coders. And of course, some don't follow best practices and will put logic code in it.
Personnally I also find it easier to picture the resulting DOM structure because the stylee is forced to be declarative. Too often in react I have to look around a tag to know whats hapening, or I have to follow some nested map/filter/ternary chaining.
Very good react coders will not do that. They will use a lot of tooling and abstract formatting a lot. But they are few.
``` {#if invokeFunction()} <p>This function returned a truthy value!</p> {/if} ```
And with React do this:
``` { invokeFunction() && <p>This function returned a truthy value</p> } ```
and the result would be the same, a conditionally rendered string. I totally agree in the normalizing/formalizing how templates are build and the more verbose syntax in the Svelete example does make it super obvious. The in-line React example is obvious to me...but maybe that's because I've been writing js for so long.
Where I feel the cognitive overhead pain in looping. Svelete's docs say:
``` {#each collection as { vars }, i} <p key={i}> {vars} </p> {#/each}
```
For some reason, when I see this it rubs me the wrong way. I understand it...but my instinct is to just map over the collection like I would in a plain-old Node.js project.
``` { collection.map((vars, i) => <p key={i}> {vars} </p> } ```
I guess that saving a handful of keystrokes in exchange for super clearly expressing the intent may be a good tradeoff, even if my inclination is towards more terse code.
React has footguns like this because JavaScript expressions were not designed to be used as a templating language.
I'm reminded of https://gbracha.blogspot.com/2014/09/a-domain-of-shadows.htm....
<p v-for="(vars, i) in collection" :key="i">
{{ vars }}
</p>
{ collection.map((vars, i) => <p key={i}> {vars} </p> }
But this example is not even touching the topic. A render function is rarely that simple. Now if you do maps, and filters, and ternary operators, and && / || pass trougth, and set several class conditionally, and pass an event and do preventDefault, etc., now you have a more real life example. And in react you'll get __a lot__ of JS, with very little markup. And you'll have either a lot of boilerplate, or a lot of dependencies to get helpers.
While in Vue you'll get mostly markup, with a little code inside. It will read from top to bottom as well. No needs to wrap stuff in arrow functions to get the event object. PreventDefault has a helper. Setting classes as well. I prefer that.
The IDE tooling is worlds better with JSX as well. Vetur has.. had a rough year.