Reactを使ったUIコンポーネント「Material-UI」

投稿日：
ReactのUIコンポーネントを探しているときの覚書。

仕事ではBootstap v3を使っている。
なので、React Bootstrapにしようかと思ったけど、Reactを使う場面はアプリのようなUIがいいのではと思い、「Material-UI」を試してみることにした。


特徴（Bootstrapユーザーの目線から）
  • CSSがJSファイルに埋め込まれているCSS-in-JSに少し抵抗がある。参考： Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
    → 出来るだけ標準スタイルを利用する。独自部分は色だけ。それがマテリアルデザイン。
  • React全般にいえることだけどPHPと連携しづらい
  • （後日追記予定）



インストール

前の記事で作ったチュートリアル用アプリを元にして、公式サイトを参考にする。
$ cd react-demo
$ npm install --save @material-ui/core @material-ui/icons

前に作ったApp.jsxを編集してみる。
$ less src/App.jsx
import React, { Component} from "react";
import Button from '@material-ui/core/Button';
//import "./App.css";

class App extends Component{
  render(){
    return(
      


      

);
  }
}

export default App;

ビルド
$ npm run build

ちゃんとスタイルされたボタンが表示された。
スタイルを含め全部bundle.jsに出力されているみたい。
これだけでもbundle.jsは1.5Mになった。

CSSを書かなくていいのが不思議な感じ。

あとは公式のTemplatesにソースコードが公開されているので参考にする。


Dashboardサンプルを試す

Githubからgit cloneしてdashboardのディレクトリごとコピーする。



Rechartsというライブラリが必要なのでインストール。
$ npm install --save recharts

index.jsを編集
import React from "react";
import ReactDOM from "react-dom";
//import App from "./App.jsx";
import Dashboard from "./dashboard/Dashboard";
ReactDOM.render(, document.getElementById("root"));

ビルド
$ npm run build

動いた。
bundle.jsのサイズは4M（mode=development）。


Ajax通信

サーバーとの通信は公式ドキュメントを参考にしながら。



【関連記事】