Create React AppでTypeScriptやReduxやコードフォーマットの環境を整える

Create React Appを利用したReactアプリケーションの作成方法についてまとめます。

アプリケーションの作成方法

アプリケーションの作成は以下の通りです。¹

### npx
$ npx create-react-app my-app

### npm
$ npm init react-app my-app

### Yarm
$ yarn create-react-app my-app

テンプレートを利用したアプリの作成方法

--templateオプションを利用するとcreate-react-appで作成されるひな型のカスタマイズができます。

テンプレートはnpm上にcra-template-*という名前で公開されているので、『cra-template-*』で検索すればさまざまなテンプレートが見つかります。

React + TypeScript

TypeScriptベースのアプリケーションを作成する場合は--template typescriptを指定します。

$ npx create-react-app my-app --template typescript

React + Redux

Reduxを利用する場合は--template reduxを指定します。
--template reduxを利用するとReact Toolkitがインストールされます。

$ npx create-react-app my-app --template redux

React + Redux + TypeScript

TypeScriptベースのアプリケーションでReduxを利用する場合は--template redux-typescriptを指定します。
--template redux-typescriptを利用するとReact Toolkitがインストールされます。

$ npx create-react-app my-app --template redux-typescript

起動方法

起動は以下の通りです。²

### npm
$ cd my-app
$ npm start

### Yarn
$ cd my-app
$ yarn start

自動コードフォーマット

パッケージを利用するとコミットのタイミングでコードフォーマットが自動で実行されます。
Create React Appの公式ドキュメントで紹介されているコードフォーマットの方法について紹介します。³

### npm
$ npm install --save husky lint-staged prettier

### Yarn
$ yarn add husky lint-staged prettier

package.jsonに以下の部分を追加します。

package.json

  "dependencies": {
    // ...
  },
+ "husky": {
+   "hooks": {
+     "pre-commit": "lint-staged"
+   }
+ },
+ "lint-staged": {
+   "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
+     "prettier --write"
+  ]
+ },
  "scripts": {

2021年3月現在、huskyは4系と5系が広く利用されています。
もしコードフォーマットがうまく実行されない場合はhusky@4のようにバージョンを指定してパッケージをインストールしてください。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！