https://github.com/gomagoma676/tanstack-react-query-rtk-lesson
High Performance React development : Section 2 🚀 updated to React18, @tanstack/react-query, react-router-dom-v6
https://github.com/gomagoma676/tanstack-react-query-rtk-lesson
react-router-dom-v6 react18 tanstack-react-query
Last synced: 2 months ago
JSON representation
High Performance React development : Section 2 🚀 updated to React18, @tanstack/react-query, react-router-dom-v6
- Host: GitHub
- URL: https://github.com/gomagoma676/tanstack-react-query-rtk-lesson
- Owner: GomaGoma676
- Created: 2022-07-25T12:30:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-08T08:28:17.000Z (almost 3 years ago)
- Last Synced: 2025-02-27T23:36:41.976Z (7 months ago)
- Topics: react-router-dom-v6, react18, tanstack-react-query
- Language: TypeScript
- Homepage:
- Size: 471 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 1. Project setup :
### 1-1. yarn install *インストールしていない場合
npm install --global yarn
yarn --version
### 1-2. create-react-app
npx create-react-app react-query-lesson --template redux-typescript
### 1-3. Tailwind CSS のインストール
### https://tailwindcss.com/docs/guides/create-react-app
1. 下記二つのコマンドの実行
~~~
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
~~~
2. tailwind.config.jsファイルを開いて、contentの箇所を下記内容に書き換え
~~~
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
~~~
3. src/index.cssを下記3行で書き換え
~~~
@tailwind base;
@tailwind components;
@tailwind utilities;
~~~
### 1-4. @tanstack/react-query axios react-router-dom heroicons のインストール
yarn add @tanstack/react-query @tanstack/react-query-devtools react-router-dom @types/react-router-dom axios@0.27.2 @heroicons/react@1.0.6
### 1-5. prettierの設定 : settingsでRequire Config + Format On Saveにチェック
touch .prettierrc
~~~
{
"singleQuote": true,
"semi": false
}
~~~