Preact

Preact: Fast 3kB alternative to React with the same ES6 API.
Courses on Node.js, React
and JavaScript
Become an expert with my comprehensive
Node.js, React.js and JavaScript courses.
Learn Full Stack Javascript →


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.

Courses on Node.js,
React and JavaScript
Become an expert with my comprehensive
Node.js, React.js and JavaScript courses.
Learn Full Stack Javascript →

--
Azat Mardan
Azat Mardan avatar
https://www.linkedin.com/in/azatm
To contact Azat, the main author of this blog, submit the contact form.

Also, make sure to get 3 amazing resources to FREE when you sign up for the newsletter.
Simple.
Easy.
No commitment.

Leave a Reply

Your email address will not be published. Required fields are marked *