https://github.com/tf63/react-template

React テンプレート
https://github.com/tf63/react-template

eslint plop pnpm prettier react storybook tailwindcss vite

Last synced: 3 months ago
JSON representation

React テンプレート

• Host: GitHub
• URL: https://github.com/tf63/react-template
• Owner: tf63
• Created: 2024-01-19T06:05:32.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-07-31T13:50:26.000Z (10 months ago)
• Last Synced: 2025-01-27T05:39:04.402Z (4 months ago)
• Topics: eslint, plop, pnpm, prettier, react, storybook, tailwindcss, vite
• Language: TypeScript
• Homepage:
• Size: 459 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### react template

```

    # プロジェクトの作成

    npm create vite@latest

    # パッケージのインストール

    npm install

    # 新規インストール

    npm install 

    # 開発サーバーの立ち上げ

    npm run dev

```

```

    /app $ npm create vite@latest

    Need to install the following packages:

    [email protected]

    Ok to proceed? (y) y

    ✔ Project name: … frontend

    ✔ Select a framework: › React

    ✔ Select a variant: › TypeScript + SWC

    Scaffolding project in /app/frontend...

    Done. Now run:

    cd frontend

    npm install

    npm run dev

```

`vite.config.ts`をいじる

```

    export default defineConfig({

    plugins: [react()],

        server: {

            host: true,

        },

    });

```

### tailwindcssの導入

https://tailwindcss.com/docs/guides/vite

```

    npm install -D tailwindcss

    npx tailwindcss init

```

`tailwind.config.js`をいじる

```

    /** @type {import('tailwindcss').Config} */

    export default {

    content: [

        "./index.html",

        "./src/**/*.{js,ts,jsx,tsx}",

    ],

    theme: {

        extend: {},

    },

    plugins: [],

    }

```

### ESLintの設定

参考

-   https://zenn.dev/knowledgework/articles/0994f518015c04?redirected=1