fable-elmish applications.
Elmish-React: React extensions forInstallation
npm install --save react react-domnpm install --save-dev fable-core fable-powerpack fable-elmish fable-react fable-elmish-react
Add a reference to the assemblies in the package folders (e.g. node_modules/fable-elmish/Fable.Elmish.dll
).
App component
React application needs a root component to be rendered at the specified placeholder:
Usage:
open Elmish.React Program.mkProgram init update view|> Program.withReact "placehoder" // |> Program.run
ReactNative:
Usage:
open Elmish.ReactNative Program.mkProgram init update view|> Program.withReactNative "awesome" // app component id, should match the react-native CLI-generated native package id|> Program.run
in index.ios.js and index.android.js:
;;
Lazy views
Rendering of any view can be optimizied by avoiding the DOM reconciliation and skipping the DOM construction entierly if there are no changes in the model. Can be used by both React and ReactNative applications.
lazyView
can be used with equattable models (most F# core types: records, tuples,etc).
lazyViewWith
can be used with types that don't implement equality
constraint, such us types/instances coming from JS libraries, by passing the custom equal
function that compares the previous and the new models.
Usage:
open Elmish.React lazyView view modellazyView2 view model dispatchlazyView3 view model1 model2 dispatch