On: Flipboard releases React Canvas

[aaronyo]

Big fan of React. For others using it, why use JSX instead of just doing everything in js?

In other words, why is HTML like this:

  <Group style={styles.group}>
          <Image style={styles.image} src='http://...' />
          <Text style={styles.text}>
            Lorem ipsum...
          </Text>
        </Group>

Preferable to something like this (which can easily be done with some helper methods wrapping the verbose React DOM methods):

  $group({styles: style.group},
    $image({styles: image, src: 'http://...'}),
    $text({styles: style.text},
       'Lorem ipsum...'));

No pre processing step required, and of course it's natural to imbed js in, er..., js.

What am I missing? Why keep the HTML part in all this?

[insin → aaronyo]

The XML-like syntax is just less work, mentally and physically: no need for commas between props, the props object and children, no need to carefully manage all those commas when editing, adding, deleting, moving and removing stuff later on, plus the closing tag syntax makes nesting nicer by providing context via the tag name; all of which adds up to make it more pleasant to work with.

The second approach is what I was doing in various flavours for years prior to JSX. I ended up having to adopt comma-first to stay sane in larger/deeper templates, ( e.g. https://gist.github.com/insin/8e72bed793772d82ca8d ). The first thing I did when I saw JSX was start to write a React.DOM emitting version of my then-usual JSON-ML type stuff, but then I tried it and... never going back.

[aaronyo → insin]

Thanks for sharing the examples -- really appreciated.

I'm not convinced that HTML is preferable to other representations of the DOM, particularly for representing UI's and applications (rather than documents). The clojure script wrappers for React I've seen seem to believe, for example, that lisp is better at representing the DOM than HTML and I tend to agree. Especially since any configured IDE should be pointing out missed commas and have rainbow parens.

One thing that is different between your examples and the DOM I've been creating with React is that I tend to make custom tags, and I don't end up with tons of repetitive looking stuff. Your last example is quite readable to my eyes, and would be even more so if perhaps decomposed into some helper functions and, of course, if loops were used and the DOM was populated from some data structure.

[iLoch → aaronyo]

For me, I find it much easier to get an understanding of the structure of the components by looking at hierarchical markup vs. plain old JS. Everyone has a different idea of how they want to lay out their JS, but most people know/agree on what XML should look like.

[aaronyo → iLoch]

Having a preference for reading HTML seems fair, though I prefer closing parens to closing tags for short bits, and the JS formatting problem is one you've already got in the rest of your code base. Also, you'll be formatting HTML + JS bits and not just static HTML like in the example. JSX seems like a good deal of machinery to support this preference.