From aa11d79bf2dae5c2d72aed093437313c0ef781b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kenan=20Ali=C4=87?= Date: Tue, 23 Sep 2025 16:28:12 +0200 Subject: [PATCH] Tidied Vite react-ts template --- web/README.md | 73 ---------------------------------------- web/index.html | 30 +++++++++++------ web/public/vite.svg | 1 - web/src/App.css | 42 ----------------------- web/src/App.tsx | 35 ------------------- web/src/assets/react.svg | 1 - web/src/index.css | 68 ------------------------------------- web/src/main.tsx | 10 ------ web/src/routes/Root.tsx | 2 ++ web/src/vite-root.tsx | 12 +++++++ 10 files changed, 34 insertions(+), 240 deletions(-) delete mode 100644 web/README.md delete mode 100644 web/public/vite.svg delete mode 100644 web/src/App.css delete mode 100644 web/src/App.tsx delete mode 100644 web/src/assets/react.svg delete mode 100644 web/src/index.css delete mode 100644 web/src/main.tsx create mode 100644 web/src/routes/Root.tsx create mode 100644 web/src/vite-root.tsx diff --git a/web/README.md b/web/README.md deleted file mode 100644 index 4866cf0..0000000 --- a/web/README.md +++ /dev/null @@ -1,73 +0,0 @@ -# React + TypeScript + Vite - -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](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) 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 - -## React Compiler - -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: - -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - - // 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, - - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) -``` - -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: - -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' - -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... - }, - }, -]) -``` diff --git a/web/index.html b/web/index.html index af88f03..fb5e443 100644 --- a/web/index.html +++ b/web/index.html @@ -1,13 +1,23 @@ - - - - - web - - -
- - + + + + + + + + + Web + + + + + +
+ + diff --git a/web/public/vite.svg b/web/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/web/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/App.css b/web/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/web/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/web/src/App.tsx b/web/src/App.tsx deleted file mode 100644 index 3d7ded3..0000000 --- a/web/src/App.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' - -function App() { - const [count, setCount] = useState(0) - - return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) -} - -export default App diff --git a/web/src/assets/react.svg b/web/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/web/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/src/index.css b/web/src/index.css deleted file mode 100644 index 08a3ac9..0000000 --- a/web/src/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/web/src/main.tsx b/web/src/main.tsx deleted file mode 100644 index bef5202..0000000 --- a/web/src/main.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' - -createRoot(document.getElementById('root')!).render( - - - , -) diff --git a/web/src/routes/Root.tsx b/web/src/routes/Root.tsx new file mode 100644 index 0000000..70bee42 --- /dev/null +++ b/web/src/routes/Root.tsx @@ -0,0 +1,2 @@ +const Root = () => <>Root; +export default Root; diff --git a/web/src/vite-root.tsx b/web/src/vite-root.tsx new file mode 100644 index 0000000..4c3fd94 --- /dev/null +++ b/web/src/vite-root.tsx @@ -0,0 +1,12 @@ +/* React-related */ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; + +/* Route-related */ +import Root from "./routes/Root"; + +createRoot(document.getElementById("root")!).render( + + + , +);