【２０２１年最新版】React＋TypeScript＋Prettier＋Material-ui＋Tailwindcssの環境構築をコピペだけで行う

皆さんこんにちは！

梅雨が明け、暑さは最高潮ですね。

僕は夏のじめじめがとても嫌いで、冬の方が断然好きですね。

前置きはさておき

今回はReactの環境構築のテンプレートをご紹介するので、ぜひReactで開発を行うことが多いという方やこれからReactの環境構築を行いたい、またReactの環境構築を忘れたという方々すべてに**コピペだけ**で環境構築を行えますので、ぜひストックして頂けると幸いです。

特に詳しい説明などはしませんのでご了承ください。

それでは、**コピペだけ**で環境構築を行っていきましょう！

# プロジェクトの作成（TypeScript付き）

```bash
npx create-react-app [プロジェクト名] --template typescript
```

# Prettier導入

```bash
npm i -D prettier
```

```package.json
{
  // 省略
  "prettier": {
    "printWidth": 120,
    "semi": true,
    "singleQuote": false,
    "tabWidth": 4,
    "trailingComma": "all"
  }
}
```

```package.json
{
  "scripts": {
    // 省略
    "prettier": "prettier --write ./src/**/*.{js,ts,tsx}",
  },
}
```

# Material-ui導入

```bash
npm i @material-ui/core @material-ui/icons @material-ui/styles @material-ui/lab
```

# Tailwindcss導入

```bash
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

```bash
npm install @craco/craco
```

```package.json
    "scripts": {
      "start": "TAILWIND_MODE=watch craco start",
      "build": "craco build",
      "test": "craco test",
    }
```

```bash
touch craco.config.js
```

```craco.config.js
module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}
```

```bash
npx tailwindcss init -p
```

```tailwind.config.js
  module.exports = {
   mode: "jit", // 追加
   // purge: [],
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }
```

```src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tailwindcssを導入すると、hタグのフォントサイズが変わるのを防ぐ */
h1 {
    font-size: 48px;
    line-height: 1;
}
h2 {
    font-size: 36px;
    line-height: 1.333;
}
h3 {
    font-size: 24px;
    line-height: 1;
}
h4, h5, h6 {
    font-size: 16px;
    line-height: 1.5;
}
```

これだけでReactの環境構築は完了です！

下の番外編ではRouterの設定やMaterial-uiのテーマ設定などを行います。

興味のある方、導入したい方は引き続きご覧ください。

# 番外編

## Routerの設置

```bash
npm i @types/react-router-dom
touch ./src/history.js ./src/ScrollToTop.tsx ./src/Routing.tsx
```

```src/history.js
import { createHashHistory } from "history";
// OR
import { createBrowserHistory } from "history";

export default createBrowserHistory();
// OR
export default createHashHistory();
```

``createBrowserHistory``と``createHashHistory``はお好きな方をお選びください。

特に理由が無い方は、``createBrowserHistory``を選ぶと良いでしょう。

### ページ遷移の際にスクロール位置がトップに行くように設定

```src/ScrollToTop.tsx
import { withRouter } from "react-router-dom";
import { useEffect } from "react";
import * as H from "history";

type Props = {
  history: H.History;
};

const ScrollToTop: React.FC<Props> = ({ history }) => {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0, 0);
    });
    return () => {
      unlisten();
    };
  }, [history]);

  return null;
};

export default withRouter(ScrollToTop);
```

```src/Routing.tsx
import { Router, Route, Switch } from "react-router-dom";
import history from "./history";
import ScrollToTop from "./ScrollToTop";

const Routing: React.FC = () => {
    return (
        <Router history={history}>
          <ScrollToTop />
          <Switch>
            <Route exact path="/" component={Home} />
          </Switch>
        </Router>
    );
};

export default Routing;
```

```src/App.tsx
import Routing from "./Routing";

const App: React.FC = () => {
  return (
    <div>
       <Routing />
    </div>
  );
};

export default App;
```

## Material-uiのテーマ設定

```bash
touch ./src/Theme.ts
```

```src/Theme.ts
import { createMuiTheme } from "@material-ui/core/styles";

export const Theme = createMuiTheme({
  palette: {
    primary: {
      main: "#2196f3",
    },
    secondary: {
      main: "#009688",
    },
  },
});
```

```src/App.tsx
import { ThemeProvider } from "@material-ui/core";
import Routing from "./Routing";
import { Theme } from "./Theme";

const App: React.FC = () => {
  return (
    <div>
      <ThemeProvider theme={Theme}>
        <Routing />
      </ThemeProvider>
    </div>
  );
};

export default App;
```

## 環境変数

```bash
touch .env
```

```/.env
# development
REACT_APP_HOST = "localhost"

# production
REACT_APP_HOST = "www.example.com"
```

```example.js
console.log(process.env.REACT_APP_HOST)
```

## ビルド時の注意点

本番環境の構築を行う際に、ページがが真っ白になる場合があります。

その理由は2つあり、ビルドしたファイルが他のファイルを読み取る際に**絶対パス**になっている、もしくはヒストリー（history）の設定に不備がある。

なので、以下のどちらかの方法を試してみてください。

```package.json
{
  "homepage": "./",
}
```

```src/history.js
import { createHashHistory } from "history";

export default createHashHistory();
```

このようにしてReactの環境構築を**コピペだけ**で行うことができます。

結構説明を端折ったので、もし説明して欲しい部分があればコメントで質問してください。

以上、「【２０２１年最新版】React＋TypeScript＋Prettier＋Material-ui＋Tailwindcssの環境構築をコピペだけで行う」でした！

Thank you for reading