React.js material-uiの導入と使い方

React.js material-uiの導入と使い方

react.jsで利用できるマテリアルデザインのCSSフレームワークmaterial-uiを導入手順と簡単な使い方とテンプレートの利用方法を記載。

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V10.16.3
  • npm 6.9.0
  • React 16.12.0

material-uiインストール

下記のコマンドでインストールします。

material-uiを利用

Buttonを配置してみます。

src配下のApp.jsに下記のコードを追加します。

npm start で起動して、ブラウザから http://プライベートIP:3000 にアクセスすると material-ui を利用したbuttonが配置されています。

次に公式にあるテンプレートを利用してみます。

今回は「Sign-in side template」を利用してみます。

githubに上がっているコードをそのままApp.jsに貼り付けます。

下記のエラーが発生。

モジュールがないといっているのでインストールします。

ブラウザから http://プライベートIP:3000 にアクセスするとテンプレートが利用できていることが確認できます。