React.Basic

react :: forall fx state props. { displayName :: String, initialState :: Record state, receiveProps :: Record props -> Record state -> (SetState state fx) -> Eff (react :: ReactFX | fx) Unit, render :: Record props -> Record state -> (SetState state fx) -> JSX } -> ReactComponent (Record props)

Create a React component from a specification of that component.

A specification consists of a state type, an initial value for that state, a function to apply incoming props to the internal state, and a rendering function which takes props, state and a state update function.

The rendering function should return a value of type JSX, which can be constructed using the helper functions provided by the React.Basic.DOM module (and re-exported here).

stateless :: forall props. { displayName :: String, render :: Record props -> JSX } -> ReactComponent (Record props)

Create a stateless React component.

Removes a little bit of the react function's boilerplate when creating components which don't use state.

createElement :: forall props. ReactComponent (Record props) -> Record props -> JSX

Create a JSX node from a React component, by providing the props.

createElementKeyed :: forall props. ReactComponent (Record props) -> { key :: String | props } -> JSX

Like createElement, plus a key for rendering components in a dynamic list. For more information see: https://reactjs.org/docs/reconciliation.html#keys

empty :: JSX

An empty node. This is often useful when you would like to conditionally show something, but you don't want to (or can't) modify the children prop on the parent node.

fragment :: Array JSX -> JSX

Render an Array of children without a wrapping component.

fragmentKeyed :: String -> Array JSX -> JSX

Render an Array of children without a wrapping component.

Provide a key when dynamically rendering multiple fragments along side each other.

data JSX :: Type

A virtual DOM element.

data ReactComponent :: Type -> Type

A React component which can be used from JavaScript.

data ReactFX :: Effect

A placeholder effect for all React FFI.