こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
私的備忘録です。
Webフロントエンド界隈
流行り廃りが早いと言われるが、ライブラリ、フレームワークに限るとトレンドに大きな変化はない、とこの書籍では述べています
Reactとは
Facebook社のjavascriptライブラリでWebUI作成に特化している。
| 用語 | 意味 |
|---|---|
| コンポーネント | 見た目と機能をひとまとめにしたもの |
特徴
Virtual DOM
HTMLやSVGの各要素へアクするためのAPIとも言えるもの。
ブラウザのDOMとは別にReact内で仮想のDOMを管理しているイメージ。
レンダリング
コードをブラウザへ描画するまでの処理の総称
ブラウザのパフォーマンス面向上にはDOM操作を減らすといい。
Reactはページ変化の際にまずはVirtual DOMをいじる。
これはブラウザのレンダリングに影響しないため、影響はない。
JSX
Virtual DOMの生成の効率化が図れるjavascriptの拡張言語
Flux
Fluxの構成要素
View
Reactのコンポーネントと同義
Action
単なるオブジェクト
Dispatcher
すべての流れを管理している。
Store
アプリ状態とロジックを保持している。
MVCのMに似ているが別物
Redux
特徴
3つの原則がある
Single source of truth
アプリ内のすべての状態を大きなオブジェクトとして管理することで、テストとデバッグがしすくなる。
State in read-only
アプリの状態はコンポーネントから参照できるのみで直接変更はできない。
これによりデータの流れが1方向になり、余計な副作用がない。
Change are made with pure functions
状態の変更は副作用のない純粋関数(入力が同じなら同じ出力を返す)で行われる。
構成要素
Reducer
状態変化のための関数
以下は本を読んでいるかどうかの状態を変化させる例。
整理のために、書籍のコードを引用しています。
function books(state = null, action) {
switch (action.type) {
case 'START_READING':
return {
...state,
status: 1,
}
case 'FINISH_READING':
return {
...state,
status: 2,
}
default:
return state;
}
}
引用：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
| 用語 | 意味 |
|---|---|
| books | React本体 |
| state | Reducerに変化させられるオブジェクト |
| action | どんな動作を行ったかを示すオブジェクト。typeプロパティにより何をしたかの文字列返る。 |
create-react-app
React開発を簡単に始められるツール
アプリケーション作成
$ create-react-app アプリケーション名
これを実行するとディレクトリが作成され、依存性ファイルもDLされる
アプリケ−ション起動
作成したディレクトリに移動して以下コマンド
$ npm start
Hello World
src/App.jsの適当なところに修正を加えて保存
保存した時点で自動でリロードされて反映される。
JSX
javascript拡張言語
これを使うことでjavascriptでHTMLが書ける
javascript内にHTML構造を直接かける
JSXの文法
スコープにReactが必要
JSXのタグはReact.createElement関数呼び出し時に変換されるため。
式の埋め込み
{}を使うことで式が埋め込める。
JSCを式として扱う
JSXタグはトランスパイル後にjavascriptオブジェクトに変換される。
津町JSXは変数へ代入、関数の引数として使うことができる。
属性の指定
HTMLと同じように記載できる
{}を使えば式が使える
属性名はcamelケースでかく
最初は小文字で次の単語は大文字
onclick
↓
onClick