purescript-pux's Introduction

Pux

Pux is a PureScript interface to React, similar to the Elm app architecture. It is a simple pattern for modular, nested components that are easy to test, refactor, and debug - making it simple and straightforward to build complex web applications.

Build React UIs as a fold of actions to state.
Type-safe routing
Server-side rendering (isomorphic applications)
Hot-reloading of components
Interop with existing React components

Installation

The easiest way to get started is to clone the starter app, which includes a hot-reloading setup using webpack:

git clone git://github.com/alexmingoia/pux-starter-app.git example
cd example
npm install
npm start

Pux is also available as the bower package purescript-pux.

Example

The following chunk of code sets up a basic counter that you can increment and decrement:

import Prelude (Unit, bind, const, show, (-), (+))

import Control.Monad.Eff (Eff)
import Control.Monad.Eff.Exception (EXCEPTION)
import Signal.Channel (CHANNEL)

import Pux (renderToDOM, fromSimple, start)
import Pux.Html (Html, text, button, span, div)
import Pux.Html.Events (onClick)

data Action = Increment | Decrement

type State = Int

update :: Action -> State -> State
update Increment count = count + 1
update Decrement count = count - 1

view :: State -> Html Action
view count =
  div
    []
    [ button [ onClick (const Increment) ] [ text "Increment" ]
    , span [] [ text (show count) ]
    , button [ onClick (const Decrement) ] [ text "Decrement" ]
    ]

main :: forall e. Eff (err :: EXCEPTION, channel :: CHANNEL | e) Unit
main = do
  app <- start
    { initialState: 0
    , update: fromSimple update
    , view: view
    , inputs: []
    }

  renderToDOM "#app" app.html

Recommend Projects