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

はじめに

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

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

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

プロジェクト作成

npx create-react-app project_name --typescript

eslint設定ファイル作成

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

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

package.jsonのeslintの設定を削除

package.json

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

Prettier設定

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

eslintの設定ファイルに追記

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を作成

echo '{\n\t"printWidth": 120\n}' > .prettierrc

react-router-dom

インストール

yarn add -D react-router-dom @types/react-router-dom

Material-UIの導入

インストール

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

publicの編集

index.htmlを編集して、Roboto Font, Font Iconの有効化
Responsive meta tagもやっておく

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があるので、いらないかと思っていたのですが、記法はstyled-componentsの方がわかりやすいので、導入することにしました。

インストール

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

テーマの作成 & Material-UIのstyled-componentsでの上書き

Color Toolで色を選び、themeを作成します。
そのままだとMaterial-UIのstyleをstyled-componentsで上書きできないことがあるので、
<StylesProvider injectFirst>で挟むことでstyleの適用順を変えます。

./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;

./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();

不要ファイルの削除

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アプリ開発環境を作成する

参考

React.jsとstyled-componentsでmaterial-uiを利用する最適解
 esLint - Configuring “no-unused-vars” for Typescript

おわりに

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