René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"PureScript 与 React","articleBody":"## 1. React with PureScript\r\n\r\n- Clone [create-react-app-purescript](https://github.com/andys8/create-react-app-purescript). Run `npm install` or `yarn install`.\r\n- Step by step instructions: \r\n  - Create react application with TypeScript.\r\n  \r\n  ```shell\r\n  npx create-react-app create-react-app-purescript --template typescript\r\n  ```\r\n\r\n  - Follow [the craco guide](https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation) to overwrite parts of the `create-react-app` configuration.\r\n  - Extend craco configuration to use [`craco-purescript-loader`](https://github.com/andys8/craco-purescript-loader).\r\n  - Install PureScript (compiler) and initialize spago (package manager).\r\n  \r\n  ```shell\r\n  npm install purescript spago --save-dev\r\n  npx spago init\r\n  ```\r\n\r\n  - Add npm script in `package.json` and install dependencies with `npm install`\r\n  \r\n  ```json\r\n  {\r\n    \"postinstall\": \"spago build --deps-only\"\r\n  }\r\n  ```\r\n\r\n  - Install [`react-basic`](https://github.com/lumihq/purescript-react-basic) and [`react-basic-hooks`](https://github.com/spicydonuts/purescript-react-basic-hooks).\r\n  \r\n  ```shell\r\n  npx spago install react-basic react-basic-dom react-basic-hooks\r\n  ```\r\n\r\n  - Add a PureScript component: `Counter.ps`.\r\n  \r\n  ```haskell\r\n  module Counter where\r\n\r\n  import Prelude\r\n  import Effect (Effect)\r\n  import Effect.Unsafe (unsafePerformEffect)\r\n  import React.Basic.DOM as R\r\n  import React.Basic.Events (handler_)\r\n  import React.Basic.Hooks\r\n  import React.Basic.Hooks as React\r\n\r\n  mkCounter :: ReactComponent {}\r\n  mkCounter = unsafePerformEffect counter\r\n\r\n  counter :: Effect (ReactComponent {})\r\n  counter = do\r\n    reactComponent \"Counter\" \\_ -\u003e React.do\r\n      count /\\ setCount \u003c- useState 0\r\n      let\r\n        handleClick = handler_ \u003c\u003c\u003c setCount\r\n      pure\r\n        $ R.div_\r\n            [ R.button { \r\n              onClick: handleClick (_ - 1), \r\n              children: [ R.text \"-\" ] }\r\n            , R.div_ [ R.text (show count) ]\r\n            , R.button { onClick: handleClick (_ + 1), \r\n            children: [ R.text \"+\" ] }\r\n            ]\r\n  ```\r\n\r\n  - Allow module import in TS: `purescript-module.d.ts`.\r\n  - Import the component and use it: `App.tsx`.\r\n\r\n  ```tsx\r\n  import { mkCounter as Counter } from \"./Counter.purs\";\r\n  // ...\r\n  function App() {\r\n    return \u003cCounter /\u003e;\r\n  }\r\n  ```\r\n- [`purescript-tsd-gen`](https://github.com/minoki/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`](https://github.com/gcanti/fp-ts).\r\n- Some examples:\r\n  - [`purescript-react-realworld`](https://github.com/jonasbuntinx/purescript-react-realworld): A real world implementation of Conduit.\r\n  - [`gatsby-purescript-example`](https://github.com/jonasbuntinx/gatsby-purescript-example): Simple example app using Gatsby.js with PureScript.\r\n  - [`next-purescript-example`](https://github.com/jonasbuntinx/next-purescript-example):  Simple example app using Next.js with PureScript.\r\n \r\n## 2. React Native with PureScript\r\n\r\n- `create-react-native-app purescript-app`\r\n- `pulp init --force`\r\n- `pulp build` \r\n- `src/Main.js`\r\n```javascript\r\nvar React = require(\"react\");\r\nvar RN = require(\"react-native\");\r\n\r\nexports.text = function(props){\r\n  return function(str){\r\n    return React.createElement(RN.Text, props, str); \r\n  };\r\n};\r\n```\r\n- `src/Main.purs`\r\n\r\n```haskell\r\nmodule Main where\r\n\r\nforeign import data ReactElement :: Type\r\n\r\nforeign import text :: forall props. props -\u003e String -\u003e ReactElement\r\n\r\nmain :: ReactElement\r\nmain = text { \r\n  style : { \r\n    color : \"green\", \r\n    fontSize : 50 \r\n    } \r\n  } \"Hello from PureScript!\" \r\n```\r\n\r\n- `./App.js`\r\n\r\n```javascript\r\nimport React from 'react';\r\nimport Main from \"./output/Main\";\r\n\r\nexport default class App extends React.Component {\r\n  render() {\r\n    return Main.main;\r\n  }\r\n}\r\n```\r\n- `pulp build`\r\n- `yarn start` (npm may also work)\r\n","author":{"url":"https://github.com/lambda-forum","@type":"Person","name":"lambda-forum"},"datePublished":"2021-05-08T12:10:17.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2},"url":"https://github.com/3/lambda-forum.github.io/issues/3"}