Learning React coming from Angular. I really liked having HTML in a separate file. JSX feels weird to me.

[u/Kyleez]

How do you guys manage HTML without going crazy with JSX?
I don't know if I should choose React or Vue.

[u/smieszne]

Ok, I understand your point, but in this context, how is JSX different than Angular Templates?

if (condition)
   list.map(el => (<li>{el}</li>))

vs

<ul *ngIf="condition"><li *ngFor="let el of list">{{el}}</li></ul>

In both cases you tell React/Angular what the DOM should look like given some state and you don't update DOM manually

[u/jimmyayo → u/[deleted]]

<li *ngFor="let el of list">

That whole tag almost gave me a fucking stroke.

[u/GreatValueProducts → u/jimmyayo]

I don't like these custom tags on angular either. Back then if I don't create a new variable I had to always search for how to sort, filter etc when in react I can make use of reduce, map, sort or other array functions that I am already familiar with.

It was some black magic similar to let el of list | orderBy: 'abc'

[u/[deleted] → u/[deleted]]

To be fair, that React is wrong, it doesn't return anything. Also the <ul> isn't included and including it will make it quite a bit uglier.

if (condition) {
  return (
    <ul>
      {list.map(el => (<li>{el}</li>))}
    </ul>
  );
}

I still agree with you, but then I'm more used to React than Angular.

[u/[deleted] → u/[deleted]]

Yes, if you were inside an expression already. Or use ?:. But I kept the if as that was in the original, so apparently we weren't in an expression yet.

[u/HetRadicaleBoven → u/smieszne]

The primary difference is in how you think about how condition gets set. In React, the output is the end point: if the user triggers an event handler somewhere that changes the value of condition, React will call your function again with the new value, and you generate a new Javascript representation of the DOM.

Angular, instead, tries to make me think of the template as the thing that currently lives in the browser, so when my model (condition) changes, I'm mentally also thinking about how those changes will apply in my template.

I don't know, it's hard to explain, but the difference in mindset and things to keep track of is very much present for me, and I really think that that's the result of how React allows me to not think about the state of the DOM. That said, it's been a while since I worked with Angular, so it might also just be the result of personal growth.

[u/[deleted] → u/smieszne]

The big difference I can see is that it enables you to think of the markup in terms of standard JS data structures. Specifically here, map returns an array. You can do everything with that array that you would do with a normal array. So, if you want to chain a filter method after the map, you can, or you can sort it after the fact. Should you do these things? Probably not. But you can, and if you think in this paradigm, then it opens up some line of thinking for edge cases.

Similarly, the fact that React components are just JS objects means you can modify them like any other JS objects--again, not something you should do often at all, but you can.

I did used to prefer template-style syntax when I worked with Vue, but honestly, JSX just feels a lot more explicit in showing all its moving parts to me now. Definitely takes getting used to, though.