Create React App の Redux テンプレートのディレクトリ構造を分析する

8372 ワード
create-react-app redux-toolkit React redux React テキストリンク

create-react-app コマンドで Redux テンプレートを使用して作成する

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

$ cd todo
$ yarn start

http://localhost:3000 へアクセス

node_modules 以外のディレクトリ構造

$ tree -I node_modules
.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── app
│   │   └── store.js
│   ├── features
│   │   └── counter
│   │       ├── Counter.js
│   │       ├── Counter.module.css
│   │       └── counterSlice.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
│   └── setupTests.js
└── yarn.lock

package.json の中身

{
  "name": "todo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.1.3",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

作成されたテンプレートのディレクトリ構造を確認する

├── README.md
├── package.json
├── public
# => 静的ファイル置き場
├── src
│   ├── App.css
    # => App.js で使用する CSS ファイル
    # ※ import './App.css'; で読み込む
│   ├── App.js
    # => アプリケーションのメインコンポーネント
│   ├── App.test.js
    # => App.js のテストコード
│   ├── app
│   │   └── store.js
        # => Redux の store
│   ├── features
│   │   └── counter
│   │       ├── Counter.js
            # => Counter コンポーネント
            # ※ 画面に表示されている数字を上げ下げ出来る。
│   │       ├── Counter.module.css
            # => Counter コンポーネントの CSS ファイル
            # ※ import styles from './Counter.module.css'; で読み込む
            # ※ className={styles.button} の様に使う
            # ※ コンポーネント内で独自のスタイルを定義したいときに使う
│   │       └── counterSlice.js
            # => Counter コンポーネントの “slice” オブジェクト
            # ※ reducer 関数を持つオブジェクト
            # ※ reducer の名前に基づいて、action type の文字列と action creator を作成できる
            # ※ slice オブジェクトについては、Redux Toolkit の公式ドキュメントを参照 [1]
│   ├── index.css
    # => メイン CSS ファイル
    # ※ グローバルなスタイルを定義したいときに使う
│   ├── index.js
    # => メイン JS ファイル
│   ├── logo.svg
│   ├── serviceWorker.js
    # => Service Worker 設定ファイル
    # => Service Worker を使いたいときに使用する
│   └── setupTests.js
    # => テスト実行前の初期設定ファイル
└── yarn.lock

[1] Basic Tutorial | Redux Toolkit