Reactを最初から

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

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

#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辞書](https://www.weblio.jp/content/Dispatch#:~:text=%E3%83%87%E3%82%A3%E3%82%B9%E3%83%91%E3%83%83%E3%83%81%E3%81%A8%E3%81%AF%E3%80%81%E8%A4%87%E6%95%B0%E3%81%AE,%E5%8B%95%E4%BD%9C%E3%81%95%E3%81%9B%E3%82%8B%E3%81%93%E3%81%A8%E3%81%AF%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%80%82)

###Dispatcher
すべてのデータを管理
中身は単なるEventEmitter
>#####EventEmitter
イベントを発火することができる機能で、主に「イベント発火」と「イベント受け取り」ができる
参考：[[Javascript] イベント駆動型の設計ができるEventEmitterに入門](https://www.yoheim.net/blog.php?q=20170103)

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の関数は本当に純粋関数？](https://postd.cc/httpstaltz-comis-your-javascript-function-actually-pure/#:~:text=%E4%B8%80%E8%88%AC%E7%9A%84%E3%81%AA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE,%E5%BE%97%E3%82%89%E3%82%8C%E3%82%8B%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%81%99%E3%80%82)

これをReducerが担う

##Reduxの構成要素
View,Action,Store,Dispatcherの概念はFluxを一緒。
これに加えてて**Reducer**がある。

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

```javascript
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の向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

####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**
→関数定義による

```javascript
const fun=(props)=>{}
```

**Class Component**
→クラス定義による

```javascript
class Cla extends React.Component{}
```

####違い
CLass Componentにはstateがある。
CLass Componentにはライフサイクルがある。
###Reactコンポーネント
Reactコンポーネント(設計図)をもとに作られた実体のことを**Reactエレメント**という。
クラスで言うならインスタンスにあたる。
###React.Fragement
2つの要素を並列して書けるようになる。


##データの受け渡し
```javascript
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の向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

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


###propsとして渡せる値
```javascript
<Element prop={}>
```
#####文字列を渡すとき
`{""}`で囲む
#####文字列以外を渡すとき
{}で囲む。
数値、オブジェクト、配列も同様。変数も。

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

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

RectDOM.render(
    <div>
        <Hello>坂本</Hello>
    </div>,
    document.getElementById("root")
)
```
参考：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

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

文字列だけでなく、複雑な子要素やReactエレメントも受け渡すことができる。
#####複数渡す
HTMLタグのプロパティを増やすだけ

```javascript
RectDOM.render(
    <div>
        <Hello name="name" mail="aa@bb.com"/>
    </div>,
    document.getElementById("root")
)
```
参考：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)


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

```javascript
RectDOM.render(
    <div>
        <Hello {...obj}/>
    </div>,
    document.getElementById("root")
)
```
参考：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)