『React Explained』の感想 – React初学者にお薦めのチュートリアル本 –

books Books
Books

React Explained: Your Step-by-Step Guide to React』を読了した。

Manningから今秋出版予定の『React Hooks in Action』のアーリーアクセス版を読む前に旧来のReactをきちんと復習しておこうと思い、Kindle版で購入。

本書の特長

  • 紙版で303ページと比較的コンパクト。
  • 2019年3月出版なので、情報は比較的新しい(ただしHooksは本書では取り扱わない)。
  • 演習問題やチュートリアルを手を動かしながら進めていく形式。

本書の構成

第1部(1章〜3章)は、Reactを学ぶための前提となるJavaScriptの知識が簡単に説明されている。主に、アロー関数などのEcma Script 2015以降の新言語仕様に関して。

第2部(4章〜15章)では、Reactの基本知識が順番に説明されている。また、各章毎に練習問題が付いている。
具体的には以下の項目についての説明がある。

  • Reactの要素とコンポーネント
  • JSX
  • create-react-app
  • props
  • state
  • コンポーネントライフサイクル

第3部(16章〜27章)は、第2部で学んだ基礎知識にReact Routerなどのライブラリを加えて、簡単なSPAのブログアプリを開発し、環境にデプロイするまでがチュートリアル形式で説明されている。
最終的には、以下のようなアプリケーションを開発し、Netlifyにデプロイするところまでを行う。

第3部で利用する主なライブラリやサービスは以下である。

  • React Router
  • Quill Editor (react-quill)
  • react-simple-storage
  • Firebase Database
  • Netlify

本書の読み方

実際に手を動かしながら読み進めることを前提にした本なので、面倒がらずに手元の環境で写経を行うことをお勧めする。
ただし、Reactの公式チュートリアルなどで既に基礎部分については十分に理解したという方は、第2部まではさらっと流して、第3部のチュートリアルから本腰を入れて取り組むのはありかもしれない。

第3部のチュートリアルを一通りこなせば、Reactを使ってちょっとしたSPAのアプリ開発にトライできる状態になっているはずだ。

本書ではカバーされない内容

以下のテーマは本書の範囲外なので、本書で基礎を学んだ後に、他の書籍やWebの記事などを参考に別途学んでいく必要がある。

  • Styledコンポーネント
  • 高階コンポーネント(HOC)
  • Redux
  • React Hooks

27章に関する補足

27章「React Project Step #11. Refactoring Your Code」では一旦作成したブログアプリに対するリファクタリングを行うのだが、僕が読んだ時点のKindle版ではコードがちゃんと動作しない箇所があったので参考までに記しておく。

ユーザーの認証状態に応じた条件分岐ロジックを共通化するために以下の関数が定義されている。これは、認証済みならば指定したコンポーネントを表示、そうでなければ/へリダイレクトする処理である。

renderAuthRoute = (Component, props) => (
   this.state.isAuthenticated ? (
     <Component {...props} /> ) : <Redirect to="/" />
)

JSX化の何箇所かを上記メソッド呼び出しに置き換えるように指示がされており、/loginに対するルーティングの箇所も以下のように修正するよう言われる。

<Route
   exact
   path="/login"
   render={() =>
     this.renderAuthRoute(Login, {
       onLogin: this.onLogin
     })
   }
 />

しかしながら、/loginは他のルーティングとは異なり、認証済みでなければ指定したコンポーネント(Loginコンポーネント)を表示し、そうでなければ/へリダイレクトさせるべきである。

書籍のとおりに実装するとログアウト状態からログインフォームを表示できない状態に陥ってしまった。
そのため、renderAuthRoute関数は以下のように修正した。

  renderAuthRoute = (Component, props, isLogin) => {
    if ((isLogin && !this.state.isAuthenticated) || (!isLogin && this.state.isAuthenticated)) {
      return (
        <Component {...props} />
      );
    }
    return isLogin ? <Redirect to="/" /> : <Redirect to="/login" />;
  }

ログインページへのアクセスかどうかのフラグを引数に追加し、場合分けを行うように変更した。
それに合わせて/loginへのルーティングの箇所にも対応する引数を追加した。

            <Route
              exact
              path="/login"
              render={() =>
                this.renderAuthRoute(Login, {
                  onLogin: this.onLogin
                }, true)
              }
            />

僕の環境ではこれで期待通りに動作するようになった。

評価 :4/5。

コメント

タイトルとURLをコピーしました