最近Reactの勉強を始めたので、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！
Reactは『はやい』
仮想DOM（virutual DOM）
実際のDOMと対になる仮のDOMのことで、DOMよりもはやく作れるように設計されています。
Reactでは、情報を受け取ってもすぐにDOMを作らずに、仮想DOM（virutual DOM）を作ります。そして、変更前の仮想DOMと変更後の仮想DOMを比較し、変更のあった箇所だけDOMを再構築し常に最小のコストでWebページをレンダリングできるようになり、非常に高速に動作します。
しかし、もちろんReactが常に万能なわけではないようです。
複雑で動的なアプリほど向いているけど、HTMLが主役で動的な要素が少ないサイトや1日でコーディングが終わるようなサイトは、jQueryで特に困りません。大雑把ですが、作ろうとしているものが「記事（HTMLが9でJavaScriptが1）」なのか「アプリ（HTMLが1でJavaScriptが9）」なのかで分けるという指針でいいと思います。もちろんReactが向いているのは後者。普段の仕事内容によって「もう一生jQuery要らない」って人もいれば「一生jQueryしか要らない」って人もいていいと思います。
Reactにおけるトランスパイラーの役割
ReactではBabelというトランスパイラーがJSXを暗黙的にJavaScriptに変換してくれています。
詳しい内容はこの記事↓
ReactにおけるComponentとは
Componentを一言で表すと『再利用可能なUI部品』となります。
そしてこのComponentには以下の２個がある。
- Class Component
- Functional Component
Reactにおける『props』
propsとはComponentの属性のことです。
props.nameやprops.pageなどあるデータの属性に関して参照できるもののことを言います。
文字列、数値、配列、オブジェクト、関数などなんでも使用することができ、基本的には{}で括ってpropsを渡していきます。
Reactには仮想DOMが存在しており、その中でどのDOMが変更になったのか管理し、変更点のみを実際のDOMに反映していくという仕組みがあります。したがって、どのDOMが変更になったかを指し示すためにオリジナルのKeyというものが必要になります。ここではmapを使うことで得られるindexをKeyにすることでDOMの管理を行なっております。
振り返り
今回は個人的にReactの各項目で重要だと感じた事をまとめた物になります。