Recoil公式ドキュメント 翻訳④ 前書き-入門

18600 ワード
selector Recoil State Getting-Started React React テキストリンク

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

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

公式ドキュメント

目次

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

入門

Create React App

RecoilはReactの状態管理ライブラリであるため、Recoilを使用するには、Reactをインストールして実行する必要があります。Reactアプリケーションをブートストラップするための最も簡単で推奨される方法は、Create React Appを使用することです。

npx create-react-app my-app

npxはnpm5.2以降に付属するパッケージランナーツールです。古いnpmバージョンの手順を参照してください。

Create React Appをインストールするその他の方法については、公式ドキュメントを参照してください。

Installation

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

npm install recoil

yarnを使用している場合:

yarn add recoil

RecoilRoot

Recoil State を使用するコンポーネントでは、親ツリーのどこかにRecoilRootが表示される必要があります。
これはルートコンポーネントに置くとよいでしょう。

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

次のセクションでは、CharacterCounterコンポーネントを実装します。

Atom

Atomはstateを表し、任意のコンポーネントから読み取りおよび書き込みを行うことができます。
Atomの値を読み取るコンポーネントは暗黙的にそのAtomに登録されているため、Atomを更新すると、そのAtomに登録されているすべてのコンポーネントが再レンダリングされます。

const textState = atom({
  key: 'textState', // unique ID (他の atoms/selectors に関して)
  default: '', // default value (初期値として)
});

Atomからの読み取りとAtomへの書き込みが必要なコンポーネントは、useRecoilState()以下に示すように使用する必要があります。

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

Selector

Selectorは、派生状態(derived state)を表します。派生stateは state の変換を行います。
指定された状態を何らかの方法で変換する純粋関数に状態を渡す出力と考えることができます。

const charCountState = selector({
  key: 'charCountState', // unique ID (他の atoms/selectors に関して)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

useRecoilValue()フックを使用して、charCountStateの値を読み取ることができます。

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

>>作ってみました

参考サイト

・公式ドキュメント
・Create React App
・npx
・古いnpmバージョンの手順
・npm
・yarn
・Pure function (純粋関数)とは
・みらい翻訳
・Demoのリポジトリ ディレクトリ構成の参考に(なるかわかりませんが)どうぞ

全目次