5 ms·
For me JSX really feels like old-school PHP, we all decided this sucks: <?php if (condition) { ?> <div>whatever</div> <?php } ?> Yet in react ev
by kabes 9y ago
For me JSX really feels like old-school PHP, we all decided this sucks:
<?php
if (condition) {
?>
<div>whatever</div>
<?php
}
?>
Yet in react everybody seems happy to do the exact same thing in javascript.
- skocznymroczny 9y agoIn the webdev world, everything old is new again
- seattle_spring 9y agoIt's not the exact same thing at all though. Declarative versus imperative. I'm sure someone's going to hem and haw about how they're the "effectively" the same, but they're really not. JSX is a breath of fresh air for front end development.
- kabes 9y agoStraight from the react docs [1]: if (isLoggedIn) { return <UserGreeting />; } How is that different? [1] https://reactjs.org/docs/conditional-rendering.html https://reactjs.org/docs/conditional-rendering.html
- deleted 9y ago[deleted]
- winterbe 9y agoThe difference is that the JSX snippet is translated in plain JavaScript which means you can automatically check for syntax errors, type errors (when using TypeScript or Flow) and semantical errors (by writing simple unit tests), whereas the PHP snippet is just a big mess. JSX also runs on clients, servers and mobile devices which is a big plus to me. This is fine: <?php if (condition) { ?> <div>whatever</div> <?php { ?> this not: if (isLoggedIn) { return <UserGreeting />; {
- dmitriid 9y agoDid you read what I wrote? https://news.ycombinator.com/item?id=16918654 https://news.ycombinator.com/item?id=16918654
- tootie 9y agoThis is the official example of using context from the react doc function ThemedButton(props) { return ( <ThemeContext.Consumer> {theme => ( <button {...props} style=. {{backgroundColor: theme.background}} /> )} </ThemeContext.Consumer> ); } I've been writing JavaScript for 15 years and this looks like gibberish to me. There's at least 3 context switches between JavaScript, JSX and CSS. We're abandoning separation of concerns and creating a monstrosity of programming by punctuation.
- Sacho 9y agoEr...why does this suck? What do you replace it with?
- lmm 9y agoIt sucks because you can't even parse it, you can't understand what's going on without mentally switching back and forth between markup and programming language even if the two are in the same file. You replace it with a framework that lets you treat HTML fragments as values in your programming language and write plain old code that follows the normal rules of the language, that can be refactored following the normal rules.
- dmitriid 9y agoHmm... JSX isn't HTML. I thought we established that. 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.
- lmm 9y agoI wasn't talking about JSX one way or the other - just trying to explain what the issue with PHP was and how the industry moved away from it.
- dmitriid 9y agoYes. But... JSX is not HTML. And no, the issues PHP had with embedding HTML do not apply to JSX. 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.
- 9y ago