4 ms·

"Doesn't reinvent the wheel" they literally created a whole new language called JSX, I have 13 years writing JS and I dislike React and JSX is one of the reason

"Doesn't reinvent the wheel" they literally created a whole new language called JSX, I have 13 years writing JS and I dislike React and JSX is one of the reasons. As far I can tell reason it's picked a lot of times now it's market share, people see that is more popular than the competition so they try to learn it, creating a feedback loop that just makes it more popular.

bern4444 4y ago
JSX has been around for 7 or so years... that's a good amount of time. Over half of your 13 years :) Do you avoid JSX when using Vue or other libraries that support JSX? Are you invoking the library function directly - React.createElement or vue's equivalent instead?
- yurishimo 4y ago
  Vue supports JSX, but it is by no means the default. https://vuejs.org/guide/extras/render-function.html https://vuejs.org/guide/extras/render-function.html
- mattigames 4y ago
  Yes I do, the only language I use for my personal projects is Typescript; I think JSX, .vue, .svelte they are all a mistake, JS is more than enough if you really need to use it to compose html. div('#wrapper', div('.container', span('.big', `It's not that hard`), button('.red', {route: home}, 'Home!') ) )
  - sli 4y ago
    You should give Clojurescript a serious look. You can use that approach, but the resulting code is... well, readable.
    - mattigames 4y ago
      There is nothing readable about JSX, "<" will always mean minus-than and ">" will always be greater-than.
