Setup Preact via <script> tag? #484
Comments
|
@rafaelferreiraql It works fine from the CDN. Preact and the examples are written in ES2015, but everything is actually shipped as ES3 / ES5. A while back we created an example project for this type of a setup (no webpack, transpilers, any of that - just script tags in an HTML page). You might find it useful: https://github.com/developit/preact-in-es3 To answer your question though, here's a working cdnjs example (view on JSFiddle): <script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.1.0/preact.js"></script>
<script>
var h = preact.h; // for convenience
// an App classful component
function App() {}
App.prototype.render = function(props, state) {
return h('div', { class:'app' },
h('h1', null, 'Hello, World!'),
h('ol', null,
h('li', null, 'Item One'),
h('li', null, 'Item Two')
)
);
};
// render <App /> into <body>
preact.render(
h(App),
document.body
);
</script>If you want to use Babel in your page, while I strongly recommend against doing so, it works identically to React. You will need to tell Babel to transform your JSX to <!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
preact.render(<h1>Demo</h1>, document.body);
</script>
<!-- option 2: tell Babel to use h() -->
<script type="text/babel">
/** @jsx h */
preact.render(<h1>Demo</h1>, document.body);
</script> |
|
You can also use unpkg.com: |
|
yup yup. #protip the minified version is on there too: |
|
It's a relief it's supposed to work via CDN too! In fact, I found out what was the problem, I just didn't try to prefix h() or render(). In hindsight, those would be pretty nasty global variables to begin with. Thanks for your help! |
|
@developit how App is added to |
|
@avinashdvv To use JSX in a script tag, you'll need to include Babel runtime on your page as well. As mentioned above, it's recommended to avoid this if possible. However, if this is still something you need to do, you must include a JSX transformer preset or plugin for Babel (eg, /* @jsx preact.h */
preact.render(<h1>Demo</h1>, document.body);
// or:
/* @jsx h */
var { render, h } = preact;
render(<h1>Demo</h1>, document.body); You're much better off (IMO) using the |
|
It's very simple |
|
well if you use what luke posted above, you don't need to define |
|
This snippet no longer works (it works as is, but not when preact==10.11.3 is loaded. It seems the new version no longer sets |
|
@hacker-DOM the file is now called <script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.3/preact.min.js"></script> |
|
For anyone finding this issue via Google, please use HTM instead of Preferred Script Tag Solution (2023)<script type="module">
import { Component, render } from 'https://esm.sh/htm/preact';
import { html } from 'https://esm.sh/htm/preact';
/** If you're using hooks, you can import that from unpkg too: */
// import { useState } from 'https://esm.sh/preact/hooks';
function App() {
return html`
<div class="app">
<h1>Hello, World!</h1>
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
</div>
`;
}
// render <App /> into <body>
render(html`<${App} />`, document.body);
</script>Or, if you can't use ES Modules<!-- Load Preact's UMD build from CDNJS: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.3/preact.min.js"></script>
<!-- Load HTM from CDNJS: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/htm.min.js"></script>
<!-- If you're using hooks, you can get that from CDNJS too: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/10.11.3/hooks.umd.js"></script>
<script>
const { h, Component, render } = preact;
const html = htm.bind(h);
function App() {
return html`
<div class="app">
<h1>Hello, World!</h1>
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
</div>
`;
}
// render <App /> into <body>
render(html`<${App} />`, document.body);
</script> |
With React, you could simply upload it on your page via <script> tags, but the Preact docs only ever mention the npm route. At the same time, I'm aware Preact is hosted on cdnjs, but it doesn't seem to work, it's tailored to work only with ES6 import (which has no support from any browser).
The text was updated successfully, but these errors were encountered: