EY-Office ブログ

「作りながら学ぶ React 入門」サポートページに新機能・機能変更を追加しました

「作りながら学ぶ React 入門」サポートページに新機能・機能変更 を追加しました。

作りながら学ぶ React入門 も出版されてから既に2年近く経ち、Reactも新機能の追加や変更があり、サポートページのソース・コードや手順の更新、正誤表では対応出来ない部分が出てきたので。新機能・機能変更 というコンテンツを追加しました。

作りながら学ぶ React入門

現在、掲載しているのは、

Hooks (useState, useEffect)

現在Reactの話題は Hookだと思います。 Reactにはコンポーネント作成する方法として、 関数 とComponentを継承した クラス の2つがありましたが、関数 ではstateやライフサイクルメソッドが書けない制限がありました。

しかし Hookが導入された事で、この制限がなくなり。今後はほとんどのコンポーネントが書きやすい 関数 になると思います。Hooks (useState, useEffect) ページでは 作りながら学ぶ React入門 の中にある jyanken, weatherのコードをHooksを使ったものを掲載しています。また、ES2017で追加された async/awit を使て非同期通信のコードを簡素化しています。

ライフサイクルメソッドの変更

React 16.3でライフサイクルメソッドが大きく変更されました。

現在リリースされている React 16.X ではまだ旧ライフサイクルメソッドが動作しますが、バージョン 17.X では一部のメソッドが廃止され、互換性の無い新しいメソッドが追加される予定なので変更点を ライフサイクルメソッドの変更 にまとめました。

Redux

Reduxが登場した時、そのコンセプトの素晴らしさから Reactの開発は絶対にReduxを使うべきだという風潮がありましたが、作りながら学ぶ React入門 ではReactのシンプルさを損なう可能性のある Redux は意図的に取り上げませんでした。 ただし、大規模な React 開発には Redux は必用だと思われるので、Reduxを導入したサンプルコードを掲載しました。

Redux ページにはReduxを使ってないコードと比較しやすいように、1ファイルにまとめた React+Reduxのコードを掲載しました。 また、reduxフォルダー には標準的なディレクトリー・ファイル構成に分解したサンプルコードを置きました。

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