【React】create-react-app を使ってReact-TypeScriptの環境を構築する (Redux, ESLint, Prettier)も導入する

React-TypeScriptの環境構築

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、create-react-app を使ってReact-TypeScriptの環境を構築する (Redux, ESLint, Prettier)も導入する方法を解説していきます。

React-TypeScript-Appの環境を構築する

Node.jsの確認

まずは、Node.jsがインストールされているかどうか確認します。

# Node.jsがインストールされているか確認
node -v

# [ 実行結果 ]
v14.17.3

Node.jsのインストール

Windowsユーザーは、Node.jsのインストーラーを使って、Downloadしましょう。

MacやLinuxOSのユーザーは、macOS（またはLinux）用パッケージマネージャーであるHomebrew を使って、Node.jsをインストールしていきましょう。

もちろん、MacでもNode.jsのインストーラーを使って、インストールすることができます。

次のコマンドで、Homebrewをインストールできます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew -v でインスールができたか確認します。

Homebrewのバージョン情報が出現したら完了です。

brew -v

# [ 実行結果 ]
Homebrew 3.3.10
Homebrew/homebrew-core (git revision 7389c7f0442; last commit 2022-01-17)
Homebrew/homebrew-cask (git revision 45f3dadfa8; last commit 2022-01-17)

Homebrewを使って、Node.jsをインストールします。

brew install node

yarnの確認

次に yarnがインストールされているかどうかの確認もします。

yarnは、npmと同様にNode.jsのパッケージ・マネージャーです。

最近は、yarnとnpmの性能的な差が縮まっているので、npmをそのまま使用するのでも問題ないです。

# yarn(パッケージ・マネージャー)がインストールされているか確認
yarn -v

# [ 実行結果 ]
1.22.19

yarnのインストール

yarnがインストールされていない場合は、次のコマンドでインストールできます。

# yarnのインストール
npm install -g yarn

React-TypeScript-Appの基本環境を構築する

node.js および npm か yarn どちらかのパッケージ・マネージャーの準備ができたら、

お待ちかねのReact-TypeScriptのアプリを作っていきます。

次のコマンド1つで、React-TypeScriptの環境を作成することができます。

sample-app の部分は、作成するプロジェクトファイル名なので、好きに決めてOKです。

npx create-react-app sample-app --template typescript

Reactアプリを立ち上げる

React-TypeScriptのプロジェクトができあがったら、ディレクトリに移動します。

そして、Reactアプリを立ち上げてみましょう。

yarn start や、npm run start 、npm start のいずれかのコマンドで起動することができます。

yarn start は、yarn を導入している時だけなので注意です。

cd sample-app

yarn start
# または、、、
npm run start
# または、、、
npm start

上記のReactアプリの起動コマンドを実行すると、通常は http://localhost:3000/

でReactアプリが立ち上がります。

初期表示は、ReactのLogoが回転している次のような画面です。

停止するときは「 control + C 」(Key同時押し) で停止します。

package.json の状況を確認する Ver. React-TypeScript導入初期

react・typescriptは、もちろんのこと、型定義の設定ファイル「 @types 」系が最初から入っています。

{
  "name": "pandas-output-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.2",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Reduxを導入する

「 control + C 」(Key同時押し) で、Reactアプリを停止します。

停止したら、Reactの状態管理ライブラリであるReduxを導入します。

yarn add redux

yarn add react-redux

# または、、、

npm install redux

npm install react-redux

ESLint(構文チェック・ツール)を導入する

ESLintは構文チェックのためのライブラリです。

導入は、次のコマンドで実行します。

### ESLint導入 Ver. TypeScript

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

yarn add -D eslint eslint-plugin-react eslint-plugin-react-hooks

# または、、、

npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

npm i --save-dev eslint-plugin-react eslint-plugin-react-hooks

「 .eslintrc.yml 」でESLintの構文チェック・ルールを設定する

「 .eslintrc.yml 」を srcディレクトリや、publicディレクトリと同じ最上位の階層に作成します。

ファイルの設定内容は、次のSampleCodeを使ってください。

ESLintの設定内容については、また別の記事にまとめます。

root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
extends:
  - eslint:recommended
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:react-hooks/recommended
  - prettier
rules: {
  # [ 'React' must be in scope when using JSX ] Error対応
  # https://zenn.dev/ryuu/scraps/583dad79532879
  react/react-in-jsx-scope: 'off'
}

Prettier(コード整形・ツール)を導入する

Prettierは、コード整形のためのライブラリです。

導入は、次のコマンドで実行します。


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

# または、、、

npm i --save-dev eslint-config-prettier eslint-plugin-prettier

「 .prettierrc.js 」でコード整形の設定をする

「 .prettierrc.js 」を srcディレクトリや、publicディレクトリと同じ最上位の階層に作成します。

ファイルの設定内容は、次のSampleCodeを使ってください。

Prettierの設定ファイルやコマンドについては、別の記事にまとめます。

module.exports = {
  printWidth: 120, // 折り返す行の長さを指定
  tabWidth: 2, // インデントのスペースの数を指定
  semi: false, // ステートメントの最後にセミコロンを追加
  parser: "typescript", // 使用するパーサーを指定
  arrowParens: "avoid", // アロー関数の()が省略可能でも常に書く => 省略可能なときは()を書かない(デフォルト)
  trailingComma: "es5", // 末尾のカンマの設定
};

package.json の状況を確認する Ver. Redux, ESLint, Prettierも導入

{
  "name": "pandas-output-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.2",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.4",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.41.0",
    "@typescript-eslint/parser": "^5.41.0",
    "eslint": "^8.26.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-react-hooks": "^4.6.0",
    "prettier": "^2.7.1"
  }
}

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

プログラミング学習・エンジニア転職関連の情報

TechAcademy

techgym

React関連の書籍

参考・引用

  1. 【入門】create-react-appでReactとTypeScript環境を構築
  2. Homebrew
  3. Node.js: Download

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

Apache-SmartPhone
【Apache】Apache(Webサーバー)でスマホ判定をし…

次の記事

【Apache】Apacheで接続元IPを判定して、特定のIP…
Apache-IP-Limit