{"id":24880014,"url":"https://github.com/lvncer/react_env_2024","last_synced_at":"2026-04-11T00:14:59.711Z","repository":{"id":248794304,"uuid":"829796493","full_name":"lvncer/react_env_2024","owner":"lvncer","description":"React開発環境をセットアップするためのリポジトリ。2024年版。","archived":false,"fork":false,"pushed_at":"2024-07-17T03:11:25.000Z","size":76,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-01T10:18:29.656Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lvncer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-17T03:07:22.000Z","updated_at":"2025-01-23T12:59:01.000Z","dependencies_parsed_at":"2024-07-17T05:58:07.685Z","dependency_job_id":"470c7207-b70a-486e-b3e2-059e7d534101","html_url":"https://github.com/lvncer/react_env_2024","commit_stats":null,"previous_names":["hellotksan/react_env_2024","lvncer/react_env_2024"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lvncer%2Freact_env_2024","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lvncer%2Freact_env_2024/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lvncer%2Freact_env_2024/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lvncer%2Freact_env_2024/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lvncer","download_url":"https://codeload.github.com/lvncer/react_env_2024/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245785820,"owners_count":20671634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ci-cd","coverage","eslint","github-actions","husky","lint","lint-staged","react","shadcn-ui","tailwindcss","vite","vitest"],"created_at":"2025-02-01T10:18:27.997Z","updated_at":"2025-12-30T23:23:37.085Z","avatar_url":"https://github.com/lvncer.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + TypeScript + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n## Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend updating the configuration to enable type aware lint rules:\n\n- Configure the top-level `parserOptions` property like this:\n\n```js\nexport default {\n  // other rules...\n  parserOptions: {\n    ecmaVersion: \"latest\",\n    sourceType: \"module\",\n    project: [\"./tsconfig.json\", \"./tsconfig.node.json\"],\n    tsconfigRootDir: __dirname,\n  },\n};\n```\n\n- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`\n- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`\n- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` \u0026 `plugin:react/jsx-runtime` to the `extends` list\n\n## React env setup for 2024 (Step by Step)\n\n1. node -v(volta list)\n2. npm create vite@latest sample-app -- --template react-swc-ts\n3. npm run dev, build, preview\n4. tsconfig.json(path alias)\n\n```json\n\"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"paths\": {\n      \"@/*\": [\"src/*\"]\n    }\n  },\n```\n\n5. npm i -D vite-tsconfig-paths (これで vite.config.ts は編集する必要なし)\n6. vite.config.ts\n\n```ts\nimport react from \"@vitejs/plugin-react-swc\";\nimport { defineConfig } from \"vite\";\nimport tsconfigPaths from \"vite-tsconfig-paths\";\n\nexport default defineConfig({\n  plugins: [react(), tsconfigPaths()], //for path alias\n});\n```\n\n7. npm install -D \\\n   vitest \\\n   happy-dom \\\n   @vitest/coverage-v8 \\\n   @testing-library/react \\\n   @testing-library/user-event \\\n   @testing-library/jest-dom\n\n8. \"coverage\": \"vitest run --coverage\"\n\n9. vite.config.ts\n\n```ts\n/// \u003creference types=\"vitest\" /\u003e\nimport react from \"@vitejs/plugin-react-swc\";\nimport { defineConfig } from \"vite\";\nimport tsconfigPaths from \"vite-tsconfig-paths\";\n\nexport default defineConfig({\n  plugins: [react(), tsconfigPaths()],\n  test: {\n    // globals: true,\n    environment: \"happy-dom\",\n    setupFiles: [\"./vitest-setup.ts\"],\n  },\n});\n```\n\n10. vitest-setup.ts(import \"@testing-library/jest-dom/vitest\")\n\n11. tsconfig.json\n\n```json\n{\n  \"include\": [\"src\", \"vitest-setup.ts\"]\n}\n```\n\n12. src/components/Count.tsx\n\n```tsx\n// TextInput.js\nimport { useState } from \"react\";\n\nconst TextInput = () =\u003e {\n  const [text, setText] = useState(\"\");\n\n  return (\n    \u003cdiv\u003e\n      \u003cinput\n        type=\"text\"\n        value={text}\n        onChange={(e) =\u003e setText(e.target.value)}\n        placeholder=\"Enter some text\"\n        aria-label=\"Text Input\"\n      /\u003e\n      \u003cp\u003eEntered Text: {text}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default TextInput;\n```\n\n13. Count.test.tsx (and run coverage, test)\n\n```tsx\n// TextInput.test.js\nimport userEvent from \"@testing-library/user-event\";\nimport { render, screen } from \"@testing-library/react\";\nimport TextInput from \"./TextInput\";\n\ntest(\"TextInput Component Test\", async () =\u003e {\n  const user = userEvent.setup();\n  render(\u003cTextInput /\u003e);\n\n  const inputElement = screen.getByLabelText(\"Text Input\");\n  expect(screen.getByText(\"Entered Text:\")).toBeInTheDocument();\n\n  await user.type(inputElement, \"Hello World\");\n  expect(screen.getByText(\"Entered Text: Hello World\")).toBeInTheDocument();\n});\n```\n\n14. npm install -D eslint, npx eslint --init\n\n15. \"lint\": \"eslint src\" (added package.json), and npm run lint\n\n16. .eslintrc.cjs\n\n```cjs\nmodule.exports = {\n  env: {\n    browser: true,\n    es2021: true,\n  },\n  extends: [\n    \"eslint:recommended\",\n    \"plugin:@typescript-eslint/recommended\",\n    \"plugin:react/recommended\",\n  ],\n  overrides: [\n    {\n      env: {\n        node: true,\n      },\n      files: [\".eslintrc.{js,cjs}\"],\n      parserOptions: {\n        sourceType: \"script\",\n      },\n    },\n  ],\n  parser: \"@typescript-eslint/parser\",\n  parserOptions: {\n    ecmaVersion: \"latest\",\n    sourceType: \"module\",\n  },\n  plugins: [\"@typescript-eslint\", \"react\"],\n  rules: {\n    \"react/react-in-jsx-scope\": \"off\",\n  },\n};\n```\n\n17. mod a App.tsx a tag rel=\"noreferrer\"\n\n18. add some eslint roles (optional)\n\n19. npm i -D prettier\n\n```js\n/** @type {import(\"prettier\").Config} */\nconst config = {};\n\nexport default config;\n```\n\n20. \"lint\": \"eslint src\"\n\n21. \"prettier plugin and settings.json format on save\"\n\n22. husky + lint-stataged\n\n```cmd\ngit init\nnpm install --save-dev husky lint-staged\nnpx husky install\nnpm pkg set scripts.prepare=\"husky install\"\nnpx husky add .husky/pre-commit \"npx lint-staged\"\n```\n\n23. pakage.json change and git add . git commit -m \"init\"\n\n```json\n{\n  \"lint-staged\": {\n    \"*.{js,jsx,ts,tsx,md}\": [\"prettier --write\", \"eslint --fix\"]\n  },\n  \"ignorePatterns\": [\"!.storybook\"]\n}\n```\n\n24. npx storybook init --builder @storybook/builder-vite\n\n25. create storyBook directory and file (TextInput/TextInput.stories.tsx)\n\n26. npm install -D tailwindcss postcss autoprefixer\n    npx tailwindcss init -p\n\n27. tailwind.config.js\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\"./index.html\", \"./src/**/*.{js,ts,jsx,tsx}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n```\n\n28. index.css\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n29. check className utility\n\n30. npx shadcn-ui@latest init\n\n31. Would you like to use TypeScript (recommended)? no / yes\n    Which style would you like to use? › Default\n    Which color would you like to use as base color? › Slate\n    Where is your global CSS file? › › src/index.css\n    Do you want to use CSS variables for colors? › no / yes\n    Where is your tailwind.config.js located? › tailwind.config.js\n    Configure the import alias for components: › @/components\n    Configure the import alias for utils: › @/lib/utils\n    Are you using React Server Components? › no / yes (no)\n\n32. mod tailwind.config.js\n\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n  darkMode: [\"class\"],\n  content: [\n    \"./pages/**/*.{ts,tsx}\",\n    \"./components/**/*.{ts,tsx}\",\n    \"./app/**/*.{ts,tsx}\",\n    \"./src/**/*.{ts,tsx}\",\n  ],\n  prefix: \"\",\n  theme: {\n    container: {\n      center: true,\n      padding: \"2rem\",\n      screens: {\n        \"2xl\": \"1400px\",\n      },\n    },\n    extend: {\n      colors: {\n        border: \"hsl(var(--border))\",\n        input: \"hsl(var(--input))\",\n        ring: \"hsl(var(--ring))\",\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [import(\"tailwindcss-animate\")],\n};\n```\n\n33. npx shadcn-ui@latest add button\n\n34. github actions setup\n\n35. .github/workflows/lint.yml \u0026 test.yml\n\n```lint.yml\nname: Lint\n\non: push\n\njobs:\n  lint:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: \"20\"\n      - run: npm ci\n      - run: npm run lint\n```\n\n```test.yml\nname: Test\n\non: push\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: \"20\"\n\n      - run: npm ci\n      - run: npm run test\n```\n\nor lint_test.yml\n\n```yml\nname: Lint and Test\n\non: push\n\njobs:\n  lint-and-test:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v4\n\n      - name: Setup Node\n        uses: actions/setup-node@v4\n        with:\n          node-version: \"20\"\n\n      - name: Install Dependencies\n        run: npm ci\n\n      - name: Run Lint\n        run: npm run lint\n\n      - name: Run Test\n        run: npm run test\n```\n\n36. CD(Vite 静的ホスティング参照)\n\n#### Reference\n\nhttps://zenn.dev/tentel/articles/488dd8765fb059\nhttps://zenn.dev/kazukix/articles/react-setup-2024\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flvncer%2Freact_env_2024","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flvncer%2Freact_env_2024","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flvncer%2Freact_env_2024/lists"}