4 ms·

There's 2 things that I hate about react. 1) JSX - It's terrible. Svelte, Vue, Riot... they all got it right. JSX, mixing a weird syntax of HTML and JS togethe

• azangru 4y ago
  How is this example from vue docs: <a v-on:click="doSomething"> preferable to the jsx version: <a onClick={doSomething}> or even this loop example from the vue docs: <li v-for="item in items"> {{ item.message }} </li> better than its jsx counterpart? items.map(item => ( <li key={item.id}>{item.message}</li> ))
  • tekkk 4y ago
    For one you don't have to write an arbitrary key={item.id}. What if you don't have a unique ID? And even if you do, it's just busywork. Then, what about conditionals? Or slots? Or classNames instead of classes? The saving grace of JSX is that it allows the creation of multiple small components inside a single file.
    • philliphaydon 4y ago
      > The saving grace of JSX is that it allows the creation of multiple small components inside a single file. That's definitely not the saving grace of JSX. As I said, every react project is soooooooo overly abstracted into the tiniest little components. It's no wonder people /think/ react is slow.
  • Yiin 4y ago
    Doesn't change the point, but it's usually <a @click="doSomething">
  • philliphaydon 4y ago
    JSX forces you into small tiny components because anything of any decent size becomes unmanageable. There's way too much mixing of JS into the template. Vue you can do <button :disabled="!isFormValid">Submit</button> In React I've seen people do: if (!props.isFormValid) { return <button>Submit</button>; } return <button disabled="disabled">Submit</button>; This is just an example, obviously you can write this better in React. My point is there's /always/ so much conditional markup like this in every react project I've come across or worked on. Edit: I donno how to format code on here sorry. (oh figured it out, bunch of spaces)
    • azangru 4y ago
      > return <button disabled="disabled">Submit</button>; In JSX, the "disabled" attribute is a boolean; so it would be just: return <button disabled={!isFormValid}>Submit</button>;
      • philliphaydon 4y ago
        > This is just an example, obviously you can write this better in React. The issue is people write SO much conditional logic into their react templates. Not that disabled is boolean and can be written better.
        • mattwad 4y ago
          Trying to be fair here, but what about vue makes it less likely that you won't put the same conditional logic into your vue template? If it's just impossible, then you're saying the framework is more limited, which is fine but sometimes you want flexibility. This seems to be a 'best practice' issue as well that can be avoided through PR review. My team has been putting logic more and more into local hook files to keep components clean.
          • philliphaydon 4y ago
            There's nothing inherently stopping people from writing clean react projects. But I've never seen one. But watching people fumble around trying to find where they need to make a change when things are so overly abstracted, and STILL try to justify that react is good, is baffling. People break tables up into ~50+ files. It's crazy, and everyone does this, and its an absolute nightmare to maintain. Its 100% engrained into react culture that this is the right path forward. React will never get better if people accept over abstraction as the right path forward.
  • adql 4y ago
    Both look like ye olde PHP code mixed with HTML tbh.
    • hirvi74 4y ago
      "History does not repeat itself, but it often does rhyme" - Mark Twain (at least he is attributed with this saying).
  • azangru 4y ago
    For what it's worth, I like the syntax of Lit. There are a couple of magic symbols ("@" for method, "." for property); but otherwise, it's plain javascript. The DOM output that Lit produces, peppered with magic comments, looks disgusting though :-(
  • minusf 4y ago
    i dont have a dog in this fight but JSX is PHP all over again with additional "creative solutions" where html and js keywords clash. but they both make html less readable in different measure for different people. please carry on with the arguments :}
• postalrat 4y ago
  I see JSX as js with a macro to make the createElement calls a bit easier to read. It's not html at all.
• another_kel 4y ago
  > JSX - It's terrible. Svelte, Vue, Riot... they all got it right. JSX, mixing a weird syntax of HTML and JS together is just inferior to HTML with additional markup Hard disagree. Every time I work with Svelte\Vue I wish it had JSX, which is way superior to templating because: - Creating sub components in the same file is super important. Going to a separate file, copying all the imports, writing emits, then going back and importing that file is too much hassle for a simple case where you have a carousel with cards. Refactoring is slow, components end up bloated. - Passing down functions is more convenient than emits. For all the talk about how svelte is boilerplate free, it's equivalent of passing down a function and calling it is at least 5 extra lines of code. - Passing down JSX elements is more convenient than slots. Every time I need to remember how to do named slots in vue\svelte I have to read documentation, while in React the mental model is obvious.
• mock-possum 4y ago
  I can’t stand JSX either - it’s using JavaScript to render HTML templates, but it’s not valid JavaScript or HTML. I much prefer libraries like Lit that use tagged template literals for rendering component views - you write real code in the actual language the browser understands, no extra transpile step needed.
• forgotusername6 4y ago
  I absolutely love JSX. I came from a templating framework (marionette) and writing in JSX is amazing compared to that.