File tree Expand file tree Collapse file tree 1 file changed +77
-0
lines changed Expand file tree Collapse file tree 1 file changed +77
-0
lines changed Original file line number Diff line number Diff line change @@ -376,6 +376,83 @@ See [`@cycle/react-native`](https://github.com/cyclejs/react-native).
376376 </p >
377377</details >
378378
379+ <details >
380+ <summary ><strong >JSX support</strong > (click here)</summary >
381+
382+ <p >
383+
384+ ### Babel
385+
386+ Add the following to your webpack config:
387+
388+ ``` js
389+ module: {
390+ rules: [
391+ {
392+ test: / \. jsx? $ / ,
393+ loader: ' babel-loader' ,
394+ options: {
395+ plugins: [
396+ [' transform-react-jsx' , { pragma: ' jsxFactory.createElement' }],
397+ ]
398+ }
399+ }
400+ ]
401+ },
402+ ```
403+
404+ If you used ` create-cycle-app ` you may have to eject to modify the config.
405+
406+ ### Automatically providing jsxFactory
407+
408+ You can avoid having to import ` jsxFactory ` in every jsx file by allowing webpack to provide it:
409+
410+ ``` js
411+ plugins: [
412+ new webpack.ProvidePlugin ({
413+ jsxFactory: [' @cycle/react' , ' jsxFactory' ]
414+ })
415+ ],
416+ ```
417+
418+ ### Typescript
419+
420+ Add the following to your ` tsconfig.json ` :
421+
422+ ``` js
423+ {
424+ " compilerOptions" : {
425+ " jsx" : " react" ,
426+ " jsxFactory" : " jsxFactory.createElement"
427+ }
428+ }
429+ ```
430+
431+ If webpack is providing ` jsxFactory ` you will need to add typings to ` custom-typings.d.ts ` :
432+
433+ ``` js
434+ declare var jsxFactory: any;
435+ ```
436+
437+
438+ ### Usage
439+
440+ ``` js
441+ import { jsxFactory } from ' @cycle/react' ;
442+ function view (state$ : Stream < State > ): Stream<ReactElement> {
443+ return state$ .map (({ count }) => (
444+ < div>
445+ < h2> Counter: {count}< / h2>
446+ < button sel= " add" > Add< / button>
447+ < button sel= " subtract" > Subtract< / button>
448+ < / div>
449+ ));
450+ }
451+ ```
452+
453+ </p >
454+ </details >
455+
379456## License
380457
381458MIT, Copyright Andre 'Staltz' Medeiros 2018
You can’t perform that action at this time.
0 commit comments