Links

React

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')
);

React + Vite + TS

Links

Basic App

Component

Vite

Snowpack