pcthrowaway 4y ago
I actually like JSX a lot, but I'm baffled when people act like the very thin DSL used by svelte is any more unapproachable than JSX, or like JSX is somehow more javascript when it's a mish-mash of extended HTML (don't forget to use key as needed, and className), React components, and JS (expressions only, not statements... and weird-looking ones at that)
- crooked-v 4y ago
  > don't forget to use key as needed, and className Those are part of React, not JSX itself. Compare Vue's use of JSX, for example, which just uses `class` and `for` instead of `className` and `htmlFor`.
  - scotty79 4y ago
    React just went for JS naming of the attributes instead of html naming of the attributes. Reasonable, if annoying, choice.
    - mattigames 4y ago
      False, for a lot of attributes you have to use the HTML naming of the attributes, so is not consistent, for example to use aria-label you have to write it exactly like that (not ariaLabel as when using JS)
      - scotty79 4y ago
        aria-* and data-* apparently are the exception More on that: https://stackoverflow.com/questions/52398380/why-react-wai-aria-is-not-in-camelcase#52489695 https://stackoverflow.com/questions/52398380/why-react-wai-a...
- scotty79 4y ago
  I recoil from svelte and such because when I see someone trying to invent an ad hoc language inside html attributes I get flashbacks to "transcluding" "directives" of Angular 2.
crooked-v 4y ago
JSX isn't a new language, it's syntactic sugar for React.createElement() or whatever other pragma you prefer (like the Preact or Vue equivalents).
- mattigames 4y ago
  Call it what you want, still is the worst kind of syntatic sugar, the one that forces me to use a transpiler but its full of footguns, like being unable to use "class" for the "class" attribute and I have to use className instead, or the one that has no syntax sugar for conditionals so instead you write horrible stuff like {isValid && isApproved && foobar && <div>...}
  - sli 4y ago
    If you're going to call something a footgun, make sure it's an actual footgun and not simply using a different naming convention than the one you want. You want the HTML name while React uses the Javascript name. https://developer.mozilla.org/en-US/docs/Web/API/Element/className https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEl...
    - mattigames 4y ago
      It is a foogun because is only for a few specificic attributes (class) that it uses this specific convention, for other attributes it uses the normal HTML attributes, for example in JavaScript to add aria labels you do stuff like "ariaLabel" when using react you have to write "aria-label" instead.
undefinedzero 4y ago
If you look at library popularity more broadly, you’ll find over longer periods of time only those people enjoy working with actually continue to grow regardless of previous momentum. People really do move on if it doesn’t work well enough for them. Take React form libraries for example [1], redux-form used to be the most popular by far, was followed up by react-final-form from the same authors so people naturally flocked to that. But that is now clearly seeing a decline as react-hook-form, a library that started from zero, is a lot more pleasant to use. [1] https://npmtrends.com/final-form-vs-formik-vs-react-final-form-vs-react-hook-form-vs-redux-form https://npmtrends.com/final-form-vs-formik-vs-react-final-fo... (set to 5 years)

bern4444 4y ago

JSX has been around for 7 or so years... that's a good amount of time. Over half of your 13 years :) Do you avoid JSX when using Vue or other libraries that support JSX? Are you invoking the library function directly - React.createElement or vue's equivalent instead?

yurishimo 4y ago
Vue supports JSX, but it is by no means the default. https://vuejs.org/guide/extras/render-function.html https://vuejs.org/guide/extras/render-function.html
mattigames 4y ago
Yes I do, the only language I use for my personal projects is Typescript; I think JSX, .vue, .svelte they are all a mistake, JS is more than enough if you really need to use it to compose html. div('#wrapper', div('.container', span('.big', `It's not that hard`), button('.red', {route: home}, 'Home!') ) )
- sli 4y ago
  You should give Clojurescript a serious look. You can use that approach, but the resulting code is... well, readable.
  - mattigames 4y ago
    There is nothing readable about JSX, "<" will always mean minus-than and ">" will always be greater-than.

pcthrowaway 4y ago

I actually like JSX a lot, but I'm baffled when people act like the very thin DSL used by svelte is any more unapproachable than JSX, or like JSX is somehow more javascript when it's a mish-mash of extended HTML (don't forget to use key as needed, and className), React components, and JS (expressions only, not statements... and weird-looking ones at that)

crooked-v 4y ago
> don't forget to use key as needed, and className Those are part of React, not JSX itself. Compare Vue's use of JSX, for example, which just uses `class` and `for` instead of `className` and `htmlFor`.
- scotty79 4y ago
  React just went for JS naming of the attributes instead of html naming of the attributes. Reasonable, if annoying, choice.
  - mattigames 4y ago
    False, for a lot of attributes you have to use the HTML naming of the attributes, so is not consistent, for example to use aria-label you have to write it exactly like that (not ariaLabel as when using JS)
    - scotty79 4y ago
      aria-* and data-* apparently are the exception More on that: https://stackoverflow.com/questions/52398380/why-react-wai-aria-is-not-in-camelcase#52489695 https://stackoverflow.com/questions/52398380/why-react-wai-a...
scotty79 4y ago
I recoil from svelte and such because when I see someone trying to invent an ad hoc language inside html attributes I get flashbacks to "transcluding" "directives" of Angular 2.

crooked-v 4y ago

JSX isn't a new language, it's syntactic sugar for React.createElement() or whatever other pragma you prefer (like the Preact or Vue equivalents).

mattigames 4y ago
Call it what you want, still is the worst kind of syntatic sugar, the one that forces me to use a transpiler but its full of footguns, like being unable to use "class" for the "class" attribute and I have to use className instead, or the one that has no syntax sugar for conditionals so instead you write horrible stuff like {isValid && isApproved && foobar && <div>...}
- sli 4y ago
  If you're going to call something a footgun, make sure it's an actual footgun and not simply using a different naming convention than the one you want. You want the HTML name while React uses the Javascript name. https://developer.mozilla.org/en-US/docs/Web/API/Element/className https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEl...
  - mattigames 4y ago
    It is a foogun because is only for a few specificic attributes (class) that it uses this specific convention, for other attributes it uses the normal HTML attributes, for example in JavaScript to add aria labels you do stuff like "ariaLabel" when using react you have to write "aria-label" instead.

undefinedzero 4y ago

If you look at library popularity more broadly, you’ll find over longer periods of time only those people enjoy working with actually continue to grow regardless of previous momentum. People really do move on if it doesn’t work well enough for them. Take React form libraries for example [1], redux-form used to be the most popular by far, was followed up by react-final-form from the same authors so people naturally flocked to that. But that is now clearly seeing a decline as react-hook-form, a library that started from zero, is a lot more pleasant to use. [1] https://npmtrends.com/final-form-vs-formik-vs-react-final-form-vs-react-hook-form-vs-redux-form https://npmtrends.com/final-form-vs-formik-vs-react-final-fo... (set to 5 years)