2025-11-08 15:01:58 -06:00
# React + TypeScript + Vite
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
Currently, two official plugins are available:
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
- [@vitejs/plugin-react ](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react ) uses [Babel ](https://babeljs.io/ ) (or [oxc ](https://oxc.rs ) when used in [rolldown-vite ](https://vite.dev/guide/rolldown )) for Fast Refresh
- [@vitejs/plugin-react-swc ](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc ) uses [SWC ](https://swc.rs/ ) for Fast Refresh
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
## React Compiler
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
The React Compiler is enabled on this template. See [this documentation ](https://react.dev/learn/react-compiler ) for more information.
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
Note: This will impact Vite dev & build performances.
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
## Expanding the ESLint configuration
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
```js
export default defineConfig ([
globalIgnores ([ 'dist' ]),
{
files : [ '**/*.{ts,tsx}' ],
extends : [
// Other configs...
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
// Remove tseslint.configs.recommended and replace with this
tseslint . configs . recommendedTypeChecked ,
// Alternatively, use this for stricter rules
tseslint . configs . strictTypeChecked ,
// Optionally, add this for stylistic rules
tseslint . configs . stylisticTypeChecked ,
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
// Other configs...
],
languageOptions : {
parserOptions : {
project : [ './tsconfig.node.json' , './tsconfig.app.json' ],
tsconfigRootDir : import . meta . dirname ,
},
// other options...
},
},
])
```
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
You can also install [eslint-plugin-react-x ](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x ) and [eslint-plugin-react-dom ](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom ) for React-specific lint rules:
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
2025-11-08 13:23:57 -06:00
2025-11-08 15:01:58 -06:00
export default defineConfig ([
globalIgnores ([ 'dist' ]),
{
files : [ '**/*.{ts,tsx}' ],
extends : [
// Other configs...
// Enable lint rules for React
reactX . configs [ 'recommended-typescript' ],
// Enable lint rules for React DOM
reactDom . configs . recommended ,
],
languageOptions : {
parserOptions : {
project : [ './tsconfig.node.json' , './tsconfig.app.json' ],
tsconfigRootDir : import . meta . dirname ,
},
// other options...
},
},
])
```