JSX
Tyler Graham
24520

I can totally see going to hyperscript for react native. Let’s be honest, react native is dom-like in appearance only and has no relation to web browser DOM.

For react web however, I actually have gone a bit the other way, and use a hybrid approach staring with: https://github.com/wix/react-templates

Thing is, sometimes on the web what you really have is, infact, a template. You have a bunch of data, a few behaviors on the data, and then a presentation layer with styles. In that context, templates really make sense. In other contexts, say making a carousel, where the behavior is the presentation and the line between html and javascript is a fake line, I use JSX. In a few cases where the DOM is a mere abstraction around what I’m really doing, I’ll drop to pure React because there I am building the dom tree as an obect tree, and that makes sense to me. Every piece in it’s place.

Basically I use the template approach for my view parent typically, where composition and data display rule over all else. The parent is closely bound to the data coming through, but the javascript class is just exposing that data as a few functions and a bunch of props and state.

I use the JSX approach for my mid-tier components which themselves usually have a small chunk of html attached, but are more behavior than anything else.

I use pure javascript when I’m building say a button or a higher order component, or anything else that is ultimately one freaking piece of dom or a basic tree wrapped around my complex behavior.

I often end up with something like this:
pure Javascript higher order component that loads all relevant data -> template view component which uses most of the data either directly or by passing it around -> JSX components that do some “complex” tasks -> pure Javascript element components that provide localized behavior.

Ultimately, this approach works well when you have complex individual views that for a large part are just regurgitating data with minimal input. When you end up at a complex behavior, it’s time to begin moving towards pure javascript, and when you end up with basically no DOM but lots of logic (or even a reasonable amount of logic) it’s time to fully ditch JSX. I certainly have some views which don’t ever contain a template, but there are times when they are helpful!