Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The one true react boilerplate
<body>
<div id="⚛️"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script type="text/babel">
ReactDOM.render(<div>Hello World!</div>, document.getElementById('⚛️'))
</script>
</body>
@alexbaumgertner

This comment has been minimized.

Copy link

commented Nov 2, 2017

Nice React root node id, ⚛️!

@arthurbuhl

This comment has been minimized.

Copy link

commented Sep 15, 2018

Simple Vue boilerplate

<body>
  <script src="https://unpkg.com/vue"></script>
  <div id="app">{{ message }}</div>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: { message: 'Hello World!' }
    });
  </script>
</body>
@arthurbuhl

This comment has been minimized.

Copy link

commented Sep 15, 2018

Simple Angular 1.x boilerplate

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.js"></script>
  <div ng-app ng-init="message = 'Hello World'">
	<h1>{{message}}</h1>
  </div>
</body>
@tufantunc

This comment has been minimized.

Copy link

commented Sep 15, 2018

Simple KnockoutJS boilerplate

<body>
    <div id="⚛️" data-bind="text: helloWorld"></div>
    <script src="https://unpkg.com/knockout@3.4.2/build/output/knockout-latest.js"></script>
    <script type="text/javascript">
        ko.applyBindings({ helloWorld: "Hello World!" }, document.getElementById('⚛️'));
    </script>
</body>
@thescientist13

This comment has been minimized.

Copy link

commented Sep 15, 2018

Using Custom Elements w/ lit-html

  <body>
    <!-- like this the WC polyfill will be needed, like for FF -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>
    <script type="module">
      import { html, render } from 'https://unpkg.com/lit-html@0.11.3/lit-html.js';

      class HelloComponent extends HTMLElement {

        constructor() {
          super();
          
          this.root = this.attachShadow({ mode: 'closed' });
          render(html`<h1>Hello World</h1>`, this.root);
        }
      }

      customElements.define('x-hello', HelloComponent);
    </script>

    <x-hello></x-hello>
  </body>

Using just lit-html (e.g. template strings)

  <body>
    <div id="app"></div>

    <script type="module">
      import { html, render } from 'https://unpkg.com/lit-html@0.11.3/lit-html.js';

      render(html`<h1>Hello World</h1>`, document.getElementById('app'));
    </script>
  </body>
@joshgillies

This comment has been minimized.

Copy link

commented Nov 23, 2018

I did something like this last year for hyperHTML: https://gist.github.com/joshgillies/bff1e5f6e9ab62869abd6f73c1d22606

Basically:

   <body>
    <div id="root"></div>
    <script src="https://unpkg.com/hyperhtml"></script>
    <script>
      function tick(render) {
        render`
          <div>
            <h1>Hello, world!</h1>
            <h2>It is ${new Date().toLocaleTimeString()}.</h2>
          </div>
        `
      }
      setInterval(tick, 1000,
        hyperHTML.bind(document.getElementById('root'))
      )
    </script>
  </body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.