Reactを基礎から学んでアプリを作成してみよう 1/3
Reactの基礎
・Reactの強みは「JSX」
・BabelとWebpack
・create-react-app
・Reactコンポーネント
・Reactルーター
Reactとは
Faceook社が開発したUIライブラリで、UIを作るためのコンポーネントという概念が特徴的。※UI：UserInterface
フレームワークとは別物。WebのUIを作るためのライブラリ。オープンソース。
コンポーネントを組み合わせてWebの画面を作っていく
見た目：View
機能：Controller
REACTを使わない画面描画は、つまりHTML
どういうことかというと
ブラウザはHTMLという文書を画面に描画する（しくみ）
DOCUMENT OBJECT MODEL（DOM）＝HTMLにアクセスする入口となります。
コスト削減が求められる今の時代は、DOMを直接変更して、HTMLで再度描画するのはコストが高い
→ REACTで開発するのが効率的！
仮想DOMという解決策
ブラウザのDOMツリーをJAVASCRIPTのオブジェクトとして扱う
ブラウザに負荷をかけずに、JAVASCRIPTのエンジンのメモリを使う
効率の良い再描画（レンダリング）を行うことが重要
・DOMの状態をJAVASCRIPTで管理することができる
→ REACTのコンポーネントは「状態を持つUI」（機能を持った状態）
差分描画という考え方
仮想DOMで差分のみを描画することで、実際のDOMに反映される。
つまり、ツリー構造のひとつを変更することで、他の部分にも反映されるので時間短縮できて効率的であるということになります。
参考：HTTPS://WWW.YOUTUBE.COM/WATCH?V=XKSYF2AZNKQ
JSXとは
・JAVASCRIPTの拡張言語 ≠ テンプレート言語
・HTMLライクな記述＋JAVASCRIPの構文が使える
・JSXは最終的にREACT要素を生成する
なぜJSXを使うか？
・可読性が高い
・JSXの構文はブラウザは理解できない
書き方は違うけど、簡単に描けるので便利。
JSXは実際何をしているのか？
コンパイル時（ある言語で書かれたものを別のものに変換する）
・JSX→REACT.CREATEELEMENTの式に変換
・REACT.CREATEELEMENTを使った構文は、直観的ではない（わかりづらい）
→楽に記述することができるのがJSX
きちんと基礎を習得したいなら
公式ドキュメントも参考に（クリックで開く）
