A button_ with the given class names and onClick handler.

clbutton_ ["pure-button button-success"] (dispatch LaunchTheMissiles) $ do
    faIcon_ "rocket"
    "Launch the missiles!"

A div_ with the given class name (multiple classes can be separated by spaces). This is useful for defining rows and columns in your CSS framework of choice. I use Pure CSS so I use it something like:

cldiv_ "pure-g" $ do
    cldiv_ "pure-u-1-3" $ p_ "First Third"
    cldiv_ "pure-u-1-3" $ p_ "Middle Third"
    cldiv_ "pure-u-1-3" $ p_ "Last Third"

You should consider writing something like the following for the various components in your frontend of choice. In PureCSS, I use:

prow_ :: ReactElementM handler a -> ReactElementM handler a
prow_ = cldiv_ "pure-g"

pcol_ :: String -> ReactElementM handler a -> ReactElementM handler a
pcol_ cl = cldiv_ (unwords $ map ("pure-u-"++) $ words cl)

A Font Awesome icon. The given string is prefixed by `fa fa-` and then used as the class for an i element. This allows you to icons such as

faIcon_ "fighter-jet" -- produces <i class="fa fa-fighter-jet">
faIcon_ "refresh fa-spin" -- produces <i class="fa fa-refresh fa-spin">

A wrapper around foreignClass that looks up the class on the window. I use it for several third-party react components. For example, with <https://github.com/rackt/react-modal react-modal>, assuming `window.Modal` contains the definition of the classes,

foreign_ "Modal" [ "isOpen" @= isModelOpen myProps
                 , callback "onRequestClose" $ dispatch closeModel
                 , "style" @= Aeson.object [ "overlay" @= Aeson.object ["left" $= "50%", "right" $= "50%"]]
                 ] $ do
    h1_ "Hello, World!"
    p_ "...."

Here is another example using react-select:

reactSelect_ :: [PropertyOrHandler eventHandler] -> ReactElementM eventHandler ()
reactSelect_ props = foreign_ "Select" props mempty

someView :: ReactView ()
someView = defineView "some view" $ \() ->
    reactSelect_
        [ "name" $= "form-field-name"
        , "value" $= "one"
        , "options" @= [ object [ "value" .= "one", "label" .= "One" ]
                       , object [ "value" .= "two", "label" .= "Two" ]
                       ]
        , callback "onChange" $ \(i :: String) -> dispatch $ ItemChangedTo i
        ]

A label_ and an input_ together. Useful for laying out forms. For example, a stacked Pure CSS Form could be

form_ ["className" $= "pure-form pure-form-stacked"] $
    fieldset_ $ do
        legend_ "A stacked form"
        labeledInput_ "email" "Email" ["type" $= "email"]
        labeledInput_ "password"
            ($(message "password-label" "Your password") [])
            ["type" $= "password"]

The second labeledInput_ shows an example using React.Flux.Addons.Intl.

If you are going to use ajax or jsonAjax, you must call initAjax once from your main function. The call should appear before the call to reactRender.

Use XMLHttpRequest to send a request with a JSON body, parse the response body as JSON, and then dispatch some actions with the response. This should be used from within the transform function of your store. For example,

data Target = AlienShip | AlienPlanet
  deriving (Show, Typeable, Generic, ToJSON, FromJSON)

data Trajectory = Trajectory
    { x :: Double, y :: Double, z :: Double, vx :: Double, vy :: Double, vz :: Double }
  deriving (Show, Typeable, Generic, ToJSON, FromJSON)

data UpdatePending = NoUpdatePending | UpdatePending Text | PreviousUpdateHadError Text

data MyStore = MyStore { currentTrajectory :: Maybe Trajectory, launchUpdate :: UpdatePending }

data MyStoreAction = LaunchTheMissiles Target
                   | MissilesLaunched Trajectory
                   | UnableToLaunchMissiles Text
  deriving (Typeable, Generic, NFData)

instance StoreData MyStore where
    type StoreAction MyStore = MyStoreAction

    transform (LaunchTheMissiles t) s = do
        jsonAjax "PUT" "/launch-the-missiles" [] t $ \case
            Left (_, msg) -> return [SomeStoreAction myStore $ UnableToLaunchMissiles msg]
            Right traj -> return [SomeStoreAction myStore $ MissilesLaunched traj]
        return s { launchUpdate = UpdatePending ("Requesting missle launch against " ++ T.pack (show t)) }

    transform (MissilesLaunched traj) s =
        return s { currentTrajectory = Just traj, launchUpdate = NoUpdatePending }

    transform (UnableToLaunchMissiles err) s =
        return s { launchUpdate = PreviousUpdateHadError err }

myStore :: ReactStore MyStore
myStore = mkStore $ MyStore Nothing NoUpdatePending

And then in your view, you can render this using something like:

myView :: ReactView ()
myView = defineControllerView "launch the missles" myStore $ \s () -> do
    case launchUpdate s of
        NoUpdatePending -> return ()
        UpdatePending msg -> span_ $ faIcon_ "rocket" <> elemText (T.unpack msg)
        PreviousUpdateHadErroer err -> span_ $ faIcon_ "exclamation" <> elemText (T.unpack err)
    clbutton_ ["pure-button button-success"] ([SomeStoreAction myStore $ LaunchTheMissiles AlienShip]) $ do
        faIcon_ "rocket"
        "Launch the missles against the alien ship!"
    p_ $ elemText $ "Current trajectory " ++ show (currentTrajectory s)

The input to an AJAX request built using XMLHttpRequest.

The response after XMLHttpRequest indicates that the readyState is done.

Use XMLHttpRequest to send a request to the backend. Once the response arrives and the readyState is done, the response will be passed to the given handler and the resulting actions will be executed. Note that ajax returns immedietly and does not wait for the request to finish.