create-react-appでReact（+Material-UI V4）の開発環境を準備する

Create React AppでReact（+Material-UI V4）の開発環境を準備した時のメモ
## Create React Appって何？

[Create React App](https://create-react-app.dev/)はFacebookが公開したReactの環境構築ツールで、Reactを利用した開発環境を簡単に作成することが出来る。

### Create React Appをインストール
Create React Appのインストールはnode及びnpmの環境が必要で、バージョンが適合しないとインストール出来ないので注意。パッケージマネージャーにyarnも利用したいのでインストールしておいた。

`node -v`コマンドでnodeのバージョンを表示してみる。

```
$ node -v
//nodeのバージョンが表示される
v14.15.1

//yarnをグローバルにインストール
$ npm install -g yarn

$ yarn -v
//yarnのバージョンが表示される
1.7.0
```

[node公式サイト](https://nodejs.org/ja/)から安定版をインストールできる。LTSがついているversionが安定版。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/26395d88-0ea2-a1e1-9d60-049cee996e00.png" width="500" />

```
$ npx create-react-app react-practice
$ cd react-practice
$ yarn start
```
`react-practice`の部分は任意のディレクトリ名（プロジェクト名）。
作成した`react-practice`に移動し、`yarn start`でアプリを起動。

`http://localhost:3000/`にアクセスして次の画面が表示されていればインストール成功。
バージョン指定なしインストールしたら最新版（2020/11現在）`V17.0.1`であることを確認。
あっという間に開発環境ができた:hugging:

| 初期ファイル構成 | 画面 | 
|:-----------|:------------|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/e6d77d5f-e053-f196-f50c-1bdf7a616a0e.png" width="200" />|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/e55eb376-6d8a-e9fa-5ba4-ca14a964ff26.png" width="400" /> |

- public/index.html はページテンプレート
- src/index.js はJavaScriptのentryPoint
- srcディレクトリはソースコードが配置されており、開発ではsrc以下のファイルを編集。
- src/App.js は初期画面表示のAppコンポーネントが作成さている。

src/App.jsの中身（初期状態）は以下。

```jsx
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```
まずはsrc/App.jsを編集していくことで表示内容を変更してみる。不要そうなファイルを削除して開発準備完了。

参考： [Create React App公式](https://create-react-app.dev/docs/getting-started)

####  簡単な表示テストをしてみる

まずは不要なロゴを削除し、src/App.js と src/App.css を編集。

```
react-practice
├── public
│   ├── logo192.png <= 削除 ×
│   ├── logo512.png <= 削除 ×
└── src
    ├── App.css   <= 編集 Material UIを追加後不要なので削除した
    ├── App.js    <= 編集
    ├── theme.js  <= Material UI用に追加
    ├── reportWebVitals.js  <= 削除 × 計測ツール、今回は不要なので削除した
    └── logo.svg  <= 削除 ×
```

```App.jsx
import './App.css';

const App = () => {
  return (
    <div className="App">
      準備完了しました
    </div>
  );
}

export default App;
```

```css
.App {
  text-align: center;
}
```

保存したタイミングでブラウザがリロードされ、文字列が 「準備完了！」に変更される。

こんな感じ。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/5f0e5ed9-02a9-e845-694c-41562b8fdcc5.png" width="500" />

## Material-UIって何？

web開発をより高速かつ簡単なものにするGoogleMaterialデザインをベースに開発されたReactコンポーネントライブラリ。
手軽にMaterialDesignを取り入ることが出来、用意された多くのコンポーネントを組み合わせるだけで、デザイン工数をかけることなく見栄えのするサイトを構築出来る。

### Material-UIをinstall
[Material-UI](https://material-ui.com/)をinstallしたら、公式ページで使いたいコンポーネントをすぐ見つけられるし、勝手にスタイリングしてくれるからテンションあがる😁

```
$ yarn add @material-ui/core
```
[Material Icons](https://material-ui.com/components/material-icons/)も使いたい。
表示が早くてキレイなSVGアイコンを利用できる。

```
$ yarn add @material-ui/icons
```
参考: [Material-UI公式](https://material-ui.com/ja/)

##### theme.jsの作成例

サイト全体のベースになるテーマを作成

```jsx
import { createMuiTheme } from '@material-ui/core/styles';

// サイトのベースとなる独自のテーマを作成する
const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#1976d2', //サイト内で使える任意のprimary color
    },
    secondary: {
      main: '#dc004e',//サイト内で使える任意のsecondary color
    },
    background: {
      default: '#fffafa', // 背景色を設定出来る。何も設定しなければ白
    },
  },
  typography: {
    fontFamily: [
      'sans-serif',
    ].join(','),
    fontSize: 12,
    h1: {
      fontSize: "1.75rem"
    },
    h2: {
      fontSize: "1.5rem"
    },
    h3: {
      fontSize: "1.25rem"
    },
    h4: {
      fontSize: "1.125rem"
    },
    h5: {
      fontSize: "1rem"
    },
    h6: {
      fontSize: "1rem"
    },
  }
});

export default theme;
```

#### index.jsの作成例

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import './index.css';
import App from './App';
import theme from './theme'; //作成した独自テーマをimport

ReactDOM.render(
  <ThemeProvider theme={theme}> {/*サイト全体でthemeを利用できるようにする*/}
    <CssBaseline /> {/*サイト全体で表示差異をなくして一貫性をもたせる*/}
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

```

CssBaselineブラウザ間の表示差異をなくして一貫性をもたせる。いわゆるnormalize.cssの役割。

参考： [css-baseline](https://material-ui.com/ja/components/css-baseline/)

#### App.jsの作成例

```jsx
import React from 'react'
import { makeStyles, createStyles } from '@material-ui/core/styles';
// 使いたいMaterial UIのコンポーネントをimport
import {Container, Box, Typography, Button, ButtonGroup} from '@material-ui/core';
// 使いたいMaterial Iconsをimport
import FavoriteIcon from '@material-ui/icons/Favorite';

// スタイルを適用する
// 引数に作成したthemeを受け取る
const useStyles = makeStyles((theme) =>({
    root: {
      padding: theme.spacing(2),
      textAlign: 'center',
    },
  }))

const App = () => {
  const classes = useStyles()
  return (
    <Container maxWidth="lg" className={classes.root}>
      <Typography variant="h1" component="h1">
        <FavoriteIcon color="secondary"/>
          Material UIも準備完了
        <FavoriteIcon color="secondary"/>
      </Typography>
      <Box m={4} >
        <Typography variant="body1" >
          ここにコンテンツが入ります。
        </Typography>
      </Box>
      <ButtonGroup color="primary" aria-label="outlined button group">
        <Button variant="contained" color="primary">Primary</Button>
        <Button variant="contained" color="secondary">Secondary</Button>
      </ButtonGroup>
    </Container>
  );
}

export default App;
```

見た目はこんな感じになった。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218656/4a38bd38-3c6e-60ef-f4d9-c7cbdc52ffcf.png" width='600' />


##### App.jsで使ったコンポーネント例

各コンポーネントのAPIドキュメントで、CSSカスタマイズポイントや使い方などが書かれている。

- [Container](https://material-ui.com/ja/api/container/)
- [Box](https://material-ui.com/ja/components/box/)
- [Typography](https://material-ui.com/ja/components/typography/)
- [ButtonGroup](https://material-ui.com/ja/components/button-group/)
- [Button](https://material-ui.com/ja/components/buttons/)
- [FavoriteIcon](https://material-ui.com/components/material-icons/) ※リンク先でiconを検索出来る

用意されているコンポーネントを組み合わせて、最速でReactサイトを構築できそう:heart_eyes_cat: