$ npm create vite@latest pokemon-app -- --template react-ts
$ cd pokemon-app

$ npm install react-router-dom

$ npm i linaria

$ npm i chart.js

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

// (importの最後)
+ import eslintConfigPrettier from "eslint-config-prettier";

export default tseslint.config(
    // (...略)
    {
        extends: [
          js.configs.recommended,
          ...tseslint.configs.recommended,
+           eslintConfigPrettier,
        ],
    // (...略)

npm install --save-dev stylelint @linaria/stylelint-config-standard-linaria stylelint-config-prettier
npm install --save-dev stylelint-processor-styled-components

touch .stylelintrc.json

{
  "extends": [
    "@linaria/stylelint-config-standard-linaria",
    "stylelint-config-prettier"
  ],
  "processors": ["stylelint-processor-styled-components"],
  "files": ["**/*.{js,jsx,ts,tsx}"]
}

 // (...略)
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
+    "lint": "npm run eslint-check-fix && npm run stylelint-check",
    "preview": "vite preview",
+    "eslint-check-fix": "eslint . && prettier --write src/**/*.{ts,tsx}",
+    "stylelint-check": "stylelint-config-prettier-check '**/*.{js,jsx,ts,tsx}'"
  },
// (...略)

    "scripts": {
        "dev": "vite",
        "build": "tsc -b && vite build",
        "lint": "npm run eslint-check-fix && npm run stylelint-check",
        "preview": "vite preview",
        "eslint-check-fix": "eslint . && prettier --write src/**/*.{ts,tsx}",
        "stylelint-check": "stylelint-config-prettier-check '**/*.{js,jsx,ts,tsx}'",
        "prepare": "husky"
    },
+    "lint-staged": {
+        "**/*": "npm run lint"
+    },

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
+    base: './',
    plugins: [react()],
})

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: reviewdog

on:
  pull_request:
    branches: [ "dev" ]

jobs:
  reviewdog:

    runs-on: ubuntu-latest

    permissions:
      contents: read
      pull-requests: write
      
    strategy:
      matrix:
        node-version: [22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v4
    - name: misspell
      uses: reviewdog/action-misspell@v1
      with:
        github_token: ${{ secrets.github_token }}
        locale: "US"
    - uses: EPMatt/reviewdog-action-prettier@v1
      with:
        github_token: ${{ secrets.github_token }}
        # Change reviewdog reporter if you need
        # [github-pr-check,github-check,github-pr-review].
        # More about reviewdog reporters at
        # https://github.com/reviewdog/reviewdog#reporters
        reporter: github-pr-review
        # Change reporter level if you need
        # [info,warning,error].
        # More about reviewdog reporter level at
        # https://github.com/reviewdog/reviewdog#reporters
        level: warning
    - uses: reviewdog/action-eslint@v1
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        reporter: github-pr-review # Change reporter.
        eslint_flags: "src/"
    - name: stylelint
      uses: reviewdog/action-stylelint@v1
      with:
        reporter: github-pr-review # Change reporter.
        stylelint_input: '**/*.css'
    - uses: EPMatt/reviewdog-action-tsc@v1
      with:
        github_token: ${{ secrets.github_token }}
        # Change reviewdog reporter if you need
        # [github-pr-check,github-check,github-pr-review].
        # More about reviewdog reporters at
        # https://github.com/reviewdog/reviewdog#reporters
        reporter: github-pr-review
        # Change reporter level if you need
        # [info,warning,error].
        # More about reviewdog reporter level at
        # https://github.com/reviewdog/reviewdog#reporters
        level: warning

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI Test

on:
  push:
    branches: [ "dev" ]
  pull_request:
    branches: [ "dev" ]

jobs:
  test:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [22.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v4
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
   # - run: npm test

# Simple workflow for deploying static content to GitHub Pages
name: Deploy react to GitHub Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 22.6.0
          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build      
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

$ npm run dev

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
+ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import App from './App.tsx'
import './index.css'

+ const router = createBrowserRouter([
+     {
+         path: '/',
+         element: <App />,
+     },
+     {
+         path: 'poke',
+         element: <div>poke</div>,
+     },
+ ])

createRoot(document.getElementById('root')!).render(
    <StrictMode>
+        <RouterProvider router={router} />
-        <App />
    </StrictMode>
)

npm list react-router-dom

npm i @chakra-ui/react @emotion/react
npx @chakra-ui/cli snippet add

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+ import { Provider } from './components/ui/provider'
import App from './App.tsx'
import './index.css'

const router = createBrowserRouter([
    {
        path: '/',
        element: <App />,
    },
    {
        path: 'poke',
        element: <div>poke</div>,
    },
])

createRoot(document.getElementById('root')!).render(
    <StrictMode>
+        <Provider>
            <RouterProvider router={router} />
+        </Provider>
    </StrictMode>
)

async function fetchList() {
    return fetch('https://pokeapi.co/api/v2/pokemon')
}

export { fetchList }

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { Provider } from './components/ui/provider'
import App from './App.tsx'
+ import { fetchList } from './utils'
import './index.css'

const router = createBrowserRouter([
    {
        path: '/',
+        loader: fetchList,
        element: <App />,
    },
    {
        path: 'poke',
        element: <div>poke</div>,
    },
])

createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <Provider>
            <RouterProvider router={router} />
        </Provider>
    </StrictMode>
)

import { Suspense } from 'react'
import { useLoaderData } from 'react-router-dom'
import { Spinner, Flex, Card } from '@chakra-ui/react'
import './App.css'

function App() {
    const listData: any = useLoaderData()
    console.log(listData)

    return (
        <>
            <header>
                <h1>Pokemon app</h1>
            </header>
            <main>
                <Flex>
                    <Suspense fallback={<Spinner />}>
                        {listData.results.map((pokemon: any) => (
                            <Card.Root maxW="sm" overflow="hidden">
                                <Card.Body>
                                    <Card.Title>{pokemon.name}</Card.Title>
                                </Card.Body>
                            </Card.Root>
                        ))}
                    </Suspense>
                </Flex>
            </main>
        </>
    )
}

export default App