File tree 1 file changed +77
-0
lines changed
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).
376
376
</p >
377
377
</details >
378
378
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
+
379
456
## License
380
457
381
458
MIT, Copyright Andre 'Staltz' Medeiros 2018
You can’t perform that action at this time.
0 commit comments