ReactでMaterial-UIを使ってみる

 ReactでUIを作るときにMaterial-UIが便利そうだったので、導入部をメモ

 [ドキュメント]

https://material-ui.com/ja/ 

[導入]

1. Material-UI のコアをインストール
   $npm install @material-ui/core


2. index.htmlにRoboフォントとフォトアイコンを使えるようにしておくためのおまじないを追加
   
   <meta  name="viewport"  content="minimum-scale=1, initial-scale=1, width=device-width"/>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
3. SVGアイコンを使う場合はアイコンをインストール
   $npm install @material-ui/icons

以下のサイトで使えるアイコンを探せる
https://material-ui.com/components/material-icons/
   

[ソース内での書き方]

1. とにもかくにもインポート
   

   import Button from '@material-ui/core/Button';
   もしくは
   import { Button } from '@material-ui/core';

   後者だと、
   import { Button,Menu } from '@material-ui/core';

   のように書ける。

   
   
2. JSXの中での記述
   function App() {
     return (
       <div className="App">
           <Button>あああ</Button>
       </div>  
     );
   }
   
   Buttonのように、先頭は大文字で記載する。
   パラーメータなどは属性値として記述すればいい。