« React + Vite + TS » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 19 : | Ligne 19 : | ||
<!-- hosts the React application --> | <!-- hosts the React application --> | ||
<div id="root"></div> | <div id="root"></div> | ||
<!-- import | <!-- import main.tsx --> | ||
<script type="module" src="/src/main.tsx"></script> | <script type="module" src="/src/main.tsx"></script> | ||
</body> | </body> |
Version du 25 octobre 2024 à 21:46
Links
Command line
# create a new project (framework: React, variant: TypeScript) npm create vite@latest # install the packages npm install # run the project npm run dev |
Basic App
public/index.html |
<body> <!-- hosts the React application --> <div id="root"></div> <!-- import main.tsx --> <script type="module" src="/src/main.tsx"></script> </body> |
src/main.tsx |
import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import './index.css' createRoot(document.getElementById('root')!).render( <StrictMode> <h1>My App</h1> </StrictMode>, ) |
package.json |
{ "name": "vite-project", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.13.0", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.3", "eslint": "^9.13.0", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.13", "globals": "^15.11.0", "typescript": "~5.6.2", "typescript-eslint": "^8.10.0", "vite": "^5.4.9" } } |
Component
src/App.tsx |
import { useState } from 'react' import './App.css' function App() { const [count, setCount] = useState(0) return ( <> <h1>My App</h1> </> ) } export default App |
src/main.tsx |
import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' import App from './App.tsx' createRoot(document.getElementById('root')!).render( <StrictMode> <App /> </StrictMode>, ) |