A GHCJS binding to React based on the Flux design. The flux design pushes state and complicated logic out of the view, allowing the rendering functions and event handlers to be pure Haskell functions. When combined with React's composable components and the one-way flow of data, React, Flux, and GHCJS work very well together.

Docs

The haddocks contain the documentation.

Build

This package requires GHC 7.10.2 and the improved-base branch of ghcjs. I followed the instructions in the ghcjs wiki to install the improved-base branch. Once ghcjs is installed, I use the following to build react-flux:

echo "compiler: ghcjs" > cabal.config
cabal configure
cabal build

Example Applications

The source contains some example applications. To try out the TODO example, execute

cabal configure -fexample
cabal build
cd example/todo
make
firefox todo.html

If you don't have closure installed, you can open todo-dev.html instead of todo.html. For more details on the example applications, see the README.

Test Suite

To run the test suite, first you must build both the example applications and the test-client. (The test-client is a react-flux application which contains code for everything not contained in the todo example.)

echo "compiler: ghcjs" > cabal.config
cabal configure -fexample -ftest-client
cabal build

The above builds the TODO application and the test client. Next, install selenium-server-standalone (also from npm). Then, build the hspec-webdriver test suite using GHC (not GHCJS). I use stack for this, although you can use cabal too if you like. Also, at the moment, the prerelease of the react-intl library must be installed from npm.

cd test/client
npm install react-intl@next
cd ../spec
stack build

Finally, start selenium-server-standalone and execute the test suite. Make sure you also have closure installed, since the test suite will compress the todo app before testing it. It must be started from the test/spec directory, otherwise it does not find the correct javascript files.

stack exec react-flux-spec

Other Projects

It differes significantly from the other two react bindings, react-haskell and ghcjs-react. In particular, the major difference is how events are handled. In the Flux design, the state is moved out out of the view and then handlers produce actions which transform the state. Thus there is a one-way flow of data from the store into the view. In contrast, react-haskell and ghcjs-react both have event signals propagaing up the react component tree, transforming state at each node. In particular, react-haskell with its InSig and OutSig have the signals propagate up the tree and optionally transform state at each node and change the type of the signal.