React

• 複数の引数の受け取り方
• 関数型の型指定の方法

あたりが詰まりポイント。

export const Square = ({
  isLive,
  click,
}: {
  isLive: boolean;
  click: () => void;
}) => {
  return (
    <>
      {isLive ? (
        <button className="square live" onClick={click}></button>
      ) : (
        <button className="square death" onClick={click}></button>
      )}
    </>
  );
};

引数で前の状態を取り出せる。これで取らないと値が、おかしくなることがある。

const increment = () => setWidth((prevWidth) => prevWidth + 1);

プロパティonClickが取るのは関数型である。特に深く考えることなかったので詰まった。

<button className="square death" onClick={() => console.log("テスト")}></button>

<button className="square death" onClick={console.log("テスト")}></button>

hookの指針。汎用化できるようにする。 REST APIと良い感じに通信するHookを自作する

読み込み時はコンポーネントをHTMLで静的に描画。あとからコンポーネントDOMに対してイベントをフックすることで操作できるようにする(ハイドレーション)。 これによって、高速表示ができる。 サーバーサイド(Node)と、クライアントサイド(ブラウザ環境)のAPIは一部異なる部分があるので、これを共通化する必要がある。

通常の、ブラウザでDOMを描画するほうはクライアントサイドレンダリング。

さまざまなReactのためのlintが存在する。

• hook
• eslint-plugin-jsx-a11y

ESLint はコードの正しさを保つのに対し、Prettier はコードの読みやすさを保つためのツール。 同時に使うことができる。

eslint-config-prettier は、ESLint のルールのうち、Prettier と相容れないものを無効化 する共有設定です。一方の eslint-plugin-prettier は、Prettier のルールを ESLint のルー ルに統合するためのプラグインです。つまるところ、これらのパッケージにより、ESLint から Prettier を実行することが可能になります。

prettier でコード形式を統一できる。

TypeScriptのテンプレートで作成。

npx create-react-app my-type --template typescript

Reactの非同期でDOMの変更を検知する仕組みのこと。

プロパティはいわばRead-Onlyなデータで、一度コンポーネントが描画されると変更されない。 一方、コンポーネントの描画後に変更されるデータをステートという。

あるコンポーネントのステートの変更が、他のコンポーネントのプロパティに伝播し、それが全体に波及していく…。

ReactだけではWEB機能を提供できない。 ほかの機能もまとめてモジュール間を調整するのが、モジュールバンドラ。 Webpack, Browserify, Gulp, Grunt などが存在する。 一番使われているのがWebpack。

import をたどって依存モジュールのグラフを作成する。

npm install --save-dev webpack webpack-cli
npm install babel-loader @babel/core --save-dev
npm install @babel/preset-env @babel/preset-react --save-dev

• webpack.config.js
• .babelrc

を設定する。

単一のファイルにビルドするとエラーが起きたときの行番号がわからなくなる。 ソースマップ を使うとどこで起きたかわかる。.mapと拡張子のついたファイル。 webpackに設定を追加すると、ビルド時生成されるようになる。

create-react-app を使うとこれらの作業を自動でやってくれる。

コンポーネントを並列に描画はできない。 1つである必要があるが、いちいち包含コンポーネントを書くのは面倒。 フラグメントを使うと簡潔に1つのコンポーネントにまとめられる。

function Cat({ name }) {
    return (
        <React.Fragment>
            <h1>The cat's name is {name}</h1>
            <p><He's good.</p>
        <React.Fragment>
    )
}

// 省略記法
function Cat({ name }) {
    return (
        <>
            <h1>The cat's name is {name}</h1>
            <p><He's good.</p>
        <>
    )
}

1. createClass関数(廃止)
2. クラスコンポーネント(将来廃止)
3. 関数コンポーネント(最新)

props渡し地獄を回避するための組み込みの関数。

<ExampleContext.Provider value={resource.name}>
  <NavigationComponent /> // ← このコンポーネントではcontextで値を取得できるようになる。
</ExampleContext.Provider>

参考

React Contextの使い方 - Qiita

React+TypeScript、chapter03というディレクトリ名で作成する場合。

npx create-react-app chapter03 --template typescript
npm install -D tslint # tslint導入
npx tslint --init # tslint設定ファイル

contextはコンポーネント間で情報をやりとりしやすくするための関数。 コンポーネント間でグローバルに値を共有できる。 が、好き放題に値を変えられると安全性や可読性が下がるので、アクションを通してしか値を変化させられないようになっている。

状態とアクションを元に、行うことを振り分ける関数。

hookはコンポーネントとは独立した関数で、コンポーネントに対して着脱可能な機能を取り付けるイメージ。ステートを追加したいなら useState 。

use はReact hooksにつくプレフィクス。

参考

React hooksを基礎から理解する (useEffect編) - Qiita

hookという名の通り、実行タイミングに関係している。 たとえば、 useEffect に渡された関数はレンダーの結果が画面に反映された後で動作する。

jsではオブジェクトを表す表記。

const { state, dispatch } = useAppState()

は、通常のオブジェクトを作る{}と同じ。 つまり、↓と同じ。

{
  state,
  dispatch
}

これらに関数の返り値が代入される、とそれだけのこと。

Reactの解説。

• jQueryではDOMをグローバル変数としていじらないといけなかった
• viewがテンプレートとjsで分離していて辛かった
• Reactは宣言的UI。「何」を記述する
• jQueryは命令的UIになりがち。「どうするか」を記述する
• Reactは状態が変わるごとにコンポーネントを毎回実行してDOMを新規に構築
• 毎回新規にレンダリングするのと同等なので、画面の更新について考えることが減る
• 仮想DOM…DOMの代わりにjsのオブジェクト(軽量)で仮想的なDOMを構築する
  • 仮想DOMを比較して、差分だけをDOMに反映する
• ReactはUI構築のためのライブラリ。フレームワークではない。Viewに特化している
• JSX … js XML
  • jsの式としてXML風の構文を記述できる
  • BabelやTS等のツールによってjsの式に変換される
• JSXとHTMLの違い
  • 小文字と大文字を区別する
  • キャメルケースを使う
  • HTMLと異なる属性名がある
• コンポーネント
  • コンポーネントは状態を持てる
  • 関数コンポーネントは単なる関数で、関数自体は状態を持っていない
  • 状態はReactが管理する仮想DOM(Fiber構造体)によって管理される
  • 関数コンポーネントからReactが管理する情報とやりとりするためにHooksを使う
• useRef
  • OOPにおけるインスタンス変数の代わりに使用すう
  • 仮想DOMをインスタンスとみなす

Redux Toolkitがなぜ使いやすいかの解説。

Reactの入門書。