Intro to RecksJS
RecksJS is a framework based on streams
1
import Recks from 'recks';
2
import { timer } from 'rxjs';
3
4
function App() {
5
const ticks$ = timer(0, 1000);
6
7
return <div>
8
<h1>{ ticks$ }</h1>
9
<p>seconds passed</p>
10
</div>
11
}
Copied!
⚠️ RecksJS is currently in beta
🔎 Overview
Observables are first class citizens in Recks ❤️
1
function App() {
2
return <div>{ timer(0, 1000) }</div>
3
}
Copied!
You can also do other way around: map a stream on JSX
1
function App() {
2
return timer(0, 1000).pipe(
3
map(x => <div>{ x }</div>)
4
);
5
}
Copied!
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:
1
function App() {
2
const result = axios.get(url).then(r => r.data);
3
4
return <div>
5
{ result }
6
</div>
7
}
Copied!
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"
1
import Recks from 'recks';
2
3
function App() {
4
return <h1>Hello world!</h1>
5
}
Copied!
2. Timer
RxJS' timer here will emit an integer every second, updating the view
1
import Recks from 'recks';
2
import { timer } from 'rxjs';
3
4
function App() {
5
const ticks$ = timer(0, 1000);
6
7
return <div>
8
<h1>{ ticks$ }</h1>
9
<p>seconds passed</p>
10
</div>
11
}
Copied!
3. Greeting
1
import Recks from 'recks';
2
import { Subject } from 'rxjs';
3
import { map, startWith } from 'rxjs/operators';
4
5
function App() {
6
const name$ = new Subject();
7
const view$ = name$.pipe(
8
map(x => x ? `Hello, ${x}!` : ''),
9
startWith('')
10
);
11
12
return <div>
13
<input
14
placeholder="enter your name"
15
onInput={e => name$.next(e.target.value)}
16
/>
17
{ view$ }
18
</div>
19
}
Copied!
4. Counter
1
import Recks from 'recks';
2
import { Subject } from 'rxjs';
3
import { scan, startWith } from 'rxjs/operators';
4
5
function App() {
6
const input$ = new Subject();
7
const view$ = input$.pipe(
8
startWith(0),
9
scan((acc, curr) => acc + curr)
10
);
11
12
return <div>
13
<button onClick={ ()=>input$.next(-1) }>
14
minus
15
</button>
16
17
{ view$ }
18
19
<button onClick={ ()=>input$.next( 1) }>
20
plus
21
</button>
22
</div>
23
}
Copied!
📚 Docs
Continue reading:
Last modified 1yr ago