進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 1/14 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 未完了
• React 公式チュートリアル 未完了

今日やったこと

• React 公式チュートリアル

React 公式チュートリアル

• なにはなくともcreate-react-app

• createElement()は使わずにJSXが基本

  • JSXを使えば独自コンポーネントと組み合わせが可能
• コンポーネント内の状態(state)はコンストラクタで初期化してstateで表示,setStateで上書きする

• 複数の子要素からデータを集めたり 2 つの子コンポーネントに互いにやりとりさせたいと思った場合は、代わりに親コンポーネント内で共有の state を宣言する

  • 子コンポーネントは自身で状態を持たないようにして,イベントを親に伝える
  • 親の方で状態を持ち子コンポーネントからイベントを伝えられたらそこで状態を更新する
  • このときの子コンポーネントは制御されたコンポーネント(controlled component)と呼ぶ
• イミュータビリティ(immutability) → 不変性

• イミュータブルだと何が嬉しいのか

  • 複雑な機能が簡単に実装できる
  • 変更の検出
  • Reactmの再レンダーのタイミングの決定

• 関数コンポーネント

  • stateを持たないコンポーネントを簡単に書ける
  • クラスコンポーネントとの使い分けはstateを持ってるかどうかでいいのかな。。。？

• stateのリフトアップ

  • 子コンポーネントの状態(state)を親コンポーネントで管理する
  • Reactではよくあるリファクタリング
  • 親が状態を持つから子のレンダリングを
• 兄弟要素のアイテムを区別するためにKeyプロパティを与える
• 動的なリストを構築する場合は正しいKeyを割り当てるようにする

• Keyが指定されていない場合は配列のインデックスがデフォルトで使用される

  • この場合,並び替えたり削除したり挿入したらいする際に問題になる可能性がある
  • 配列のインデックスをKeyにするのはやめたほうがいい
• Keyはコンポーネントとその兄弟間で一意であればOK

まとめ

さすが公式チュートリアルという感じで基本的なpropsとstateの取り扱いを手を動かして学べました。
順序だてて,すこしずつリファクタリングしていくのでわかりやすかったです。
すこしずつReactわかってきた気がしますw
Reduxに背伸びする前に基礎をしっかり身につけてからだなと思いました。

それではまた明日。