Preact (GitHub: developit/preact, License: MIT, npm: preact)
Preact is an attempt to recreate the core value proposition of React using as little code as possible. It is far to say that the developers succeeded in this, since it’s only around 3kb when minified and gzipped.
The library retains a large amount of compatibility with React. Note that only the stateless functional components and ES6 Classes interface are available for use.
It already has a few add-ons such as a router, an universal renderer and a compatibility layer for other React modules.
A full list of demo’s, add-ons and libraries can be found on the Github Page.
Let’s take a look on how we work with it.
// import the stuff we want to use
import { h, render, Component } from 'preact';
// Tell Babel to transform JSX into h() calls:
/** @jsx h */
class App extends Component {
render() {
return <h1>My Super Awesome App</h1>;
}
}
// render an instance of App into <body>:
render(<App />, document.body);
As you can see it’s very similar to React but only 3kb. It comes with the same set of lifecycle events:
- componentWillMount
- componentDidMount
- componentWillUnmount
- componentDidUnmount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
For more examples check the README or the Github Page where you can find some amazing examples posted by the developer.