More than 3 years have passed since last update.

Recoil公式ドキュメント翻訳③ 前書き-インストール

Last updated at 2020-11-24Posted at 2020-10-19

Recoilの公式ドキュメントをgoogle翻訳するとコードまで翻訳されてしまうのが面倒なのでQiitaにまとめてみます。

追々追加していきます。(多分)

公式ドキュメント

前書き
①動機
②コアコンセプト
③インストール
④入門
基本チュートリアル　⑤　⑥　⑦
ガイド　⑧　⑨　⑩
APIリファレンス
Core　⑪　⑫　⑬　⑭　⑮　⑯　⑰　⑱　⑲　⑳　㉑　㉒　㉓　㉔　㉕　㉖　㉗
実用(utils)　㉘　㉙　㉚　㉛　㉜　㉝　㉞　㉟

※全目次は一番下にあります

インストール

NPM

Recoilパッケージはnpmにあります。
最新の安定版をインストールするには、次のコマンドを実行します。

npm install recoil

yarnを使用している場合:

yarn add recoil

Bundler

NPMを介してインストールされたRecoilは、WebpackやRollupなどのモジュールバンドラーとうまく組み合わせられます。

ES 5サポート

RecoilビルドはES 5にトランスパイルされず、ES 5でのRecoilの使用はサポートされていません。
ES 6を基本として提供していないブラウザをサポートする必要がある場合は、Babelでコードをコンパイルし、preset@babel/preset-envを使用してください。
ただし、これはサポートされていないため、問題が発生する可能性があります。

特に、Reactと同様に、Recoilは、ES 6のMapとSetのタイプやその他の機能に依存します。polyfillsを使用してこれらの機能をエミュレートすると、パフォーマンスが大幅に低下する可能性があります。

CDN

バージョン0.0 .11以降、Recoilは<script>タグで直接使用できるUMDビルドを提供し、シンボルRecoilをグローバルネームスペースに公開しています。新しいバージョンからの予期しない破損を避けるために、特定のバージョン番号とビルドにリンクすることをお勧めします。

<script src="https://cdn.jsdelivr.net/npm/recoil@0.0.11/umd/recoil.production.js"></script>

CDN上のすべてのRecoilファイルは、jsdelivrで参照できます。

ESLint

プロジェクトでeslint-plugin-react-hooksを使用している場合。たとえば、次のようなeslint設定では、

// previous .eslint config
{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

additionalHooksのリストに'useRecoilCallback'を追加することをお勧めします。
この変更により、ESLintはuseRecoilCallback()に渡された依存関係が誤って指定された場合に警告を出し、修正を提案します。
additionalHooksのフォーマットは正規表現の文字列です。

// modified .eslint config
{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn", {
        "additionalHooks": "useRecoilCallback"
      }
    ]
  }
}