Preact: Setup Preact via <script> tag?

Created on 2 Jan 2017 · 8Comments · Source: preactjs/preact

With React, you could simply upload it on your page via

All 8 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 h() calls instead of React.createElement(), or alias it:

<!-- 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>

developit on 2 Jan 2017

👍6 ❤1

You can also use unpkg.com:

    <script src="https://unpkg.com/[email protected]"></script>

noway on 4 Jan 2017

👍2

yup yup. #protip the minified version is on there too:
<script src="//unpkg.com/preact/dist/preact.min.js"></script>

developit on 4 Jan 2017

👍3

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!

rafaelferreiraql on 5 Jan 2017

🎉2

@developit how App is added to h function in preactjs if we write JSX?

avinashdvv on 19 Jul 2018

@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, babel-preset-react) and then tell Babel to use h or preact.h.

/* @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 h() function directly since that's what Babel is returning as output anyway. I'd recommend you revisit Jason's answer above (https://github.com/developit/preact/issues/484#issuecomment-270023291) for more info.

lukeed on 19 Jul 2018

😄2 ❤1

It's very simple

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.1.0/preact.js"></script>
<script>window.React = { createElement: preact.h }</script>

<script type='text/babel'>
    preact.render(<h1>we love preact</h1>, document.body);
 </script>

</head>
<body>
</body>
</html>