Time and Wind
AboutFriends

Purs React

functional

1. React with PureScript

  • Clone create-react-app-purescript. Run npm install or yarn install.

  • Step by step instructions:

    • Create react application with TypeScript.
    npx create-react-app create-react-app-purescript --template typescript
    • Follow the craco guide to overwrite parts of the create-react-app configuration.
    • Extend craco configuration to use craco-purescript-loader.
    • Install PureScript (compiler) and initialize spago (package manager).
    npm install purescript spago --save-dev
    npx spago init
    • Add npm script in package.json and install dependencies with npm install.
    {
      "postinstall": "spago build --deps-only"
    }
    npx spago install react-basic react-basic-dom react-basic-hooks
    • Add a PureScript component: Counter.ps.
    module Counter where
    
    import Prelude
    import Effect (Effect)
    import Effect.Unsafe (unsafePerformEffect)
    import React.Basic.DOM as R
    import React.Basic.Events (handler_)
    import React.Basic.Hooks
    import React.Basic.Hooks as React
    
    mkCounter :: ReactComponent {}
    mkCounter = unsafePerformEffect counter
    
    counter :: Effect (ReactComponent {})
    counter = do
      reactComponent "Counter" \_ -> React.do
        count /\ setCount <- useState 0
        let
          handleClick = handler_ <<< setCount
        pure
          $ R.div_
              [ R.button { 
                onClick: handleClick (_ - 1), 
                children: [ R.text "-" ] }
              , R.div_ [ R.text (show count) ]
              , R.button { onClick: handleClick (_ + 1), 
              children: [ R.text "+" ] }
              ]
    • Allow module import in TS: purescript-module.d.ts.
    • Import the component and use it: App.tsx.
    import { mkCounter as Counter } from "./Counter.purs";
    // ...
    function App() {
      return <Counter />;
    }
  • purescript-tsd-gen: TypeScript Declaration File (.d.ts) generator for PureScript. It helps to use PureScript modules from TypeScript. However it does not support higher-kinded types currently because emulating HKT in TypeScript is a little bit complicated. But maybe we can have a look at the implementation of fp-ts.

  • Some examples:

2. React Native with PureScript

  • create-react-native-app purescript-app
  • pulp init --force
  • pulp build
  • src/Main.js
var React = require("react");
var RN = require("react-native");

exports.text = function(props){
  return function(str){
    return React.createElement(RN.Text, props, str); 
  };
};
  • src/Main.purs
module Main where

foreign import data ReactElement :: Type

foreign import text :: forall props. props -> String -> ReactElement

main :: ReactElement
main = text { 
  style : { 
    color : "green", 
    fontSize : 50 
    } 
  } "Hello from PureScript!" 
  • ./App.js
import React from 'react';
import Main from "./output/Main";

export default class App extends React.Component {
  render() {
    return Main.main;
  }
}
  • pulp build
  • yarn start (npm may also work)
Copyright © 2021 raptazure. Built with Gatsby.