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で開発するのが効率的!

html-tree

仮想DOMという解決策

ブラウザのDOMツリーをJAVASCRIPTのオブジェクトとして扱う

ブラウザに負荷をかけずに、JAVASCRIPTのエンジンのメモリを使う

効率の良い再描画(レンダリング)を行うことが重要

・DOMの状態をJAVASCRIPTで管理することができる

→ REACTのコンポーネントは「状態を持つUI」(機能を持った状態)

差分描画という考え方

仮想DOMで差分のみを描画することで、実際のDOMに反映される。

つまり、ツリー構造のひとつを変更することで、他の部分にも反映されるので時間短縮できて効率的であるということになります。

参考:HTTPS://WWW.YOUTUBE.COM/WATCH?V=XKSYF2AZNKQ

sabunbyouga

JSXとは

・JAVASCRIPTの拡張言語 ≠ テンプレート言語

・HTMLライクな記述+JAVASCRIPの構文が使える

・JSXは最終的にREACT要素を生成する

なぜJSXを使うか?

・可読性が高い

・JSXの構文はブラウザは理解できない

書き方は違うけど、簡単に描けるので便利。

JSXは実際何をしているのか?

コンパイル時(ある言語で書かれたものを別のものに変換する)

・JSX→REACT.CREATEELEMENTの式に変換

・REACT.CREATEELEMENTを使った構文は、直観的ではない(わかりづらい)

→楽に記述することができるのがJSX

きちんと基礎を習得したいなら

公式ドキュメントも参考に(クリックで開く)

11
Liked Liked
No Comments