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

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.