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通信

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



【関連記事】

コメント

このブログの人気の投稿

【.NET】DataGridViewを選択した際に背景色を変更しない

Can't open PID file /var/run/nginx.pid (yet?) after start: Too many levels of symbolic links

【PHP】セッションタイムアウトの時間を設定する