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

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"
      }
    ]
  }
}

---

参考サイト

・公式ドキュメント
・npm
・yarn
・Webpack
・Rollup
・Babel
・preset@babel/preset-env
・jsdelivr
・eslint-plugin-react-hooks
・useRecoilCallback
・みらい翻訳

---

全目次

• 前書き
  • ①動機
  • ②コアコンセプト
  • ③インストール
  • ④入門
• 基本チュートリアル
  • ⑤概要
  • ⑥Atoms
  • ⑦Selectors
• ガイド
  • ⑧非同期データクエリ
  • ⑨非同期状態・同期状態
  • ⑩Stateの永続性
• APIリファレンス
  • Core
    •　⑪ <RecoilRoot />
    •　State
    　・　⑫atom()
    　・　⑬selector()
    　・　⑭Loadable
    　・　⑮useRecoilState()
    　・　⑯useRecoilValue()
    　・　⑰useSetRecoilState()
    　・　⑱useResetRecoilState()
    　・　⑲useRecoilValueLoadable()
    　・　⑳useRecoilStateLoadable()
    　・　㉑isRecoilValue()
    •　Snapshots
    　・　㉒Snapshot
    　・　㉓useRecoilTransactionObserver()
    　・　㉔useRecoilSnapshot()
    　・　㉕useGotoRecoilSnapshot()
    •　㉖useRecoilCallback()
    •　雑録(Misc)
    　・　㉗useRecoilBridgeAcrossReactRoots()
    
  • 実用(utils)
    •　㉘atomFamily()
    •　㉙selectorFamily()
    •　㉚constSelector()
    •　㉛errorSelector()
    •　㉜waitForAll()
    •　㉝waitForAny()
    •　㉞waitForNone()
    •　㉟noWait()