はじめてのReact #27 「CSSフレームワークを導入する」Material-UI インストール編

「はじめてのReact」一覧に戻る

Reactでは通常のWebサイトと同様、自由自在にCSSを記述し反映することができるわけですが、ゼロから書き始めるのは個人的に正直ダルい。そんなときにタグにクラス名を適当に指定すればチャチャッといい感じに表示してくれるCSSフレームワークを導入したいと思います。

今回はよく名前を見かけるMaterial-UIを使ってみることにします。長いものには巻かれろ精神。 material-ui.com

Material-UIを使ってみる
- インストール
- とりあえず動かす
続き
参考ページ

Material-UIを使ってみる

インストール

ひとまず適当なプロジェクトを作成します。MUIはMaterial-UIの省略系。

$ create-react-app muitest

カレントディレクトリを移動しMUIをインストール。

$ cd muitest
$ npm install @material-ui/core

とりあえず動かす

早速適当なコードを書いてみます。 MUIはコンポーネント毎にファイルが別れているので、利用するコンポーネントを個別にimportしてあげます。ここでは試しにButtonを利用してみます。

/**
 * App.js
 */
import React, { Component } from 'react';
import Button from '@material-ui/core/Button';

class App extends Component {
  render() {
    return (
      <Button variant="contained" color="primary">
        Hello World
      </Button>
    );
  }
}

export default App;