5 ms·

I was just going to say this too: JSX is a DSL. And a particularly screwy one!

by nickbauman 4y ago

k4rli 4y ago
What's screwy about it? In my experience it's been painless to switch between html+vanillajs and React projects.
- nickbauman 4y ago
  JSX has an Async "tag"... Let that sink in. <Async></Async>
- afavour 4y ago
  Just one example: the class attribute in HTML vs className in JSX. It’s not that it’s complicated, you just use one or the other. But it’s very indicative of what’s going on under the hood: despite looking exactly like HTML, JSX isn’t creating HTML. It’s creating elements via JavaScript APIs.
  - eyelidlessness 4y ago
    FWIW, the className prop is a React thing not a JSX thing. Other libraries which use JSX will happily accept a plain class prop. The React limitation is abstraction leakage: props are not attributes, they map to DOM properties. But to the point that JSX is a DSL, that limitation is specifically because React itself is very tightly coupled to DOM semantics… but JSX explicitly has no built in semantics[1]. 1: First sentence of https://facebook.github.io/jsx/ https://facebook.github.io/jsx/ - “JSX is an XML-like syntax extension to ECMAScript without any defined semantics.”
  - crubier 4y ago
    Narrative violation: className and friends are NOT a React thing! They are a standard DOM property! https://developer.mozilla.org/en-US/docs/Web/API/Element/className https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... The only "debatable" thing that React does is to use the names from the JS API in JSX (where some people would expect names from the HTML API because JSX looks like HTML)
    - afavour 4y ago
      That’s basically what I said, though? The point is that JSX is made to look like HTML so you think you’re writing HTML but you’re not, you’re using a JS API. Also I had to laugh at the sibling replies: > Narrative violation: className and friends are NOT a React thing! > FWIW, the className prop is a React thing not a JSX thing Don’t try to say it doesn’t cause confusion!

I was just going to say this too: JSX is a DSL. And a particularly screwy one!

k4rli 4y ago

What's screwy about it? In my experience it's been painless to switch between html+vanillajs and React projects.

nickbauman 4y ago
JSX has an Async "tag"... Let that sink in. <Async></Async>
afavour 4y ago
Just one example: the class attribute in HTML vs className in JSX. It’s not that it’s complicated, you just use one or the other. But it’s very indicative of what’s going on under the hood: despite looking exactly like HTML, JSX isn’t creating HTML. It’s creating elements via JavaScript APIs.
- eyelidlessness 4y ago
  FWIW, the className prop is a React thing not a JSX thing. Other libraries which use JSX will happily accept a plain class prop. The React limitation is abstraction leakage: props are not attributes, they map to DOM properties. But to the point that JSX is a DSL, that limitation is specifically because React itself is very tightly coupled to DOM semantics… but JSX explicitly has no built in semantics[1]. 1: First sentence of https://facebook.github.io/jsx/ https://facebook.github.io/jsx/ - “JSX is an XML-like syntax extension to ECMAScript without any defined semantics.”
- crubier 4y ago
  Narrative violation: className and friends are NOT a React thing! They are a standard DOM property! https://developer.mozilla.org/en-US/docs/Web/API/Element/className https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... The only "debatable" thing that React does is to use the names from the JS API in JSX (where some people would expect names from the HTML API because JSX looks like HTML)
  - afavour 4y ago
    That’s basically what I said, though? The point is that JSX is made to look like HTML so you think you’re writing HTML but you’re not, you’re using a JS API. Also I had to laugh at the sibling replies: > Narrative violation: className and friends are NOT a React thing! > FWIW, the className prop is a React thing not a JSX thing Don’t try to say it doesn’t cause confusion!