4 ms·

> In my view the only thing we should retain from the React era is JSX How do you deal with the non-existing difference between attributes and properties in JS

> In my view the only thing we should retain from the React era is JSX How do you deal with the non-existing difference between attributes and properties in JSX? Is every attribute a property and vice versa? Do properties reflect back as attributes?

nsonha 2y ago
jsx is just a syntax to construct elements with attributes. You can still add properties like you do in a web component. In React you mostly never deal with instances (and properties) but that doesn't mean other ways to model components utilizing jsx cannot.
- azangru 2y ago
  Jsx uses properties, not attributes, while pretending that it uses attributes. Html attributes are strings, whereas jsx allows you to pass different data types to child components. Thus, properties. Which is also why is uses camel-cased names, or insists on className. Because these are the names of HTMLElement's properties.
  - nsonha 2y ago
    that's React's implementation, we are talking what it would be if not React. IMO the semantic is similar to attribute, example: let element = <my-thing my-attribute={value} /> element.property = prop
  - WorldMaker 2y ago
    Those are React optimizations/restrictions, not JSX restrictions. They want to make diff/patch as fast/simple as possible and rely on properties to do that as much as possible. `className` might have been a restriction in early JSX parsers trying to avoid keyword clashes, but every current JSX parser (especially Typescript) has no problems with JS keywords embedded in JSX. (I don't think it actually was a restriction at any point, but early JSX parsers might have been conservative in how they wanted to parse given the fate of E4X.) Snabbdom [1] takes an approach of explicitly separating `props` and `attrs` at the expense of extra verbosity in the JSX `<span props={{ className: 'example' }} attrs={{ 'aria-label': 'Example'>Example</span>`. My Butterfloat [2] uses simple heuristics, starting with the props because you can conditionally type a ton of JS type data (and MDN link comments) out of TS DOM types for a strong autocomplete experience, adding common important-to-HTML copy/paste shortcuts such as `class` and `for` and switching to attributes if an XML namespace seems to be in use or the name includes a `-` and seems to be qebab-cased rather than camel-cased. [1] https://github.com/snabbdom/snabbdom?tab=readme-ov-file#jsx https://github.com/snabbdom/snabbdom?tab=readme-ov-file#jsx [2] https://worldmaker.net/butterfloat/ https://worldmaker.net/butterfloat/
  - rschristian 2y ago
    Every JSX implementation uses a mix of setting props & attributes, depending on the specific label, as the DOM can be a bit weird with how some things reflect. Generally properties are preferable to attributes, however.
edwinjm 2y ago
In Lit, a web component framework, you can set properties with, for example, href=... and you can set attributes with .href=... This can be taken over to JSX.
- azangru 2y ago
  > In Lit, a web component framework, you can set properties with, for example, href=... and you can set attributes with .href=... Only it's the other way around.

nsonha 2y ago

jsx is just a syntax to construct elements with attributes. You can still add properties like you do in a web component. In React you mostly never deal with instances (and properties) but that doesn't mean other ways to model components utilizing jsx cannot.

azangru 2y ago
Jsx uses properties, not attributes, while pretending that it uses attributes. Html attributes are strings, whereas jsx allows you to pass different data types to child components. Thus, properties. Which is also why is uses camel-cased names, or insists on className. Because these are the names of HTMLElement's properties.
- nsonha 2y ago
  that's React's implementation, we are talking what it would be if not React. IMO the semantic is similar to attribute, example: let element = <my-thing my-attribute={value} /> element.property = prop
- WorldMaker 2y ago
  Those are React optimizations/restrictions, not JSX restrictions. They want to make diff/patch as fast/simple as possible and rely on properties to do that as much as possible. `className` might have been a restriction in early JSX parsers trying to avoid keyword clashes, but every current JSX parser (especially Typescript) has no problems with JS keywords embedded in JSX. (I don't think it actually was a restriction at any point, but early JSX parsers might have been conservative in how they wanted to parse given the fate of E4X.) Snabbdom [1] takes an approach of explicitly separating `props` and `attrs` at the expense of extra verbosity in the JSX `<span props={{ className: 'example' }} attrs={{ 'aria-label': 'Example'>Example</span>`. My Butterfloat [2] uses simple heuristics, starting with the props because you can conditionally type a ton of JS type data (and MDN link comments) out of TS DOM types for a strong autocomplete experience, adding common important-to-HTML copy/paste shortcuts such as `class` and `for` and switching to attributes if an XML namespace seems to be in use or the name includes a `-` and seems to be qebab-cased rather than camel-cased. [1] https://github.com/snabbdom/snabbdom?tab=readme-ov-file#jsx https://github.com/snabbdom/snabbdom?tab=readme-ov-file#jsx [2] https://worldmaker.net/butterfloat/ https://worldmaker.net/butterfloat/
- rschristian 2y ago
  Every JSX implementation uses a mix of setting props & attributes, depending on the specific label, as the DOM can be a bit weird with how some things reflect. Generally properties are preferable to attributes, however.

edwinjm 2y ago

In Lit, a web component framework, you can set properties with, for example, href=... and you can set attributes with .href=... This can be taken over to JSX.

azangru 2y ago
> In Lit, a web component framework, you can set properties with, for example, href=... and you can set attributes with .href=... Only it's the other way around.