Reactを最初から

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

ただの個人的アウトプットです

Reactとは

WEBのUI作成に特化したjavascriptライブラリ

特徴

• Virtual DOM
• JSX

Virtual DOM

ブラウザのDOMとは別のDOMをReactが保持している仮想DOM。
ページを変更するときはまずReact側のDOMを変更してから、対応部分のブラウザのDOMを変更する。

こうすることで最小限の操作でDOM操作ができる。

JSX

javascriptの拡張言語。

javascriptファイル上にHTMLを書ける。
直書きするよりもHTMLを書く感覚で書ける。

Flux

アプリが大きくなるとMVCが複雑化してくる。
Fluxは複雑なアプリになっても不整合が起きづらくなる。

Fluxの構成要素

名前	説明
View
Reactコンポーネントと同義
つまり見た目と機能のまとまり

Action

オブジェクト。
Actionをdispatchすると、ActionがStoreに渡される。

#####dispatchとは
ディスパッチとは、複数のプログラムを実行中のマルチタスクオペレーティングシステムにおいて、プログラムに実行権を渡すことである。
参考：Dispatchとは何？ Weblio辞書

Dispatcher

すべてのデータを管理
中身は単なるEventEmitter

#####EventEmitter
イベントを発火することができる機能で、主に「イベント発火」と「イベント受け取り」ができる
参考：[Javascript] イベント駆動型の設計ができるEventEmitterに入門

Dispatcherを通してActionがStoreに送られる

Store

アプリの状態(state)とロジックを保持
Actionを受け取ってアプリの状態を変化させる。

これが変更されるとViewが変更を感知して再描画される。

Redux

Fluxアーキテクチャの一種

特徴

Reduxには以下の3原則がある

●Single source of truth

アプリのすべての情報を一つのオブジェクトにして管理。

●State in read-only

アプリの状態を直接変更はできない。
Actionをdispatchすることが唯一の変更方法。

●Change are made with pure functions

状態の更新は純粋関数が行う

#####純粋関数
同じ入力値を渡すたび、決まって同じ出力値が得られる
参考：そのJavaScriptの関数は本当に純粋関数？

これをReducerが担う

Reduxの構成要素

View,Action,Store,Dispatcherの概念はFluxを一緒。
これに加えててReducerがある。

Reducer

状態変化のための関数。
送られてきたActionの内容によって状態を変化させる。
以下は本を読んでいるかどうかの状態を変化させる例

function books(state = null, action) {
    switch (sction.type) {
        case 'START_READING':
            return {
                ...state,
                status: 1,
            }
        case 'FUNCTION_READING':
            return {
                ...state,
                status: 2,
            }
        default:
            return state;
    }
}

引用：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

boooks

Reducer本体

引数	説明
第1引数	state。
第2引数	action。動作をした文字列のtypeプロパティが生えている。

Reducerでの注意点

Reducerを変化させたときにViewで差分比較したい時がある。
配列とオブジェクトのコピーは値渡しで行う。
値渡しはObject.assign()を使う。

create-react-app

facebook社提供の開発ツール。
ビルド設定なしでReact開発を始められる。

アプリ作成

$ create-react-app アプリ名

アプリ起動

作成したアプリのディレクトリに移動して

$ npm start

Reactコンポーネント

コンポーネントの種類

以下の2つ

Functional Component
→関数定義による

const fun=(props)=>{}

Class Component
→クラス定義による

class Cla extends React.Component{}

違い

CLass Componentにはstateがある。
CLass Componentにはライフサイクルがある。

Reactコンポーネント

Reactコンポーネント(設計図)をもとに作られた実体のことをReactエレメントという。
クラスで言うならインスタンスにあたる。

React.Fragement

2つの要素を並列して書けるようになる。

データの受け渡し

const Hello = (props) => {
    return <div>こんちわ{props.name}</div>
}

ReactDOM.render(
    <div>
        <Hello name="A" />
        <Hello name="B" />
        <Hello name="C" />
    </div>,
    document.getElementById("root")
)

参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

この場合はpropsという引数を使うのが一般的
propsはオブジェクト型。
nameプロパティを持っている。

propsとして渡せる値

<Element prop={}>

文字列を渡すとき

{""}で囲む

文字列以外を渡すとき

{}で囲む。
数値、オブジェクト、配列も同様。変数も。

children

特別なpropsとしてchildrenがある。

const Hello = (props) => {
    return (<div>
        こんちわ{props.children}
    </div>)
}

RectDOM.render(
    <div>
        <Hello>坂本</Hello>
    </div>,
    document.getElementById("root")
)

参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

このコードだとHelloで囲まれた坂本という文字列がprops.childlenに渡される。

文字列だけでなく、複雑な子要素やReactエレメントも受け渡すことができる。

複数渡す

HTMLタグのプロパティを増やすだけ

RectDOM.render(
    <div>
        <Hello name="name" mail="[e-mail]"/>
    </div>,
    document.getElementById("root")
)

参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

スプレッドを使って簡単にかける

RectDOM.render(
    <div>
        <Hello {...obj}/>
    </div>,
    document.getElementById("root")
)

参考：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで