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

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

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

今回はよく名前を見かけるMaterial-UIを使ってみることにします。長いものには巻かれろ精神。
[blogcard url=”https://material-ui.com/”%5D

- 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に搭載されている様々な機能の中で、主要な物を利用してみたいと思います。

続き

[blogcard url=”https://blog.katsubemakito.net/react/react1st-28-materialui”%5D

参考ページ

- Sponsored Link -

同じカテゴリの記事

Donate

投げ銭お待ちしております!

BTC3A9nH1j7qQdKrSTrmnEdweo6zPqpHBmkxC
ETH0x1aE0541198D1F9f2908a25C35032A473e74D3731
XPXaQ9zv65F9ovfoMBrFGiPRG47aSHFhy8SX
MONAMTKgzSiS5BDueZkRCHySih24TGFwHThaDQ (MonaCoin)
ZNYZhnpf4RFYVQTAQiyoJg9dGoeC4bgT3BoSy (BitZeny)

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

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