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

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

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 Reactをめぐるフロントエンドの歴史
• りあクト！ TypeScriptで始めるつらくないReact開発 第8章 何はなくともコンポーネント

りあクト！ TypeScriptで始めるつらくないReact開発 Reactをめぐるフロントエンドの歴史

ざっくりサマリー

他のフレームワークとの比較

• フロントエンド技術世代

  • 第1世代: DOM操作中心のユーティリティライブラリ
  • 第2世代: MV*アーキのフレームワーク
  • 第3世代: コンポーネントベースのフレームワーク

• Angular

  • 学習コストが高い
  • フレームワーク特有の記述を強いられる
  • TypeScriptと密結合
  • フルスタックフレームワークなので,技術選定しなくていいのがメリット
  • 良くも悪くも変化しにくい → 保守性は高い！？

• Vue.js

  • コミュニティベース
  • AngularJSの派生 不要最低限の機能に絞った
  • いろんなところをつまみ食い → Progressive Framework
  • 一貫した思想がない → 大規模になるとコンポーネント,ロジックの切り分けに悩むことが多い

• Web Components

  • AMPはWeb Components上に構成されている
  • Web Componentsの理想･思想が正しい形で発展させたのは結局React

りあクト！ TypeScriptで始めるつらくないReact開発 第8章 何はなくともコンポーネント

ざっくりサマリー

コンポーネントのメンタルモデル

• ReactのコンポーネントはJSの関数みたいな感じ

  • propsを引数としてうけ,ReactElementsを返却する関数
  • 関数コンポーネントっていうくらいだもんね
• コンポーネントが状態を持つこと → 『state』

• props,stateどちらかが変わるとReactElementsも変わる

  • propsとstateを監視していればレンダリングに差分が発生するかわかる

    コンポーネントと Props

• stateは極力コンポーネントに持たせないようにする
• コンポーネントにとって一番重要なのはprops
• コンポーネント:props ≒ 関数:引数

• stateを極力持たないようにすれば純粋関数に近づく

  クラスコンポーネントで学ぶ State

• クラスコンポーネントのイケてないとこ

  • thisがわかりにくい
  • コンパイルなどで最適化が困難,動作も不安定
  • ライフサイクルメソッドを使うと関連機能でもコードがバラバラになり可読性がわるい
  • 状態の分離が難しく,ロジックの再利用がしにくい

• 状態を直接書き換えてはいけない

  • setStateメソッドを使う
  • setStateメソッドの使い方2種
  • 引数に変更したい要素名をキーに,値を更新する値にしたオブジェクトを与える
  • 変更前stateとpropsを引数にして更新stateを返す関数
• イベントハンドラはイベントが起きたときに実行したい関数を設定する

まとめ

個人開発の進捗が良くないので基礎に立ち戻ってりあクト!!
ReactもTypeScriptもFirebaseもでいろいろ一気に取り込みすぎて混乱してました。
わけわからなくなったらわかるところまでもどる。
ということでもう少しりあクトを読み進めてから再度挑戦していきます。

それではまた明日。