Last active
June 24, 2021 19:48
-
-
Save kentcdodds/5274dfa1eb31e6d22b9eddd1efc773dc to your computer and use it in GitHub Desktop.
The one true react boilerplate
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
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>
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>
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>
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>
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>
Simple HTML boilerplate
<body>
<div>Hello World!</div>
</body>
Simple HTML boilerplate
<body> <div>Hello World!</div> </body>
LMAO brilliant
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice React root node id, ⚛️!