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