« React + Vite + TS » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 2 : Ligne 2 :
* [https://react.dev React]
* [https://react.dev React]


= Exemple =
= 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"
    }
  }
Bash.svg
# 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;

Vite

Snowpack