Intro to RecksJS

recks
github
Search…
recks
API
Libraries
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
🔎 Overview
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
📖 Examples
1. Hello world
Just a basic, no "moving parts"
import Recks from 'recks';
​
function App() {
  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';
​
function App() {
  const ticks$ = timer(0, 1000);
​
  return <div>
    <h1>{ ticks$ }</h1>
    <p>seconds passed</p>
  </div>
}
​online sandbox​
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';
​
function App() {
  const name$ = new Subject();
  const view$ = name$.pipe(
    map(x => x ? `Hello, ${x}!` : ''),
    startWith('')
  );
​
  return <div>
    <input
      placeholder="enter your name"
      onInput={e => name$.next(e.target.value)}
    />
    { view$ }
  </div>
}
​online sandbox​
4. Counter
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>
}
​online sandbox​
📚 Docs
Continue reading:
​Installation guide​
​Lifecycle​
​Events​
​Subcomponents​
​Lists​
​DOM references​
Install
Last modified 2yr ago
Copy link
On this page
🔎 Overview
📖 Examples
1. Hello world
2. Timer
3. Greeting
4. Counter
📚 Docs