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

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



【関連記事】

コメント

このブログの人気の投稿

オンサイトサポートとは(=出張サポート)

スタートアップで起動するアプリを停止する方法

既存のディレクトリ(フォルダ)にgit cloneして上書きしたい