【技術書まとめ】『React.js&Next.js超入門』を読んだまとめ

読み終えて

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

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

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

第1章 Reactを準備しよう！

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

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

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

なるほど。

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

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

第2章 JSXをマスターしよう！

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

• エレメント
  • HTMLの各タグ
    • divやpなど
• ノード
  • HTMLのあらゆる要素を扱うオブジェクト
    • 「開始タグ」、「終了タグ」、「中のコンテンツ」など

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

なるほど。

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

ふむふむ。

• リスト表示にはmapを使う

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

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

• 覚えること
  • JSXはキャメルケース
    • onClickなど
  • タグは単発でも閉じる
    • <input />
  • 変数は{}に入れられる
  • ReactDOM.render(el, dom)でレンダリングする
    • 変数だけ変えても更新されない

第3章　コンポーネントをマスターしよう！

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

• コンポーネント名は大文字で始める
  • Welcome

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

なるほど。

• オブジェクトや配列を使うとき
  • プロパティとして値を用意（data = []）
  • setStateで設定する
• Context
  • 「すべてのコンポーネントで同じ値を設定し、一斉に変更できる」
  • テーマ切り替え

第4章 Reduxで値を管理しよう！

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

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

• dispatch
  • Reduxにアクションを送る
    • Reducerが呼び出される
      • 必ずtypeという値を用意する

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

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

なるほど。

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

データこそが本体。

• export
  • 最後にエクスポートして使えるようにしておく
• Redux Persist
  • オブジェクトは正しく保管できない時がある

1. Reducerの書き方を覚える
2. Storeの使い方を覚える
3. ReduxPersistの組み込み方を覚える

第5章 Next.jsでReactをパワーアップしよう！

• Reactは使っている間、常にどこかが書き換わっている
  • クライアントサイド・レンダリング
• Next.js
  • 「HTMLファイルを使わずにWebアプリを開発する」
  • pagesフォルダが一番重要
    • ページ内容を用意する
• レイアウトの基本構成
  • Layout
  • Header
  • Footer
  • Style
• ReduxをNext.jsで使う
  • redux-store.js
  • app.js
  • を用意する

第6章 Firebaseでデータベースを使おう！

• firebaseのonは非同期
  • 「終わったらこれを実行しておくように」という処理
• firebaseの項目はパスで指定できる

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} />