An Overview
Chad Jewsbury
@chadjewsbury
(but I don't tweet much)
www.chadjewsbury.com
BeautyNow
*(Still in testing/ramp up, so it's not available everywhere, yet)
vs React+React-dom at ~34kB
import { h, render } from 'preact';
render((
<div>
<h1>Hello, world!</h1>
</div>
), document.body);
let foo = <div id="foo">Hello!</div>;
// After Babel JSX transpilation...
var foo = React.createElement('div', {id:"foo"}, 'Hello!')
// in Preact...
var foo = Preact.h('div', {id:"foo"}, 'Hello!');
// Tell Babel to use Preact.h() in .babelrc
{
"plugins": [
["transform-react-jsx", { "pragma":"h" }]
]
}
import { h, render } from 'preact';
const MyComponent = () => (
<div>This looks just like React...</div>
);
render(<MyComponent />, document.body);
import { h, render, Component } from 'preact';
class MyComponent extends Component {
render() {
return <div>This looks just like React...</div>;
}
}
render(<MyComponent />, document.body);
Lifecycle method | When it gets called |
---|---|
componentWillMount | before the component gets mounted to the DOM |
componentDidMount | after the component gets mounted to the DOM |
componentWillUnmount | prior to removal from the DOM |
componentWillReceiveProps | before new props get accepted |
shouldComponentUpdate | before render(). Return false to skip render |
componentWillUpdate | before render() |
componentDidUpdate | after render() |
+ State and Props passed to Render()
+ class OR className
- No PropTypes
- No React.Children - Children are just an Array
- No Synthetic Events
// webpack.config.js
{
"resolve": {
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
}
2kB compatibility layer for React
... it depends ...
Google's (idealistic) recommendations....
Like create-react-app, but more focused on PWA's:
and now...
a super basic, contrived