Simplify use of JSX with babel and Cycle.js

[foxdonut]

In your Cycle.js examples, you use JSX with babel and hJSX. I think it would be worth clarifying the configuration because in the article, it is incorrect because you have both:

1. { "pragma": "DOM.hJSX" } in .babelrc and
2. /** @jsx hJSX */ in the .js files.

Instead, you should use one or the other. If you have /** @jsx hJSX */ in the .js files, you should not have the pragma in .babelrc (it is not necessary).

However, if you use the pragma, here is the correct way to do it:

In .babel.rc:

[ "transform-react-jsx", { "pragma": "hJSX" } ]

In the .js files:

import { hJSX } from '@cycle/dom';

But do not use /** @jsx hJSX */.

Because the pragma will generate calls to hJSX when converting JSX code, so you need to import hJSX to make it available.

Hope that helps!

[donaldpipowitch]

Wow! I always wondered why this didn't work as expected. This is exactly the reason why I made this article public - to find subtle problems like that. Thank you. I'll change that soon.

[donaldpipowitch]

I just noticed that I followed the official docs which seems to be wrong, so I made a pull request: https://github.com/cyclejs/cyclejs.github.io/pull/38.