読み終えて

Reactを本当に一から丁寧に教えてくれる本だった。1枚のペラページを改良しながら進んでいくやり方もいい。Reactの概念部分がコードとして具体的に見えて理解しやすかった。Amazonで低評価をつけている人もいるが、自分としてはReact入門者にとってすごくいい本だと思った。

「こんな本を読んだだけで、Reactをマスターできる人間なんて絶対にいない！」......わかりませんよ、一度読んだくらいでは。......この本は、......「入り口まで誘導する、導入書」です。ここから、Reactの本格的な学習が始まるのです。

最後にある言葉だが、これはとても真摯な言葉だ。

第1章 Reactを準備しよう！

いきなりReactの機能紹介に入らずに、htmlの1枚ファイルで仮想DOMなどの説明をしてくれる。とてもわかりやすい。

通常の技術書と違って話しことばに近く、かなりフレンドリーな印象を受ける。「覚えなくていいことですよ」といろんなところで強調して、覚えないと！　と焦って途中で詰まってしまうのを防いでくれている。

表示を更新したければ、またエレメントを作ってレンダリングし直せばいい

なるほど。

$ npx create-react-app react_app # reactアプリを作る

$ yarn start # 起動
$ yarn build # ビルドする。これをプロダクションにあげるとそのまま動く

ここも１枚のhtmlで丁寧にReactの挙動を確認した。覚えることもまとめられていてとても親切。

「Reactでは、仮想DOMのエレメントを作って組み込むのだ」ということだけ頭に入れておきましょう。

なるほど。

「JSXは、あらゆるところで使うことができる」ということを頭によく入れておきましょう。そして、エレメントを利用する必要がある場合は、「ここでJSXが使えないか」を常に考えるようにしましょう。

ふむふむ。

JSXは変数代入時にコンパイルされる

変数のみ更新してrenderしても表示は更新されない。

コンポーネントを作り、stateを管理したりつなげたり、Contextで共通の値を保持したりをしっかり確認できる。

setStateは、値を追加するだけで、削除はしません。この点は忘れないようにしましょう。

なるほど。

Reduxは状態管理ユーティリティ
- 値の保管場所は1つだけ
  - 「ストア」
Reducer
- 「どういうtypeの時にどんな値をreturnするか」
  - Reducer作成のポイント
- Reducerで呼び出す処理は常に新しいステートをreturnする
connectで渡されれるステートはthis.propsに組み込まれる
- 属性の値もいろいろ保管されている
  - 名前が被らないようにステートのマッピングで必要なものだけ取得するようにする

// ステートのマッピング
function mappingState(state) {
  return state;
}

this.props.dispatch({ type: 'DECREMENT' });

「ステートを用意する」→「レデューサーを用意する」→「ストアを用意する」という手順。「ディスパッチを呼び出す」→「レデューサーが呼び出される」→「アクションのtypeで処理を分岐」というアクションの流れ。これらをしっかりと頭に入れておきましょう。

なるほど。

アプリケーションは、極論するなら「用意されたデータ本体と、それを処理するための付け足し部分でできています。

データこそが本体。

Next.jsアプリ作成

npm install --save react react-dom
npm install --save next
npm install --save redux react-redux redux-thunk


<Account onLogined={this.logined}onLogouted={this.logouted} />