That's Stockholm Syndrome from staring at too much JSX. We abandoned programming with XML in 1999 for a reason. JSX is acceptable as fancy markup, not with magic behavior.
This:
<Component prop="value" />
React.createElement(Component, {prop: "value"}, null);
h(Component, {prop: "value"}, null)
<?php
if (condition) {
?>
<div>whatever</div>
<?php
}
?>
if (isLoggedIn) {
return <UserGreeting />;
}
This is fine:
<?php
if (condition) {
?>
<div>whatever</div>
<?php
{
?>
if (isLoggedIn) {
return <UserGreeting />;
{ function
ThemedButton(props) {
return (
<ThemeContext.Consumer>
{theme => (
<button
{...props}
style=.
{{backgroundColor:
theme.background}}
/>
)}
</ThemeContext.Consumer>
);
}
Moreover, JSX components are plain old Javascript functions and classes. You write plain old code that follows normal rules if the language when you deal with them.
JSX DSL is there for convenience because it's, well, extremely convenient.
There are feeble attempts elsewhere to equate JSX with writing HTML inside PHP tags which fall apart the moment you give JSX more than a give-second cursory glance.
JSX is a paper-thin DSL on top of Javascript. JSX components are regular Javascript functions and classes. You work with them the same way you work with any function it class in JS. Unlike PHP where it was actual HTML interspersed with PHP code.
Whether I type `return (<button>foo</button)` in react or echo '<button>foo</button>' in php, it's the same thing from my point of view as an application builder.
Such as? This is the point in dispute, so you need to actually make specific arguments if you think they apply.