« React + Vite + TS » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 48 : | Ligne 48 : | ||
= Component = | = Component = | ||
<filebox fn='App.jsx'> | <filebox fn='src/App.jsx'> | ||
import React from 'react'; | import React from 'react'; | ||
Ligne 61 : | Ligne 61 : | ||
export default App; | export default App; | ||
</filebox> | |||
<filebox fn='src/index.jsx'> | |||
import React from 'react'; | |||
import ReactDOM from 'react-dom'; | |||
import App from './App'; | |||
ReactDOM.render( | |||
<App />, | |||
document.getElementById('app') | |||
); | |||
</filebox> | </filebox> | ||
Version du 25 octobre 2024 à 21:13
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
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') ); |