Material-UI はじめの一歩

つい先日、Reactでアプリ開発をはじめました。 なんとなくサンプルを真似て作ってみているのですが、いかんせん見た目がダサくてやる気がなくなる…

そこで、見た目を少し良くするために、material-uiを利用することに。

Material UIとは

UIパーツをReactのコンポーネントとして使用できるもの。

ちなみに、Material UIの他にもReactのコンポーネントセットはいろいろあります。 詳細は、こちら

Material UIを使う準備

インストール

まず、Material UIをインストールします。Material UIでは、react-tap-event-pluginというモジュールが使われているので、あわせてインストールが必要になります。

npm i -S material-ui react-tap-event-plugin

これにより、package.jsonにも反映されていれば、OK！

使う前の準備

まず、htmlファイルにレンダリングしているindex.jsxにて、

import injectTapEventPlugin from "react-tap-event-plugin";

injectTapEventPlugin();

を追記します。

実際のコードはこんな感じ↓

import React from 'react';
import { render } from 'react-dom';
import App from './components/app.jsx'
import injectTapEventPlugin from "react-tap-event-plugin";

injectTapEventPlugin();

render(<App />, document.getElementById('app'));

続いて、テーマの設定
(…ここら辺あまりよくわかってないので、後ほど追記します)
とりあえず、デフォルトの設定でやってみます。

app.jsxにて、以下を追加

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

その上で、MuiThemeProviderでコンポーネントを囲ってあげます。
↓こんな感じ

render() {
  return (
    <MuiThemeProvider>
      <div>
        <CreateTodo />
        <TodosList />
      </div>
    </MuiThemeProvider>
  )
}

いざ、Material UI！

以上で準備は完了！あとは使うだけ！

import RaisedButton from 'material-ui/RaisedButton';

↑のように、インポートをしてあげ、 そのうえで、他のコンポーネントを同じように、

  <RaisedButton label="Create" />

と、書いてあげればちょっとおしゃれなボタンになります！

今回はここまで…