-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
(question)Is there any practical example of purely using CDN? #4251
Comments
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 |
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 |
No problem, and if you do have any further questions, our Slack is a great place to get faster answers usually. |
Hello, I am a back-end developer, but I don’t know much about front-end engineering technology. I would like to ask if there is a practical case of purely using CDN, because I am observing whether Preact can be integrated with Thymeleaf in SpringBoot.
The text was updated successfully, but these errors were encountered: