【超初心者向け】Reactの概要をおさえる【3分解説】

2021年4月11日

誰得かわかりませんが、Reactを触り始めた者として現状の理解を簡単にまとめます。

Reactを今から始めてみようとされている方の一助になればよろしいかと。

Reactとは

・JavaScriptライブラリ。
※比較されやすいVue.jsはフレームワーク。

ライブラリ・・・使いたい部品が入ってる道具箱

フレームワーク・・・全体の構成された枠組みに自分の実装内容を埋め込んでいく

・React ≠ SPA
既に稼働しているシステムの一部に組み込むことも可能。

SPA（シングルページアプリケーション）

1つのWebページ内でコンテンツを切り替えることで、ページ遷移の必要がなく、ブラウザの挙動に縛られない表現を可能にする。

・VirtualDom（仮想DOM）
Reactで管理するDOM。DOMの書き換え時、レンダリングの負荷を抑えてくれる仕組み。

DOM・・・HTMLにアクセスするための窓口。HTML構造、見た目の変更。

JSX

・Javascript内でHTMLを簡単に記述するための言語
・Facebookが開発
・Reactの公式ドキュメントはほぼjsxで記述
・Reactではデファクトスタンダード（業界標準）

なぜ使う？

可読性が高いから。

どうやって使う？

トランスパイラでブラウザが理解できるように翻訳する

例）
JSX→Javascript（EC6）
Javascript（EC6）→Javascript（EC5）
Babel,CoffeeScript,TypeScript…

※もしjsxがなかったら、すっごいコーディングが大変。分かりづらい。

JSXはタグでラップする必要がある。
→divでも良いけどdivの多用は避けたい。ださい。
→React.Fragmentで代用する

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

基礎文法

・import React from “react" でインストールが必須
・HTMLとほぼ同じ（classはClassNameなどの違いはある）
・{}内に変数や関数を埋め込める
・変数名はすべてキャメルケースで（className,fooBarなど）
※javascriptは変数でケバブは使えない

構築

npx create-react-app my-app

必要なもの
・node 8.1以上
・npm 5.6以上
※これらを入れるために、homebrewを使ってnodebrewをインストール
※他のプロジェクト構築のやり方だと、トランスパイラのbabelやハンドラーのwebpackの設定が必要。これが大変

homebrew・・・macOS用のパッケージマネージャー

nodebrew・・・nodeをインストール、バージョンの切り替え

ディレクトリ構造

src：コンポーネントを作るjsファイル
public：htmlファイルや設定ファイル
build：本番環境用のファイル

package.jsonにあるコマンド

npm run build：srcとpublic内のファイルを1つにまとめて（バンドル）buildディレクトリに出力
npm start：ローカルサーバを起動してReactアプリを確認できる（JSXなどをコンパイラしている）
npm run eject：babelやwebpackの設定を変更したい場合のみ必要

Component

なぜ使うのか？
・再利用するため
・分割統治するため
・変更に強くするため

Componentの種類

Class Component（クラスコンポーネント）

・React.Componentを継承
・ライフサイクルやstateをもつ
・propsにはthisが必要
・renderメソッド内でjsxをreturnする
※最近のReactの潮流としては使わない方向

Functional Component（ファンクショナルコンポーネント）

・ES6のアロー関数で記述
・Stateを持たない（stateless）
・propsを引数に受け取る
・jsxをreturnする
※React16.8以前までは関数コンポーネントでstateをもてなかった
※Hooksの導入で関数コンポーネントでStateを管理することが可能に。公式も推奨。

State

状態（State）とは

・コンポーネント内で管理する変数
・ローカルステートと呼ばれる
・propsとして子コンポーネントに渡せる
※redux:グローバルでもてるstateを管理できる

なぜstateを使うのか

・render()内では値を変更してはいけない
※再レンダーのきっかけになる。VertualDomが書き換わる。Renderの中でstateの変更をする処理を入れてしまうとStateの変更が無限ループに陥る。
・setState()で値を変更する
・stateの変更 = 再レンダーのきっかけ→ページリロードせず表示を切り替える
・Class Componentを使うことが前提
・constructor()内で宣言
・オブジェクト型で記述