@ferp/react

@ferp/react

Ferp is the easiest, functional-reactive, zero dependency javascript app framework for nodejs and modern browsers.

And now it's even easier to use with react!

Installing

npm install --save ferp @ferp/react

Or grab it from unpkg

<script src="https://unpkg.com/ferp"></script>
<script src="https://unpkg.com/@ferp/react"></script>
<script>
  const { ferp, ferpReact } = window;
  const { AppProvider, connect } = ferpReact;
</script>

Creating an app

Here's an app that infinitely adds a counter, and logs it.

import React from 'react';
import { effects } from 'ferp';
import { AppProvider, connect } from '@ferp/react';

const Counter = connect(({ state, dispatch }) => (
  <div className="counter">
    <section className="counter-container">
      <span className="counter-number">{state.count}</span>
      <button className="counter-button" onClick={() => dispatch({ type: 'INCREMENT' })}>
        +
      </button>
      <button className="counter-button" onClick={() => dispatch({ type: 'DECREMENT' })}>
        -
      </button>
    </section>
  </div>
));

const initialState = {
  count: 0,
};

const update = (message, state) => {
  switch (message.type) {
    case 'INCREMENT':
      return [{ ...state, count: state.count + 1 }, effects.none()];

    case 'DECREMENT':
      return [{ ...state, count: state.count - 1 }, effects.none()];

    default:
      return [state, effects.none()];
  }
};

render(
  <AppProvider
    init={[initialState, effects.none()]}
    update={update}
  >
    <Counter />
  </AppProvider>,
  document.body,
);

More docs

• Ferp README

Still have questions?

• Open an issue, we're happy to answer any of your questions, or investigate how to fix a bug.
• Join us on reddit, show off what you're doing, post tutorials, or just hang out, but keep things ferp related please.
• Chat with us on gitter, we'll try to be quick to respond.