insin

import React from 'react'
import {render} from 'react-dom'

let Board = React.createClass({
  getInitialState() {
    return {
      x: 150,
      y: 150,
    }
  },

jc4p

// src/components/Hello.tsx

import { h, Component, render } from "preact";

export interface HelloProps { compiler: string; framework: string; }

export default class Hello extends Component<HelloProps, undefined> {
    constructor(props: any) {
        super(props);
        // #TODO: fetch() from the API, or set up a ServiceWorker to do so.

developit

import { h, cloneElement, Component } from 'preact';


/** Example <Fetch url="/foo.json" /> compositional component.
 *  Just to demonstrate a compositional component that requires input massaging.
 */
class Fetch extends Component {
  state = { loading: true };
  componentDidMount() {
    this.update();

sebastiandeutsch

<SyncStore loader={TeamLoader} loadingComponent={Loading}>
  <TeamReaderApp>
    <Match exactly pattern="/" component={LinksIndex} />
    <Match pattern='/links' component={LinksIndex} />
    <Match pattern='/link/new' component={LinkNew} />
    <Match pattern='/link/:id/edit' component={LinkEdit} />

    <Match pattern='/categories' component={CategoriesIndex} />
    <Match pattern='/category/new' component={CategoryNew} />
    <Match pattern='/category/:id/edit' component={CategoryEdit} />

developit

import { h, Component } from 'preact';


/** Example <Fetch url="/foo.json" /> compositional component.
 *  The key is, instead of passing virtual DOM elements as "children" to this component,
 *  you pass a _function_ that returns virtual DOM elements. Fetch calls that function and passes it the network data.
 */
class Fetch extends Component {
  state = { loading: true };
  componentDidMount() {

seveves

import { Component, h, cloneElement } from 'preact';

export default class SwipeRecognizer extends Component {
  tolerance = 100;
  gesture = { x: [], y: [], match: '' };

  componentDidMount() {
    this.base.addEventListener('touchstart', this.capture);
    this.base.addEventListener('touchmove', this.capture);
    this.base.addEventListener('touchend', this.compute)

Robert-Wett

import './App.css'

import { h, Component, cloneElement } from 'preact'

export default class App extends Component {
  render() {
    return (
      <KonamiZone>
        <HelloWorld />
      </KonamiZone>

treshugart

import hify from './create-element';
import React from 'react';
import { render } from 'react-dom';

const h = hify(React.createElement.bind(React));

class Test extends HTMLElement {
  static observedAttributes = ['attr']
  attributeChangedCallback (name, oldValue, newValue) {
    this.innerHTML = `Hello, ${this.getAttribute('attr')}!`;

DaBs

var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' + 
          'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 || true;};for (let vre of a()) {' +
          'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' + 
          ': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

try {
  eval(str);
} catch(e) {
  alert('Your browser does not support ES6!')
}

developit

An interesting challenge for centralized state

I build distributed frontends using components ([preact] components, but that's not important). Components are a great unit of composition when the structure of a system cannot be statically determined.

Prerequisites

In the following examples, I'm going to pretend there exists a common definition for a <SplitPoint> component:

SplitPoint invokes an async load() function (passed as a prop), then renders result as its child.