個人開発

Reactの知識のまとめ【随時更新】

Reactでデバックを効率良く行う方法

Reactとは？

Reactは、一般的に、Reactとreact-domのことを指す

参考記事

最近Reactを始めた人向けのReact Hooks入門

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は使わない

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で環境構築しよう