React.jsについて勉強 #JavaScript

Reactとは

Facebookが開発、OSSとして公開しているJavaScriptライブラリ
React.jsは、あくまでUIを構築するためのライブラリ

Reactの特徴

Just the UI
MVCのVにあたるUIのみを構築するためのもので、他にどういったライブラリと組み合わせるかは問わない。
Virtual DOM
実際のDOMに対する操作を抽象化し、シンプルなコードでそれなりのパフォーマンスを提供する。VirtualDOMと画面のDOMを比較し、変化した部分だけを見つけ、Reactは変化した部分だけをアップデートするので速い！！
Data flow
一方向のデータフローにより、従来の双方向データバインディングを実現するコードよりも簡素でわかりやすい。
宣言型
状態に対しての「あるべき姿」を宣言するように定義
コンポネントベース
Reactではコンポーネントを組み合わせてアプリを構築することで、コンポーネントごとに状態を管理すると同時に、複雑なUIを一つの部品としてまとめる。
どこでも使用できる
Reactはクライアントサイドの描画だけでなく、Nodeを使ったサーバーサイドレンダリングに対応している他、ReactNativeというモバイルアプリ開発フレームワークを利用することで、モバイル開発にも対応している。

React周りの用語

Virtual DOMとは？

メモリ上に保存された、DOMのコピー。ユーザーイベントやサーバーイベントによりデータ更新が発生し、DOMを再描画する必要が出た場合、画面のDOMではなくVirtualDOMを更新する。

コンポーネント

機能を兼ね備えたUIの部品。

以下は関数型コンポーネントとクラス型コンポーネントの例

関数型コンポーネント

function Greeting(props) {
  return <h1>Hello, {props.name}</h1>;
}

クラス型コンポーネント

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Props

コンポーネントを生成するときに親から渡されるオブジェクト。コンポーネントが画面から取り除かれるまで、不変の値を保持する。
propsの値は親Componentで管理するので、決してReactのComponentの中で変更してはいけない。
これを守ることで、ReactのComponentは同じpropsを渡される限りは、必ず同じレンダリング結果になるので、immutableなComponentとして扱えることになる。

State

コンポーネント内で保持される、プライベートなオブジェクトで、可変の変数を保持する。
例:クリックした際に数字をカウントアップしたい際など
親Componentでは値の変更はどうするの、というとこれはstateという、Componentの状態を保持するための変数に適用

setStateメソッド

stateオブジェクトのパラメータを更新させるためのメソッド

Flux

クライアントサイドのWebアプリケーション（ユーザーインターフェース）を開発するためのアプリケーションアーキテクチャ

JSX

HTMLに見える部分<div>...</div>的な部分(XMLなので閉じタグが必要)
基本的にはHTMLを変数化している

Babel

ES6を現状のJavaScriptに変換するツール

ESLint

JavaScriptの文法チェックツール

webpack

ビルドツール

webpack-dev-server

webpackの設定g￥ファイルを読み込みJSやCSSのソースファイルに変更があるとビルドを行い、結果をブラウザにリアルタイムで反映してくれる便利ツール

コンポーネント

先ほども説明した通り、コンポーネントは機能を兼ね備えたUIの部品である。

コンポーネントライフサイクル

Reactコンポーネントのライフサイクルには、大きく分けて3つのフェーズがあeactコンポーネントのライフサイクルには、大きく分けて3つのフェーズがある

Mountingフェーズ
コンポーネントが生成されてDOMに要素が挿入される時
Updatingフェーズ
PropsやStateの値に変更が発生した時
Unmountingフェーズ
コンポーネントがDOMから取り除かれる時

componentWillMountメソッド:初期化時と属性変更時に呼ばれる
renderメソッド:描画時

属性値

コンポーネントには通常のDOMと同様に属性値を定義することができる

<Rect num={1} bgcolor='#e02020' />

CSS Style

JSX内でスタイルを渡すにはキャメルケースで書く必要がある

// CSS スタイルはキャメルケースでプロパティを書く
    this.rectStyle = {
      background: bgcolor,
      display: 'table-cell',
      border: '1px #000 solid',
      fontSize: 20,
      width: 30,
      height: 30,
      textAlign: 'center',
      verticalAlign: 'center',
    }

React Tutorial

React TutorialでComponentを別ファイルに分けてやってみた

参考

https://app.codegrid.net/entry/react-1
https://codezine.jp/article/detail/9878