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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

- Sponsored Link -

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;

npm startコマンドを実行しWebブラウザでプレビュー、以下のようなボタンが表示されていれば成功です。

では次回からMUIに搭載されている様々な機能の中で、主要な物を利用してみたいと思います。

続き

参考ページ

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

同じカテゴリの記事

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください