Reactでデバックを効率良く行う方法
Reactとは?
Reactは、一般的に、Reactとreact-domのことを指す
参考記事
Reactのコンポーネント定義には、2種類ある。
結論、クラスコンポーネントが有能。関数コンポーネントを使う理由はない。
- クラスコンポーネント
- クラスコンポーネントは状態(state)を持つことができる。
- 描画内容を柔軟に変化させることができる。
- Reactに関するメソッドをクラスに実装することで、きめ細やかな描画制御が可能。
- 関数コンポーネント
- 関数コンポーネントは状態(state)を持たず、一切の制御ができない。
- 渡された値に従って特定の固定要素を描画するだけの、単なるプレースホルダでしかない。
- 要は、ただの「関数」
Hooksとは?
- ※HooksはすべてuseXXXという命名規則
- コンポーネントの中で呼び出されるHooksはいつなんどきでも必ず同じ順番で同じ回数呼び出される。
- ifやforの中にHooksを入れて「場合によってHooksの順番や実行回数が変わる」ことは禁止
- 早期returnによる実行回数のズレにも注意。
- 基本的には関数コンポーネントのトップレベルかつ最上部にHooksを書き並べておけばOK。
React入門#1
日本一わかりやすいReact入門#1...Reactの基礎知識
Reactとは?
- Facebook社が開発
- Javascriptのライブラリ(フレームワークではない)
- WebのUIを作成するためのもの
- React ≠ SPA
コンポーネントとは?
- 見た目(View)
- 機能(Controller)
Webの構造
- コンポーネントのツリー構造
Virtual Dom
DOMとは?
- Document Object Model
- = インターフェイス
- HTMLにアクセスする窓口
Virtual DOMとは?
- ブラウザのレンダリングとは別管理
- →効率良くDOM操作できる
- ReactのVirtual DOM操作
- React内でバーチャル的にDomを扱える
差分描画
- 変更されたVirtual DOMの"差分"を再描画する
- 変更された部分だけ、変更を描画するので効率良く表示できる。
JSX
- JavaScript内でHTMLっぽく書ける
- JSXがないと、React.createElementで書かないといけない
- ただし、可読性が良くないので基本はReact.createElementは使わない
- JSXがないと、React.createElementで書かないといけない
React入門#2
日本一わかりやすいReact入門#2...Reactに欠かせないJSXの解説
JSXとは?
- JavaScript内でHTMLを簡単に記述するための言語
- Facebookが開発
- Reactの公式ドキュメントはほとんどJSXで記述されている
- Reactでは業界標準
なぜJSXを使うのか?
- JavaScriptで操作するHTMLのDOM操作が多くなってくると、わけが分からなくなってきてしまう
- JSCを使うことで、可読性が良くなる
- トランスパイラ
- JSXはそのままではブラウザが理解できないので、実行できない。
- トランスパイラーを使って実行可能なJavaScriptに変換する必要がある
- その変換作業のことをトランスパイリング、変換することをトランスパイルと言う
- JSX → JavaScript(EC6)
- JavaScript(EC6) → JavaScript(EC5)
JSXの基礎文法①
- Reactパッケージのインストールが必須
- .jsxファイルの先頭で宣言する
JSXの基礎文法②
- HTMLの記述とほぼ同じ
- classはclassNameに変更
JSXの基礎文法③
- {}内に変数や関数を埋め込める
JSXの基礎文法④
- 変数名はすべてキャメルケースで記述する
- ケバブケースは利用しない。
JSXの基礎文法⑤
- 空要素は必ず閉じないといけない
React入門#3
日本一わかりやすいReact入門#3...create-react-appで環境構築しよう
日本一わかりやすいReact入門#3...create-react-appで環境構築しよう