React でマテリアルデザインを実装する Material UI を試してみる
Material-UI is a CSS framework and a set of React components that implement Google's Material Design specification.
制作事例
Introduction
入手
$ git clone https://github.com/callemall/material-ui.git
デモページも React 製
- material-ui / docs をビルドしたものがデモページとして公開されている
- デモページのソースを見てもそれはレンダリング結果
- JSX変換 や Browserify を通した後のコンパイルされたコードなので複雑
- コンパイル前のソースが手に入る
- デモページを見ながら実際にどうコードを書けばいいかがわかる
- jsxファイルを編集すれば自動的に再読み込みされる
- 変更内容がどう作用するかわかる。例えば Buttons ページは↓
material-ui/docs/src/app/components/pages/components/buttons.jsx
$ cd material-ui $ npm install $ cd docs $ npm install $ npm start
開発用のひな形が用意されている
- material-ui / example ディレクトリ
- package.json
- Browserify, Gulp, BrowserSync など。下に抜粋。
- マテリアルデザイン用の Roboto フォントも使えるよ
- www / index.html に記述されている
- コードを書く箇所は
src/app/components/main.jsx
- スタイルは Less
$ cd material-ui/example $ npm install $ npm start
material-ui / example / package.json (抜粋)
"devDependencies": { "browser-sync": "^1.8.1", "browserify": "^7.0.3", "gulp": "^3.8.10", "gulp-autoprefixer": "^2.0.0", "gulp-less": "^3.0.0", "gulp-notify": "^2.1.0", "gulp-sourcemaps": "^1.2.8", "gulp-util": "^3.0.1", "pretty-hrtime": "^0.2.2", "reactify": "^0.17.1", "require-dir": "^0.1.0", "underscore": "^1.7.0", "vinyl-source-stream": "^1.0.0", "watchify": "^2.2.1" }, "dependencies": { "material-ui": "^0.7.0", "react": "^0.12.2", "react-tap-event-plugin": "^0.1.3" }
ご参考
おわり
まだ React 自体の理解も深まっていないですが、今回の試みで得られた上記のひな形なんかはとても有用です。Material UI もコンポーネントなので、使いたくなったら require すればオッケーなんだろうなーといった感覚が得られました。開発の仕方もわかったし、今回はこの辺りでおわり。