first chapter -概要-

座学式React勉強会に丸一日、勤務時間を利用して参加させて頂いた。
参加した時の知見をメモする。

この時点での自分のレベル

業務ではReact環境でFE業務をしているものの、react-templatesというライブラリを使用しているためほぼHTML感覚でしか書いていない
自己勉強で一通り基礎を学んでからすっかり触っていない

　chapter01 - Reactってどんな時に使うと嬉しいの？ -

webアプリケーションを実装する上で、複雑化していってしまうソースコードをより簡潔に書けるようになる。

ちなみに、javascriptに限らず
良いソースコードとは、「スッキリ、カンタン」なもの。
未来の自分が、他のチームメンバーが、
読んで、理解して、アップデートするまでに掛かる時間が短ければ短いほどNiceCode!

って本に書いてありました。笑
（プリンシパルやリーダブルなど）

　chapter02 - WebAppとは -

ユーザーが、Webを「問題解決をする場所」とみなす。
WepAppはユーザに寄り添う必要があり、ユーザと対話をしなければいけない

chapter03 - jQuery vs Reactで todo app -

デザインを得意とするjQueryとReactで同じtodoアプリを作ったらどれくらい違うのかを実際に感じてみる。

===

01 jQueryのコード
問題点：
複雑さを感じ、見通しが悪い
どこにどう影響が出るのか、わかりにくく、保守しにくい。

===

02 MVC設計にしてみる

1. model: アプリケーションデータ、ビジネスルール、ロジック、関数
2. view: グラフや図などの任意の情報表現
3. controller: 入力を受け取りmodelとviewへの命令に変換する

https://ja.wikipedia.org/wiki/Model_View_Controller

問題点： controllerが肥大する
ユーザとの対話が全てcontrollerに集まる
手動によってデータとUI、stateが更新されるため
=> 自動対応づけが必要になる

Reactで解決しよう！

chapter04 - Reactで todo app -

Reactは2つの側面からWebapp開発をカンタンにする

1.UIをパーツとして定義・宣言できる
2.パーツの状態から実画面を生成する

UIパーツをコンポーネント（クラス）として作成できる
=> コンポーネントを1つ作れば、何度でも使いまわせる

state => 値の保存場所
props => 親compから子compへstateや関数などを渡せる仕組み

Reactだとカンタンになる理由は
stateを更新するとUIが自動的に変化する => jQueryで行なっていたc=>vの逐次更新が不要になるから

Last chapter

（進捗）
https://codesandbox.io/s/2p2p6l9yj

その他得た知見

.js

// stateの値を直接変更すると怒られる

// NG
this.setState(
  {todos: this.state.todos.push(todo)}
)

// OK
this.setState(
  {todos: [...this.state.todos, todo]}
)

// ・・・とは↓
const a = [1,2,3]

const b = [...a, 4]

// b -> [1,2,3,4]

.js

// submitで遷移させない例
handleSubmit(e){
  e.stopPropagation()
}

感想

Reactは個人でも触っていたけど、改めて認識の齟齬などを正せた良い機会だった。
あとこういう周りの人と足並み揃えて、始めるのって
周りがもう終わったとか聞こえたりすると
自分て遅いのかなって不安になって焦って余計に手がつかなくなったりする感覚懐かしかった。

本当普段から別に書けない方だけど
通常の1/4くらい知能下がってた。
精神の弱さが一層気になった。
慣れるしかないですね。機会を増やしたいです。