React
SWR とは useSWR の API コンテキストとして SWR を使う 関数として利用する 自動再検証 条件付きフェッチ 引数 参考 SWR とは SWR(stale-while-revalidate) は、データ取得のための React Hooks ライブラリで、次の戦略で実装されている。 キャッシュからデ…
イベントハンドラとエフェクトの選び方 エフェクトからの切り離し エフェクトイベントの命名のコツ エフェクトで依存値を取り除く方法 イベントハンドラへの移動を考える エフェクト内の無関係なロジックは分ける リンタに依存値でないことを示す 前回値を使…
Effect の書き方 Effect を宣言する Effect の依存値の配列を指定する 必要に応じてクリーンアップを追加する 参考 Effect を理解するためには次のロジックを押さえておく必要がある。 レンダーコード コンポーネントのトップレベルにあるもので、props や s…
ref の使い方 ref を参照すべきでないタイミング 参考 DOM ノードにアクセスする時に使うのが ref 。 本来 React がレンダー結果に応じて DOM を自動更新するので、コンポーネントで DOM を操作することはないが、ノードへのフォーカスやサイズ・位置測定で…
リデューサ関数とは state セットのアクションをディスパッチに置き換える リデューサ関数を作成する コンポーネントからリデューサを使用する 良いリデューサの書き方 直接 state をセットするのとリデューサの違いのまとめ 参考 リデューサ関数とは コンポ…
インタラクティビティの追加 – Reactで理解した内容をまとめていきます イベントへの応答 イベントハンドラ イベントオブジェクト state：コンポーネントのメモリ コンポーネントでデータ更新するために必要なこと state セット関数にはコールバック関数が渡…
コンポーネントを純粋に保つ – Reactのチャレンジ問題の最後でハマってしまいましたハマったのは下記コード： export default function StoryTray({ stories }) { let storiesTray = stories; storiesTray.push({ id: "create", label: "Create Story", }); …
純関数 なぜ純関数が重要なのか？ 参考 純関数 純関数とは『計算だけを行い、他には何もしない関数のこと』で次の特徴がある。 呼び出される前に存在していたオブジェクトや変数を変更しない 同じ入力を与えると、純関数は常に同じ結果を返す 純関数は数学で…
アロー関数は直後の式を返す 配列のアイテムに key が必要な理由 キーのルール 参考 アロー関数は直後の式を返す あまりちゃんと意識できていなかったんですが、アロー関数は直後の式を自動的に返す。{} で囲まれる場合は、ブロック形式の関数とみなされるの…
モックから考える Step1: UI をコンポーネントの階層構造に落とし込む Step2: React で静的な ToDo アプリを作成する 静的なリストで表示してみる Step3: 必要十分な state の決定 Step4: state をどこに配置するべきなのかを明確にする Step5: 逆方向のデー…
React でのアプリの作り方の流れを、React の流儀 – Reactの検索可能な商品データ表を例に学んだ。 モックを作る UI をコンポーネントの階層構造に落とし込む React で静的なバージョンを作成する UI 状態を表現する必要十分な state を決定する state をど…
『state, props って同じようにデータを持つようだけど何が違う 』となってしまったので調査。Component Best Practices | React at Preactを参考にしました。 state 変更可能なデータ(mutable) 変更があると、仮想 DOM との差分を取り、ブラウザ DOM を更新…
要素とは 要素を DOM として描画する コンポーネントとは 関数コンポーネントとクラスコンポーネント コンポーネントのレンダー クラスにローカル state を追加する ライフサイクルメソッド 参考 要素とは 要素は React アプリケーションの最小単位の構成ブ…
概要 属性の指定 インジェクション攻撃を防ぐ JSX はオブジェクト 参考 概要 JSX は JavaScript の構文拡張で、React 要素を生成する： const element = <h1>Hello, world!</h1>; JSX のメリットは、マークアップとロジック両方をそのまま含んだように記述でき、コー…
React とは コンポーネントとは React の名付けの慣習 関数コンポーネント 参考 React とは React はユーザインターフェースを構築するための JavaScript ライブラリ。UI を『コンポーネント』と呼ばれる小さく独立した単位で組み立てることができる。 コン…
