Intro to RecksJS
Official docs: recks.gitbook.io
RecksJS is a framework based on streams
import Recks from 'recks';import timer from 'rxjs'; { const ticks$ = ; return <div> <h1> ticks$ </h1> <p>seconds passed</p> </div>}
Try it in this online sandbox or install locally
⚠️ RecksJS is currently in beta
🔎 Overview
Observables are first class citizens in Recks ❤️
{ return <div> </div>}
You can also do other way around: map a stream on JSX
{ return ;}
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:
{ const result = axios; 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
📖 Examples
1. Hello world
Just a basic, no "moving parts"
import Recks from 'recks'; { return <h1>Hello world!</h1>}
2. Timer
RxJS' timer here will emit an integer every second, updating the view
import Recks from 'recks';import timer from 'rxjs'; { const ticks$ = ; return <div> <h1> ticks$ </h1> <p>seconds passed</p> </div>}
3. Greeting
Uses a simple Subject to store local component state:
import Recks from 'recks';import Subject from 'rxjs';import map startWith from 'rxjs/operators'; { const name$ = ; const view$ = name$; return <div> <input ="enter your name" = /> view$ </div>}
4. Counter
Traditional counter example with a Subject:
import Recks from 'recks';import Subject from 'rxjs';import scan startWith from 'rxjs/operators'; { const input$ = ; const view$ = input$; return <div> <button => minus </button> view$ <button => plus </button> </div>}
📚 Docs
Continue reading: