【React.js】DockerでMateril-UI環境を作って試してみた

はじめに

こんにちは、がんがんです。

前回の記事でReact.jsのDocker環境を構築しました。
今回はこの環境でMaterial-UIが使えるようにしていこうと思います。

前回の記事はこちらです。
gangannikki.hatenadiary.jp

目次

目的

• Material UIのインストール

環境

• Docker：Docker for WIndows
• React.jsの環境
  • node.js：10.19.0

参考

公式ドキュメント

今回も公式ドキュメントにお世話になっていきます。
material-ui.com

Material-UIとは

Material-UIはReactで開発していくときに便利なコンポーネントがまとめられているライブラリです。
個人的な認識としては、CSSのBootstrapみたいなイメージです。

material-ui.com

インストールとセットアップ

前回作成したリポジトリを使ってもよかったのですが、公式のサンプルプロジェクトにcreate-react-appがあったので今回はこちらを参照していきます。

Dockerfileの変更

Dockerfileの方にnpm installを記述しておきます。

Dockerfile

FROM node:10.19.0-alpine

WORKDIR /usr/src

#  環境の準備
RUN npm install -g npm \
    npm install @material-ui/core \    #  追加分
    && rm -rf /var/lib/apt/lists/*

セットアップ手順

実際にMaterial-UIのセットアップを行っていきます。

(ホストOS) $ curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/create-react-app
(ホストOS) $ docker-compose up -d --build
(ホストOS) $ docker-compose exec app sh
(docker) $ cd create-react-app
(docker) $ npm install
(docker) $ npm start

実行結果

全体のコードはGitHubに置いてます。

npm startして、http://localhost:3000 にアクセスして以下のような実行結果が表示されていればとりあえずOKです。

アクセス結果

おわりに

今回はReact.jsのUIコンポーネントであるMaterial-UIの学習を行うために、Dockerを用いて環境の構築を行いました。
Docker環境の立ち上げばかり書いてる気がしますが、そんだけdocker-composeしてきたということになります。

次回の記事では実際にいくつかのコンポーネントを使ってみたいと思います。