Create React App의 Redux 템플릿 디렉토리 구조 분석
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
Reference
이 문제에 관하여(Create React App의 Redux 템플릿 디렉토리 구조 분석), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shunku/items/378e4929007f905bafc8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ npx create-react-app todo --template redux
$ cd todo
$ yarn start
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
Reference
이 문제에 관하여(Create React App의 Redux 템플릿 디렉토리 구조 분석), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shunku/items/378e4929007f905bafc8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ 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
{
"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
Reference
이 문제에 관하여(Create React App의 Redux 템플릿 디렉토리 구조 분석), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shunku/items/378e4929007f905bafc8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
├── 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
Reference
이 문제에 관하여(Create React App의 Redux 템플릿 디렉토리 구조 분석), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shunku/items/378e4929007f905bafc8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)