FWIW I believe new react devs are slow to realise they can use local variables like this because JSX looks like it is doing string templating instead of object instantiation.
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>
);
};
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);
};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.
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.
> Regarding class vs. className: class is a reserved word
> in JS. It's not really a perf thing, it's the fact that
> JSX was intended as a very simple transform. If JSX used
> class instead of className, the transpiler would need to
> be contextual since "class" would sometimes mean "css
> class" and sometimes "JavaScript class".
<foo className="bar" />
React.createElement("foo", { className: "bar" });
<foo class="bar" />
React.createElement("foo", { 'class': "bar" });
`className` isn't the only offender. `onClick` and `readOnly` are other notorious one. And then there's stuff like `xlinkHref`, because it's not like anyone ever imports SVG from external tools.
Variable assignment is the simplest answer, which takes advantage of the fact that null or undefined values are ignored in JSX:
Regarding class vs. className: class is a reserved word in JS. It's not really a perf thing, it's the fact that JSX was intended as a very simple transform. If JSX used class instead of className, the transpiler would need to be contextual since "class" would sometimes mean "css class" and sometimes "JavaScript class". The baseline complexity for the parser would be higher and could lead to all sorts of complexity. Rather than deal with that the React team avoided the problem by using className instead, keeping things simple.