Create React Appを利用したReactアプリケーションの作成方法についてまとめます。
目次
アプリケーションの作成方法
アプリケーションの作成は以下の通りです。1
### 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
起動方法
起動は以下の通りです。2
### npm
$ cd my-app
$ npm start
### Yarn
$ cd my-app
$ yarn start
自動コードフォーマット
パッケージを利用するとコミットのタイミングでコードフォーマットが自動で実行されます。
Create React Appの公式ドキュメントで紹介されているコードフォーマットの方法について紹介します。3
### 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)やってます。フォローしてもらえるとうれしいです!