« React + Vite + TS » : différence entre les versions
m Nicolas a déplacé la page React vers React + Vite + TS |
|||
| Ligne 6 : | Ligne 6 : | ||
<body> | <body> | ||
<!-- hosts the React application --> | <!-- hosts the React application --> | ||
<div id=" | <div id="root"></div> | ||
<!-- import index.js generated from index.jsx by a bundler such as Snowpack --> | <!-- import index.js generated from index.jsx by a bundler such as Snowpack --> | ||
<script type="module" src="/ | <script type="module" src="/src/main.tsx"></script> | ||
</body> | </body> | ||
</filebox> | </filebox> | ||
<filebox fn='src/ | <filebox fn='src/main.tsx'> | ||
import | import { StrictMode } from 'react' | ||
import | import { createRoot } from 'react-dom/client' | ||
createRoot(document.getElementById('root')!).render( | |||
<h1> | <StrictMode> | ||
<article> | |||
) | <h1>My App</h1> | ||
</article> | |||
</StrictMode>, | |||
) | |||
</filebox> | </filebox> | ||
<filebox fn='package.json'> | <filebox fn='package.json' collapsed> | ||
{ | { | ||
"name": "vite-react-typescript-starter", | |||
"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" | |||
} | } | ||
} | |||
</filebox> | </filebox> | ||
Version du 25 octobre 2024 à 21:26
Links
Basic App
| public/index.html |
<body>
<!-- hosts the React application -->
<div id="root"></div>
<!-- import index.js generated from index.jsx by a bundler such as Snowpack -->
<script type="module" src="/src/main.tsx"></script>
</body>
|
| src/main.tsx |
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<article>
<h1>My App</h1>
</article>
</StrictMode>,
)
|
| package.json |
{
"name": "vite-react-typescript-starter",
"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"
}
}
|
|
# install the NodeJS packages
npm i
# run the app
npm start
|
Component
| src/App.jsx |
import React from 'react';
function App() {
return (
// one root element
<article>
<h1>Recipe Manager</h1>
</article>
)
}
export default App;
|
| src/index.jsx |
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
|