(styled-components)ReactとReduxを学ぶために、開発環境というかプロジェクトテンプレートをスクラッチから作っている。(最終的な成果はGitHubに置いた。)前回はCSS周りの処理系をセットアップした。(2018/11/21更新)既成Reactコンポーネント前回まででHTMLもCSSもReactコンポーネント単位で書けるようになったんだけど、実際、自分で1からコンポーネントを書くのは、特にデザインセンスがない人にとっては辛い。かっこいいUIコンポーネントを作りたいならデザイナーの協力が必要だけど、個人の開発などそれができない状況も多い。いう問題を抱えた人たち向けなのかはわからないが、既成のReactコンポーネントセットが色々OSSで提供されている。GoogleのマテリアルデザインのReact実装。UIのReactバインディング。DesignのReact実装。BootstrapのReactバインディング。現時点ではv4未対応。HPEによるエンタープライズレディなデザインシステム。OfficeなどのMicrosoft製品に使われているReactコンポーネントセット。今回はこの中でも圧倒的に人気なMaterial-UIを導入する。Material-UIMaterial-UIは簡単に使える。コアパッケージをインストールする。@material-ui/corev3.5.1が入った。あとはパッケージに入っている色々なコンポーネントをMaterial-UIのドキュメント見ながら使えばいいだけ。App;これでただのテキストがボタンになった。Fonts前節でいちおうMaterial-UI使えたけど、フォントをケアしてやるともう少しかっこよくなる。Material-UIはRobotoフォントを想定して作られているが、これはブラウザにデフォルトで入ってはいないので、そのままだとArialとかにフォールバックされちゃう。Robotoフォントを導入する。Fontsの機能である@font-faceで、フォントファイルをブラウザにロードさせることで導入できる。url()関数で指定するファイル)はwebpackでバンドルできる。Robotoフォントのフォントファイルはnpmで配布されていて、Yarnでプロジェクトにインストールできる。typeface-robotoフォントファイルの種類は、OTFとかTTFとかWOFFとかWOFF2とかいろいろあるけど、この記事などをみるに、WOFFだけ使えばよさげ。フォントファイルのバンドルはurl-loaderを使う方法とfile-loaderを使う方法とがある。url-loaderを使う方法url-loaderを使う場合は、url-loaderとフォールバック用のfile-loaderをインストールする。file-loaderwebpackのローダ設定は以下のようなのを追加すればいい。},(後略)あとは、typeface-robotoパッケージ内のフォントファイルを指すようにCSSに@font-faceを書けばいい。weightが300のWOFFファイルを読むなら以下のような感じ。format('woff');}これをどこかのJavaScriptでインポートしてやればいい。}けど、styled-componentsを使っている場合はurl-loaderは使えないみたいで、代わりにfile-loaderを使う必要がある。(styled-components)file-loaderを使う場合は、file-loaderだけインストールすればいい。file-loaderwebpackのローダ設定は以下のようなのを追加すればいい。},(後略)で、ここを参考にしてフォントファイルを読みこむ。v4でcreateGlobalStyleに代わったので、以下のように書く。Fonts;ここでexportされるFontsはReactコンポーネントになっているので、それをどこかのJSXに追加してやればいい。App;次回はようやくReduxを導入する。