« React + Vite + TS » : différence entre les versions
| 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 |
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>,
)
|