（question）Is there any practical example of purely using CDN? about preact HOT 5 CLOSED

Based on the usage in the example, how should I write a reusable component?

App is a component in that example. Probably not one you'd want to use more than once, but you absolutely could. There's no functional difference.

Or how the component should be stored in a separate js file and then used elsewhere

Use standard ES6 imports.

// my-count.js
import { useState } from 'preact/hooks';
import { html } from 'htm/preact';

export function MyCount({ label }) {
  const [count, setCount] = useState(0);

  return html`
    <p>${label}</p>
    <button onClick=${() => setCount(count + 1)}>Current count is: ${count}</button>
  `;
}

<script type="module">
  import { render } from 'preact';
  import { useReducer } from 'preact/hooks';
  import { html } from 'htm/preact';

  import { MyCount } from './my-count.js';

  export function App() {
    const [count, add] = useReducer((a, b) => a + b, 0);

    return html`
      <button onClick=${() => add(-1)}>Decrement</button>
      <input readonly size="4" value=${count} />
      <button onClick=${() => add(1)}>Increment</button>
      <${MyCount} label="1" />
      <${MyCount} label="2" />
    `;
  }

  render(html`<${App} />`, document.body);
</script>

from preact.

Looking for anything beyond this?

https://preactjs.com/guide/v10/getting-started#using-preact-with-htm-and-importmaps

Edit: Usually people want "buildless", hence HTM + CDNs in that example. Is that what you're after, or do you just want the CDN bit (and still compiling JSX in some form)?

from preact.

Looking for anything beyond this?

https://preactjs.com/guide/v10/getting-started#using-preact-with-htm-and-importmaps

Edit: Usually people want "buildless", hence HTM + CDNs in that example. Is that what you're after, or do you just want the CDN bit (and still compiling JSX in some form)?

This is indeed what I want, but the example is too simple. Based on the usage in the example, how should I write a reusable component? Or how the component should be stored in a separate js file and then used elsewhere

from preact.

Based on the usage in the example, how should I write a reusable component?

App is a component in that example. Probably not one you'd want to use more than once, but you absolutely could. There's no functional difference.

Or how the component should be stored in a separate js file and then used elsewhere

Use standard ES6 imports.

// my-count.js
import { useState } from 'preact/hooks';
import { html } from 'htm/preact';

export function MyCount({ label }) {
  const [count, setCount] = useState(0);

  return html`
    <p>${label}</p>
    <button onClick=${() => setCount(count + 1)}>Current count is: ${count}</button>
  `;
}

<script type="module">
  import { render } from 'preact';
  import { useReducer } from 'preact/hooks';
  import { html } from 'htm/preact';

  import { MyCount } from './my-count.js';

  export function App() {
    const [count, add] = useReducer((a, b) => a + b, 0);

    return html`
      <button onClick=${() => add(-1)}>Decrement</button>
      <input readonly size="4" value=${count} />
      <button onClick=${() => add(1)}>Increment</button>
      <${MyCount} label="1" />
      <${MyCount} label="2" />
    `;
  }

  render(html`<${App} />`, document.body);
</script>

thank

from preact.

No problem, and if you do have any further questions, our Slack is a great place to get faster answers usually.

from preact.