On: Please Stop Reinventing JSX

[mikojan]

Turn it into a component then. That is how you abstract in JSX.

[recursive → mikojan]

I mean cool, fine. But are you arguing for less abstraction or more? The original post was about unrolling everything and declaring inline. In a sense, you're now going in the opposite direction by adding another layer of abstraction. I'm ok with it either way. I think all of the above might be reasonable designs in particular contexts.

But an argument like "ok, well then, you're still wrong, just now in the opposite direction" strikes me as contrarianism for its own sake.

[mikojan → recursive]

JSX is a language for describing user interfaces. The author argues against inventing your own JSON- or JavaScript-based languages for describing user interfaces and also feeding all of that back into JSX.

This JSON-based description...

  const entries = [
    {_type: "nav_link", to: "/a", displayName: "A"},
    {_type: "nav_link", to: "/b", displayName: "B"},
    {_type: "download_link", file: "/c.txt", displayName: "Download C"},
  ];

...is the same as this JSX-based description...

  <Menu>
    <NavLink to="/a">A</NavLink>
    <NavLink to="/b">B</NavLink>
    <DownloadLink file="/c.txt">Download C</DownloadLink>
  </Menu>

...but with extra steps and in needlessly novel markup. The extra steps being something like...

  <Menu>
    {entries.map(entry => {
       switch (entry._type) {
         case "nav_link":
           return <NavLink to={entry.to}>{entry.displayName}</NavLink>;
         case "download_link":
           return <DownloadLink file={entry.file}>{entry.displayName}</DownloadLink>;
         default:
           throw new Error("Invalid type", {cause: entry});
       }
    })}
  </Menu>

These are more abstractions on top of abstractions that on their own would have sufficed.