4 ms·
The example I gave was simplistic, but the value of JSX is the ability to easily nest elements. For instance, let's take my previous example and say we're creat
by nkohari 10y ago
The example I gave was simplistic, but the value of JSX is the ability to easily nest elements. For instance, let's take my previous example and say we're creating a profile link:
const Dashboard = (props) => {
const {user} = props;
let link;
if (user) {
link = (
<a href="...">
<Avatar user={user} />
<span>{user.name}</span>
</a>
);
}
return (
<div>
{link}
...some other content...
</div>
);
};
If you want, you could create a `createProfileLink()` function, or you could create a `ProfileLink` component, or you could keep it as a variable in the `render()` function. This flexibility is what makes JSX powerful.
- duncanawoods 10y ago> but the value of JSX is the ability to easily nest elements There is nothing there that "makes JSX so powerful", its just hiding function calls and varargs. Its only xml-ish syntax. You are welcome to prefer it but its not adding anything functional beyond that. const Dashboard = (props) => { const {user} = props; let link; if (user) { link = DOM.a({href: "..."}, Components.Avatar(user), DOM.span(user.name)); } return DOM.div(link, ...some other content); };
- nkohari 10y agoYes, I understand how JSX works. My point is that it permits nesting in a syntax that is much simpler and emulates markup, which is familiar to web developers. It's okay if you prefer to write code using the direct function calls, but I'm not sure most people would agree with you. I've built a product using direct calls (in CoffeeScript) and using JSX, and JSX was far easier to work with and less error-prone. YMMV.
- lhorie 10y agoI disagree in two ways: the first is that the ability to write template composition procedurally isn't specific to JSX. You can do that in plain js/hyperscript just as well. The second point is precisely that this is procedural code. If the ability of putting together templates procedurally is the pinnacle of templating power/expressiveness, we might as well go back to Backbone.js.