Material-UIはReact向けのUIコンポーネントキットです。
BootstarpのGridシステム抜きといったイメージです。
例
ボタン
次のボタンを表示します。
jsx
公式サンプルではES2015のimport文を使っています。
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
JavaScriptのmodule機構はまだ仕様が未確定です。requireを使う場合は次のように書きます。
const {getMuiTheme, MuiThemeProvider} = require('material-ui/styles');
const {RaisedButton} = require('material-ui');
ボタンを表示する例は...
index.jsx
const React = require('react');
const ReactDOM = require('react-dom');
const {getMuiTheme, MuiThemeProvider} = require('material-ui/styles');
const {RaisedButton} = require('material-ui');
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<RaisedButton label="Default"/>
</MuiThemeProvider>
);
ReactDOM.render(
<App/>, document.querySelector('#container'));
html
JavaScriptにトランスパイルしたbundle.jsを読み込むhtmlを用意します。
index.html
<!DOCTYPE html>
<html>
<body>
<div id="container">
</div>
<script src="bundle.js"></script>
</body>
</html>
ビルド
準備
package.jsonを作ります。
npm init -y
必要なnpmモジュールをインストールします。
npm i -D react browserify babelify babel-plugin-transform-react-jsx material-ui react-dom react-tap-event-plugin
babelの設定ファイルを作ります。
.babelrc
{
"plugins": ["transform-react-jsx"]
}
実行
node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js
動作確認
index.htmlを開いて最初のボタンが表示されれば成功です。
ボタンのスタイルはインラインで埋め込まれています。
スタイルシートを読み込む必要はありません。
<div data-reactroot="" style="color: rgba(0, 0, 0, 0.870588); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; box-sizing: border-box; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; border-radius: 2px; display: inline-block; background-color: rgb(255, 255, 255);">
<button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; outline: none; font-size: inherit; font-weight: inherit; transform: translate3d(0px, 0px, 0px); position: relative; min-width: 88px; height: 36px; line-height: 36px; width: 100%; padding: 0px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; text-align: center; background-color: rgb(255, 255, 255);">
<div>
<div style="height: 36px; border-radius: 2px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; top: 0px;"><span style="position: relative; opacity: 1; font-size: 14px; letter-spacing: 0px; text-transform: uppercase; font-weight: 500; margin: 0px; padding-left: 16px; padding-right: 16px; color: rgba(0, 0, 0, 0.870588); -webkit-user-select: none;">Default</span></div>
</div>
</button>
</div>