最近人気のRecoilを始める前に、インストールしておきましょう!

2503 ワード

NPMによるインストール

npm install recoil

or

yarn add recoil
主にtypescriptを使っているのでnpmホームページに入ってrecoil packageを見ました

typescriptユーザー専用のインストールコマンドがあると思い、「DT」をクリックしました!

上のような恐ろしい赤いフォントが浮かび上がって...
typescriptユーザーは上で定義したコマンドでインストールできます!

Bundler


Recoildms Web PackやRollingなどのモジュールを同梱してもよく互換性があります.

ESLint設定


まず、RecoilにESLintを設定します.
次のプラグインをインストールします.
npm install eslint-plugin-react-hooks

or 

yarn add eslint-plugin-react-hooks
インストールが完了すると、.eslintrcファイルを生成します.(Reactの場合はsrcフォルダにインストール)
次に、次のように、AdditionalHooksリストにUserRecoilCallbackを追加します.
このフックを使用するときに渡される依存関係の指定が間違っている場合は、警告が表示され、解決策が提示されます.
{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "useRecoilCallback"
      }
    ]
  }
}

Recoilインストールの注意事項


🚧 RecoilビルドではES 5としての使用はサポートされていません!!
なぜなら、RecoilはES 6でサポートされている「Map」と「Set」タイプに依存しているからです.
ただし、強さ~~~というES 5を使う必要がある場合は、Babelでコードをコンパイルすることから始めてください.
プリセット@babel/preset-envで使用できるが、
大いにやりがいがあると言う
⚠️ **Nightly Builds**
recoil側は毎日1回Github'nightly'ブランチを配備しているそうです.
最新バージョンのRecoilを使いたいなら…!
このブランチは、次のnpmコマンドで使用できます.
npm install https://github.com/facebookexperimental/Recoil.git#nightly

or

yarn add https://github.com/facebookexperimental/Recoil.git#nightly

🔥 Let's do it ! !


Reference


Recoil公式ホームページ