Hacker News Reader

Comment by qudat | Hacker News Reader

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

View on HN

If 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.

Only because it is more mature. No reason you can't write a linter for hyperscript.

Looking 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.

Agreed. 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.

about 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/co...

Last 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.

You don't need JSX to work with React. JSX is a paper-thin DSL on top of `React.createElement`. Use that, if you want.

excuse me if i'm wrong, but isn't it just a snippet for react.createElement?

react-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 ¯\_(ツ)_/¯

I 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 :)

How is html hard to read?

Reply on news.ycombinator.com