React学習メモ

最近のWeb開発わからん...って思って勉強してる。Reactは公式のチュートリアルやドキュメントがわかりやすく、そちらを進めると入門しやすかった。

チュートリアルやったレポジトリ

https://github.com/shibayu36/react-tutorial/tree/84f44577d4bc29efe41ca0ef147092ca6d04233b

今のところ、写経した + eslintの設定してみたくらい。

メモ

• React – ユーザインターフェース構築のための JavaScript ライブラリ
  • 基本的にpropsで不変な情報を、stateで可変な情報を扱う。コンポーネントをネスとしていき、アプリを作っていくイメージ。jsxで定義されるコンポーネントのフックを利用することで、いい感じに他のツール(例えばmarkdown変換)と連携できる。

• Getting Started – React
  • ひとまずチュートリアルを終えた。1ページのアプリケーションを作る概念は理解したつもり。eslintを使ってみるとかした。一方、どのように綺麗にコンポーネント設計するか、テストをどうするか、複数ページのspaをどう作るかなど、まだ腹落ちしていないところは多い。次はmain conceptあたりを流すとよいか。

• コンポーネントと props – React
  • コンポーネント分割とは、パーシャルテンプレートの分割と概念はほぼ一緒と考えたら良いと思った

• state とライフサイクル – React
  • コンポーネントにはcomponentDidMountとcomponentWillUnmountインターフェースがあり、これを実装することで例えばマウント時にsetIntervalしてアンマウント時にsetIntervalを解除することも可能
  • state の更新は非同期に行われる可能性がある -> ので、state内の情報を再利用してstateを更新したいときはsetStateにcallback関数を再利用する
• 条件付きレンダー – React
  • コンポーネントのイベントハンドラに渡したいメソッドは、thisにbindしておく必要がある
• フォーム – React
  • フォームのような状態を持つdom要素には、valueなどにそもそもstate情報をわたしておけば、stateをマスター情報として使える
  • 移行などでそれが難しい場合は非制御コンポーネントというのが使える
• state のリフトアップ – React
  • 複数コンポーネントに必要な状態は親コンポーネントに持たせ、propsで引き渡す。アクションが子コンポーネントで行われるならイベントハンドラも同様に渡す
• コンポジション vs 継承 – React
  • props.childrenを使えば、テンプレートのwrapperのようなことができる
  • propsにreact componentを渡すこともできる

• React の流儀 – React
  • Reactを使った設計においては以下のような手順で作っていくと良い？
    • モックを作り
    • コンポーネントの階層構造を考え、一度静的なバージョンを作成する
    • どのような状態があるか決定し、どのようなアクションで状態が変化するか決定する
    • 状態を持たせるコンポーネントにstateを作成
    • アクションに対応する関数を用意し、その中で状態を変更する。アクションが実際に行われるコンポーネントまで引き渡す

今後

もうちょっと手を動かしてみるつもり。やりたいこととしては

• チュートリアルをTypeScript化
• チュートリアルにテストをつける
• 最近のはてな教科書やってみる