Intro to RecksJS
Official docs: recks.gitbook.io
RecksJS is a framework based on streams
import Recks from 'recks';import { timer } from 'rxjs';function App() {const ticks$ = timer(0, 1000);return <div><h1>{ ticks$ }</h1><p>seconds passed</p></div>}
Try it in this online sandbox or install locally
⚠️ RecksJS is currently in beta
Observables are first class citizens in Recks ❤️
function App() {return <div>{ timer(0, 1000) }</div>}
You can also do other way around: map a stream on JSX
function App() {return timer(0, 1000).pipe(map(x => <div>{ x }</div>));}
Recks will subscribe to and unsubscribe from provided streams automatically, you don't have to worry about that!
And you can use Promises that will display the result, once resolved:
function App() {const result = axios.get(url).then(r => r.data);return <div>{ result }</div>}
To get a better understanding of Recks concepts, read this article: "Intro to Recks: Rx+JSX experiment" and check out API docs section
Just a basic, no "moving parts"
import Recks from 'recks';function App() {return <h1>Hello world!</h1>}
RxJS' timer here will emit an integer every second, updating the view
import Recks from 'recks';import { timer } from 'rxjs';function App() {const ticks$ = timer(0, 1000);return <div><h1>{ ticks$ }</h1><p>seconds passed</p></div>}
Uses a simple Subject to store local component state:
import Recks from 'recks';import { Subject } from 'rxjs';import { map, startWith } from 'rxjs/operators';function App() {const name$ = new Subject();const view$ = name$.pipe(map(x => x ? `Hello, ${x}!` : ''),startWith(''));return <div><inputplaceholder="enter your name"onInput={e => name$.next(e.target.value)}/>{ view$ }</div>}
Traditional counter example with a Subject:
import Recks from 'recks';import { Subject } from 'rxjs';import { scan, startWith } from 'rxjs/operators';function App() {const input$ = new Subject();const view$ = input$.pipe(startWith(0),scan((acc, curr) => acc + curr));return <div><button onClick={ ()=>input$.next(-1) }>minus</button>{ view$ }<button onClick={ ()=>input$.next( 1) }>plus</button></div>}
Continue reading:
