「作りながら学ぶ React 入門」サポートページのコードをMaterial-UI v4.x に対応しました。
作りながら学ぶ React 入門 の「7章 コンポーネントの応用」では既存のReactコンポーネントの例として、
Material-UI を取り上げ、書籍内で作っているアプリを Material-UI で今風なデザインにしています。
しかし、2年前に作りながら学ぶ React 入門 書いた時点で バージョン 0.X だった Material-UI は大幅なバージョンアップを繰り返し現在は バージョン 4.X になっています。
実はバージョンアップの途中で npm 名が material-ui から @material-ui/core に変わったので、古い material-ui も共存して来ました。しかし、最近 Deprecated(非推奨) になってしまいました。そこで、将来の事を考え最新のMaterial-UIに対応する事にしました。
@material-ui/core での変更はタグ記法やAPIの変更だけではなく設計思想の変更も行われ、思いのほか大きな変更になってしまいました。
旧版では中庸な機能を持ったコンポーネントが多数あり簡単にUIが作れましたが、新判では汎用性の高いベースになるコンポーネントに変更されたものもあり、旧版と同じ機能を実現するにはコード量がかなり増えました。
コンポーネントの機能が変わり、お天気アプリ(weather)では state の持ち方を一部変更するというUIコンポーネントの変更にはとどまらない変更も行いました。
「作りながら学ぶ React 入門」関連記事 に書きましたように、作りながら学ぶ React 入門 はサポートページをGitHubに置いたことで、コードや構築手順は今後もサポートし続けて行くことが出来ます。書籍のバージョンアップは難しいですが、サポートページは今後もバージョンアップして行きます。
