4 ms·
It saddens me that JSX became so popular in the React community. I find the syntax verbose and hard to read ... similar to HTML. At my last company we used `r
by qudat 8y ago
It saddens me that JSX became so popular in the React community. I find the syntax verbose and hard to read ... similar to HTML.
At my last company we used `react-hyperscript` which was a simple wrapper around `react.createElement`.
Ultimately, the React developers made the mistake of making `createElement` so annoying to work with, I assume because they bought into JSX. Granted, JSX might have been necessary when React was first created in order to ease people into transitioning to HTML in JS, but I feel like we can move passed that now.
I highly recommend `react-hyperscript`: https://github.com/mlmorg/react-hyperscript https://github.com/mlmorg/react-hyperscript
- wetpaws 8y agoexcuse me if i'm wrong, but isn't it just a snippet for react.createElement?
- aylmao 8y agoreact-hyperscript seems to also parse class names ('div.example'), ids ('h1#heading') and come with other goodies. Looks pretty interesting, and I appreciate they doing away with the need of a pre-processor ¯\_(ツ)_/¯
- wetpaws 8y agoI looked through the code and it's about 40 lines long. I don't mind of people using small libraries like this, but it's a bit fun to see it presented as some kind of revelation :)
- interlocutor 8y agoIf you care about compile-time checking (you would, if you work on medium to large applications) then JSX (or the TypeScript variant, TSX) is much better because it catches invalid or mistyped attribute names etc.
- bodas 8y agoOnly because it is more mature. No reason you can't write a linter for hyperscript.
- hoppelhase 8y agoLooking at the sample in the usage section, I don't see why you could not just write a declaration file that would catch wrong attributes and so on.
- nepeckman 8y agoAgreed. Personally, I much prefer ClojureScript's approach to react, which is to use native vectors combined with keywords. So a component could be declared like this example from the re-frame framework. [:div.garbage-bin :on-click #(re-frame.core/dispatch [:delete-item item-id])] Easier to read, no need for an extra compile step or any non-native syntax.
- aidenn0 8y agoabout 30 seconds after learning react, I wrote a parenscript wrapper for it because I find the SGML syntax to be super annoying. A translation from the JSX example that was the first (only?) example on the React homepage at the time: https://github.com/jasom/parenscriptx/blob/master/example/code.lisp https://github.com/jasom/parenscriptx/blob/master/example/co...
- andreareina 8y agoLast times I used hyperscript I just got lost in the sea of parens, brackets, and braces. Never had a problem with cl-who though, so don't really know what that's about.
- dmitriid 8y agoYou don't need JSX to work with React. JSX is a paper-thin DSL on top of `React.createElement`. Use that, if you want.
- mosdl 8y agoHow is html hard to read?