【始め方】React プロジェクト開始時にやること

## はじめに
Reactの開発を始める時にやることをメモしておきます。
以下のものを導入しています。

- React
- TypeScript
- Prettier
- ESLint
- Material UI
- styled-components
- React Router DOM
- (Optional) Electron

この下で書いていることを行い、`AppBar`と`Drawer`を入れたテンプレート的なものを作成しました。
https://github.com/hasehiro0828/-QP-react-template

## プロジェクト作成

```shell
npx create-react-app project_name --typescript
```

## eslint設定ファイル作成

```shell
cd project_name
./node_modules/.bin/eslint --init
```

この時、プラグインはインストールしない

`package.json`のeslintの設定を削除

```json:package.json
{
  ...,
  "eslintConfig": {  //これを削除
    "extends": "react-app"
  },
  ...,
}
```

## Prettier設定

```shell
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
```

eslintの設定ファイルに追記

```javascript
module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended", //これを追加すると、型として使った時に、no-unused-varsのエラーが出ない
        "plugin:prettier/recommended"  //これを追加
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};
```

.prettierrcを作成

```shell
echo '{\n\t"printWidth": 120\n}' > .prettierrc
```
## react-router-dom
### インストール
```shell
yarn add -D react-router-dom @types/react-router-dom
```

## Material-UIの導入
https://material-ui.com/getting-started/installation/

### インストール

```shell
yarn add @material-ui/core @material-ui/icons
```

### publicの編集
`index.html`を編集して、`Roboto Font`, `Font Icon`の有効化
[Responsive meta tag](https://material-ui.com/getting-started/usage/#responsive-meta-tag)もやっておく

```html:public/index.html
<title>React App</title>
<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" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
```

## styled-componentsの導入
最初はMaterial-UIにも[Styled components API](https://material-ui.com/styles/basics/#styled-components-api)があるので、いらないかと思っていたのですが、記法は`styled-components`の方がわかりやすいので、導入することにしました。

### インストール

```shell
yarn add -D styled-components @types/styled-components
```

### テーマの作成 & Material-UIのstyled-componentsでの上書き
[Color Tool](https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=81D4FA)で色を選び、themeを作成します。
そのままだと`Material-UI`の`style`を`styled-components`で上書きできないことがあるので、
`<StylesProvider injectFirst>`で挟むことでstyleの適用順を変えます。

```typescript:./theme.ts
import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  palette: {
    primary: {
      light: "#b6ffff",
      main: "#81d4fa",
      dark: "#4ba3c7",
      contrastText: "#000000",
    },
  },
});

export default theme;
```

```tsx:./index.tsx
import { MuiThemeProvider, StylesProvider } from "@material-ui/core/styles";
import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import theme from "./theme";

ReactDOM.render(
  <React.StrictMode>
    <StylesProvider injectFirst>
      <MuiThemeProvider theme={theme}>
        <ThemeProvider theme={theme}>
          <App />
        </ThemeProvider>
      </MuiThemeProvider>
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
```


## 不要ファイルの削除

```shell
rm -f ./src/App.css ./src/index.css ./src/logo.svg
sed -i "" -e "/logo/d" ./src/App.tsx
grep -l 'css' ./src/* | xargs sed -i "" -e "/css/d"
```

## (Optional) VSCodeを使用する場合
- `ESLint` `Prettier`のプラグインをインストール
- `Format on Save`を有効化

## (Optional) Electron を使用する場合
いい感じに環境を構築してくれている人が既にいるので、参考にし構築。
[create-react-appとelectron-builderでTypeScriptとHot Reloadに完全対応したElectronアプリ開発環境を作成する](https://qiita.com/yhirose/items/22b0621f0d36d983d8b0)


## 参考
[React.jsとstyled-componentsでmaterial-uiを利用する最適解](https://luck2515.com/20200407/styled-components-material-ui)
[esLint - Configuring “no-unused-vars” for Typescript](https://stackoverflow.com/questions/57802057/eslint-configuring-no-unused-vars-for-typescript)

## おわりに
以上のことをやれば簡単に開発に取り掛かることができると思います。