« React + Vite + TS » : différence entre les versions
| Ligne 2 : | Ligne 2 : | ||
* [https://react.dev React] | * [https://react.dev React] | ||
= | = Basic App = | ||
<filebox fn='public/index.html'> | <filebox fn='public/index.html'> | ||
<body> | <body> | ||
| Ligne 46 : | Ligne 46 : | ||
npm start | npm start | ||
</kode> | </kode> | ||
= Component = | |||
<filebox fn='App.jsx'> | |||
import React from 'react'; | |||
function App() { | |||
return ( | |||
// one root element | |||
<article> | |||
<h1>Recipe Manager</h1> | |||
</article> | |||
) | |||
} | |||
export default App; | |||
</filebox> | |||
= [https://vite.dev Vite] = | = [https://vite.dev Vite] = | ||
= [https://www.snowpack.dev Snowpack] = | = [https://www.snowpack.dev Snowpack] = | ||
Version du 25 octobre 2024 à 21:12
Links
Basic App
| public/index.html |
<body>
<!-- hosts the React application -->
<div id="app"></div>
<!-- import index.js generated from index.jsx by a bundler such as Snowpack -->
<script type="module" src="/dist/index.js"></script>
</body>
|
| src/index.jsx |
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
|
| package.json |
{
"scripts": {
"start": "snowpack dev",
"build": "snowpack build"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"snowpack": "^3.8.8"
}
}
|
|
# install the NodeJS packages
npm i
# run the app
npm start
|
Component
| App.jsx |
import React from 'react';
function App() {
return (
// one root element
<article>
<h1>Recipe Manager</h1>
</article>
)
}
export default App;
|