この記事は 2019年4月8日 に書かれたものです
Reactでは通常のWebサイトと同様、自由自在にCSSを記述し反映することができるわけですが、ゼロから書き始めるのは個人的に正直ダルい。そんなときにタグにクラス名を適当に指定すればチャチャッといい感じに表示してくれるCSSフレームワークを導入したいと思います。
今回はよく名前を見かける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;
npm startコマンドを実行しWebブラウザでプレビュー、以下のようなボタンが表示されていれば成功です。
では次回からMUIに搭載されている様々な機能の中で、主要な物を利用してみたいと思います。
続き
参考ページ
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
同じカテゴリの記事
- はじめてのReact #30 「CSSフレームワークを導入する」Material-UI テーマをカスタマイズ編
- はじめてのReact #29 「CSSフレームワークを導入する」Material-UI アイコンと文字スタイル編
- はじめてのReact #28 「CSSフレームワークを導入する」Material-UI グリッド編
- はじめてのReact #26 「ルーティングに対応する」設定をJSONにまとめる編 react-router@v5
- はじめてのReact #25 「ルーティングに対応する」認証とリダイレクト編 react-router@v5
- はじめてのReact #24 「ルーティングに対応する」URLパラメーター編 react-router@v5
- はじめてのReact #23 「ルーティングに対応する」基本編 react-router@v5
- はじめてのReact #22「ToDoアプリを作る」 後編
