# Intro to RecksJS

[![NPM](https://img.shields.io/npm/v/recks)](https://www.npmjs.com/package/recks) [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/recks?label=gzipped)](https://bundlephobia.com/result?p=recks@latest) [![MIT license](https://img.shields.io/npm/l/recks)](https://opensource.org/licenses/MIT)

> Official docs: [**recks.gitbook.io**](https://recks.gitbook.io)

RecksJS is a **framework based on streams**

```jsx
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**](https://codesandbox.io/s/recks-example-greeting-input-tu6tp?file=/src/App.jsx) or [**install locally**](https://recks.gitbook.io/recks/install)

⚠️ RecksJS is currently in beta

## 🔎 Overview

Observables are first class citizens in Recks ❤️

```jsx
function App() {
  return <div>{ timer(0, 1000) }</div>
}
```

You can also do other way around: map a stream on JSX

```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:

```jsx
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"](https://dev.to/kosich/recks-rxjs-based-framework-23h5) and check out [API](https://recks.gitbook.io/recks/api/) docs section

## 📖 Examples

### 1. Hello world

Just a basic, no "moving parts"

```jsx
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

```jsx
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](https://codesandbox.io/s/recks-example-timer-fjyvj?fontsize=14\&hidenavigation=1\&theme=dark\&module=/src/App)

### 3. Greeting

Uses a simple [Subject](https://rxjs.dev/api/index/class/Subject) to store local component state:

```jsx
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](https://codesandbox.io/s/recks-example-greeting-input-tu6tp?fontsize=14\&hidenavigation=1\&theme=dark\&module=/src/App)

### 4. Counter

Traditional counter example with a [Subject](https://rxjs.dev/api/index/class/Subject):

```jsx
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](https://codesandbox.io/s/recks-example-counter-lw29e?fontsize=14\&hidenavigation=1\&theme=dark\&module=/src/App)

## 📚 Docs

Continue reading:

* [**Installation guide**](https://recks.gitbook.io/recks/install)
* [Lifecycle](https://recks.gitbook.io/recks/api/lifecycle)
* [Events](https://recks.gitbook.io/recks/api/events)
* [Subcomponents](https://recks.gitbook.io/recks/api/subcomponents)
* [Lists](https://recks.gitbook.io/recks/api/lists)
* [DOM references](https://recks.gitbook.io/recks/api/dom-references)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://recks.gitbook.io/recks/master.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.