React の勉強会に行ってきた - ITエンジニア日記～NO SKILL, NO LIFE～

Reactの勉強会に参加してきたので、勉強してきたことをまとめてみました。まだまだ理解が追い付いていないところがあるので、間違っているところまあるかもしれませんが、ご容赦ください<( *)>

FacebookがOSSで公開している、WebのUI（ユーザーインターフェース）を作るためのJavaScriptライブラリです。

ReactはJavaScriptのフレームワークだと（勝手に）思ってたのですが、ライブラリだそうです。へ～、一つ賢くなった(oﾟvﾟ)ノ
ライブラリだから、基本的にインポートするだけで使えるって。

Reactには大きな特徴が３つあります。

ReactはMVCモデルでいうところのViewを担うライブラリだよってこと。つまり、アプリ全体をビジネスロジックと画面表示で分けたうちの、画面表示のほう。

シンプルなコードでパフォーマンスもよい＝ 設計と速度が両立するかららしい。下の例のように画面が更新されてHTMLが変更された時を考える。

【従来（Virtual DOMを使用しない場合）】
基本的に画面が更新されたときは毎回DOMを一から作成してブラウザに描画する。
一部分が変わるだけでも、更新がかかるたびに画面全体を再描画するため遅くなる。
下の例だとHTML全体が更新される。

【Virtual DOM】
更新前後のHTMLを比較して差分を求めて、その差がある部分だけをDOMにPUSHすることで更新する。
差分しか更新しないため描画が早い。
下の例だと p タグの中だけが更新される。

<div class="hoge">
    <p>Hello World!</p>
</div>

　↓

<div class="hoge">
    <p>Hello React!</p>
</div>

Reactではデータフローが単純・簡潔らしい。
上位のコンポーネントから下位のコンポーネントへデータが流れていくだけ。逆方向にデータが流れることはないらしい。
額方向にデータが流れていたら、それは設計ミスを疑った方がいいとのこと。

クラスや関数で定義される、Reactでの部品。コンポーネントを組み合わせて画面が作られる。

コンポーネントにデータを渡すもの。
親のコンポーネントから、子のコンポーネントに渡される情報。

データ管理用の入れ物。
stateに自身のコンポーネントで使用してる情報が保持される。

今回の勉強会では「CodeSandBox」という、ブラウザ上でReactが書けるオンラインエディタを使用しました。

勉強会では簡単なToDoアプリを作成しました。
エディットボックスに入力された文字列が、画面下部のToDoリストに追加されていくというアプリです。
ソースはGitHubにアップロードしてあります。

コンポーネント、props、stateをそれぞれ使用しています。

React勉強会で勉強してきたことをまとめてみました。React初心者ということで、まだまだ理解ができていないとこもあります。今回の勉強会を機に、これから少しずつ勉強をしていこうと思います。