purescriptについての1つの知られていない事実は、それがJavaScriptプロジェクトで増分するのが簡単であるということです.つまり、機能的なスタイルが意味をなす場所でそれを使用することができます.
この記事では、どのように反応プロジェクトを設定し、purescriptを統合する方法を示します.全部で5 mを取る.

あなたの反応アプリを作成する

私の場合はnpm install -g create-react app 続いてcreate-react-app my-app .

アフターcd -インプットmy-app , 私はdevの依存関係をpurescriptで動作させるようにインストールしました.

$ yarn add dev purescript spago purty

その後、プロジェクトをvscodeで開きました.

プルーフセットアップ

等価create-react-app プルーフランドspago init . 走ることでspago init , 道具spago すべてのファイルを追加します.

$ npx spago init

スムーズなPurescript編集のために、私もPureScriptで働くために2つのVSCode拡張をインストールすることを勧めます:PureScript IDEとPurescript言語サポート.

次のステップは、あなたのpackage.json . 反応コマンドは既にcreate-react-app , それで、我々はちょうどPureScriptものを加えます.我々は反応アプリで働いているとして、それはすべての下にJSコードのすべてを持っている慣用ですsrc/ ディレクトリ.引数を追加しますspago build 生成されたファイルがsrc/ ディレクトリ.

  "scripts": {
    "start": "react-scripts start",
    "build": "spago build --purs-args \"-o src/generated-ps/\" && react-scripts build",
    "test": "spago test --purs-args \"-o src/generated-ps/\"  && react-scripts test",
    "eject": "react-scripts eject"
  }

プルーフコードを書きましょう

設定が完了したら、ファイルを作成しましょうPSCode.purs の下にsrc/ ディレクトリ.次のコンテンツを提供します.

module PSCode where

import Prelude

myString = "hello react" :: String

myFunc :: Int -> Int -> Int
myFunc a b = a + b

我々が走るときyarn build , 私たちはspago このファイルを自動的に取り出し、src/generated-ps ディレクトリ.

すべてをまとめる

さて、App.js - 生成したメインアプリケーションファイルcreate-react-app - PSコードを含めることができます.

psは他のJavaScript関数と同じように機能します.唯一の注意点は、ps関数が一度に1つの引数を取るだけで、呼び出しの代わりにmyFunc(3,7) コールmyFunc(3)(7) .
我々が走るときyarn start , 我々が得るものは、ここにあります:

結論

JoeベースのWebプロジェクトにPureScriptを組み込むことは言語を学ぶ素晴らしい方法です.プロジェクト全体の書き換えを必要とせず、プロジェクトの特定の部分をPureRscriptに書き込むことができます.
私はあなたがあなたのJSプロジェクトでpureScriptを試してみる機会を得ることを望む!より多くの学習リソースの場合は、チェックアウトすることができますPureScript website .