Recycle

Recycle is a functional and reactive library for managing components.

With the official React driver (enabled by default), it can be used as a React component, giving you the ability to use FRP paradigm for designing your apps.

Why?

• Greater separation of concerns - UI designers and JavaScript developers can live more peacefully
• It's functional - all components can be defined without the use of classes
• It's reactive - async operations are handled with Observables (which is why they are built for)
• It's fast - even though selecting nodes looks like query selectors, Recycle uses React's inline event handlers
• No need for another framework - use it as any other React component
• Use Observables for dispatching actions to Redux store (using official Redux driver)

How does it look like?

Example of converting React component to Recycle:

Quick Start

The easiest way to get started with Recycle is to use Create React App

npm install -g create-react-app

create-react-app my-app
cd my-app/

When your application is initialized you can install Recycle:

npm install --save recyclejs

Create Recycle instance by defining its root component:

import React from 'react'
import ReactDOM from 'react-dom'
import Recycle from 'recyclejs'
import ClickCounter from './ClickCounter'

ReactDOM.render(
  <Recycle root={ClickCounter} />,
  document.getElementById('root')
)

Create a new file, src/ClickCounter.js:

import React from 'react';

function ClickCounter () {
  return {
    initialState: { 
      timesClicked: 0 
    },

    reducers (sources) {
      return [
        sources.select('button')
          .on('click')
          .reducer(function (state) {
            state.timesClicked++
            return state
          })
      ]
    },

    view (props, state) {
      return (
        <div>
          <span>Times clicked: {state.timesClicked}</span>
          <button>Click me</button>
        </div>
      )
    }
  }
}

export default ClickCounter;

Starting Application

You can now run your app:

npm start

Documentation

https://recycle.js.org