3 ms·
JSX is a language for describing user interfaces. The author argues against inventing your own JSON- or JavaScript-based languages for describing user interface
by mikojan 2y ago
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.