Preact

Preact is a lightweight (just 3kb) alternative to React which has same interface (ES6), but better performance. Preact also has a few new features, i.e.,

• Arguments props, state and context are passed to render()
• Standard HTML attributes class and for
• React DevTools right out of the box

There is a migration guide at the https://preactjs.com/guide/switching-to-preact which is basically replacing react and react-dom with preact npm packages.

I imported my AnalogDisplay component (original in React) into preact JSFiddle code, and they worked well. I can either use this.state or just state in render(). Here’s the JSFiddle code: http://jsfiddle.net/gz7L59mn/1/ and the source code:

/** @jsx h */

const { h, render, Component } = preact;
const AnalogDisplay = (props) => {
  var date = new Date(props.time)
  var dialStyle = {
    position: 'relative',
    top: 0,
    left: 0,
    width: 200,
    height: 200,
    borderRadius: 20000,
    borderStyle: 'solid',
    borderColor: 'black'
  }
  var secondHandStyle = {
    position: 'relative',
    top: 100,
    left: 100,
    border: '1px solid red',
    width: '40%',
    height: 1,
    transform: 'rotate(' + ((date.getSeconds()/60)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'red'
  }
  var minuteHandStyle = {
    position: 'relative',
    top: 100,
    left: 100,
    border: '1px solid grey',
    width: '40%',
    height: 3,
    transform: 'rotate(' + ((date.getMinutes()/60)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'grey'
  }
  var hourHandStyle = {
    position: 'relative',
    top: 92,
    left: 106,
    border: '1px solid grey',
    width: '20%',
    height: 7,
    transform: 'rotate(' + ((date.getHours()/12)*360 - 90 ).toString() + 'deg)',
    transformOrigin: '0% 0%',
    backgroundColor: 'grey'
  }
  return <div>
    <div style={dialStyle}>
      <div style={secondHandStyle}/>
      <div style={minuteHandStyle}/>
      <div style={hourHandStyle}/>
    </div>
  </div>
}

class Clock extends Component {
    constructor() {
        super()
        this.state.time = Date.now()
    }
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({ time: Date.now() })
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    render(props, state) {
        let time = new Date(state.time).toLocaleTimeString()
        return <span>{ time }<br/><AnalogDisplay time={this.state.time}/></span>
    }
}

render(<Clock />, document.body)

Result:

More examples are at https://preactjs.com/about/demos-examples.

The missing or different things are PropTypes, Children and Synthetic Events (source).

Overall, Preact seems like a good alternative especially when performance is vital and there’s no need for extra features like ES5 createClass or PropTypes.