React Vite Template

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Here's a good pack for icons:

• React Icons

When setting up a React app with Vite, you can run this to generate a template:

npm create [email protected] my-react-vite-template -- --template react

Follow the commands it gives you in the terminal.

npm install -D vite-plugin-eslint

The above command gives you a helpful linter package. In vite.config.js The ESlint plugin should be added to the list of imports.

Then, in defineConfig, add eslint to the plugins array:

export default defineConfig(({ mode }) => ({ // <-- Change this line too!
  plugins: [
    react(),
    eslint({
      lintOnStart: true,
      failOnError: mode === "production"
    })
  ],
  server: {
    open: true
  }
}))

Next in .eslintrc.cjs add this under rules:

rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'react/prop-types': 'off' // <-- Add this line
  },

Add 'node_modules' in ignorePatterns array in this same file.

Take out all of React/Vite's needless self promotion by removing the first div in src/App.jsx, deleting the assets folder entirely, removing the public/vite.svg, deleting App.css and removing its import in App.jsx and deleting the content of index.css to add your own later.

Put this all in a git repo and thank me later!