¿Qué es Preact? ● Alternativa a React. ● Biblioteca pequeña (3 kB comprimido y minificado). ● Misma API ES6 de React. ● Virtual DOM más pequeño y ligero. ● No tiene PropTypes ni synthetic events. ● Props y state son pasados como parámetros a render.
¿Por qué Preact? ● Tamaño perfecto para widgets o plugins. ● Útil en PWAs y aplicaciones web móviles en general. ● Puede reemplazar fácilmente a React.
Código de ejemplo import { h, render, Component } from 'preact'; class Clock extends Component { render() { let time = new Date().toLocaleTimeString(); return { time }; } } // render an instance of Clock into : render(, document.body);
preact-cli ● Similar a create-react-app. ● Permite crear SPAs con Preact fácilmente. ● Incluye preact y preact-router en 4.5 kB minificado. > preact create default my-preact-app
● preact-compat añade una capa de compatibilidad para trabajar con bibliotecas de React. ● Solo es necesario añadir alias a react y react-dom (configurable desde Webpack o Browserify). Integrando Preact al ecosistema React/Redux // preact.config.js export default function (config, env, helpers) { const alias = config.resolve.alias; alias['react'] = 'preact-compat'; alias['react-dom'] = 'preact-compat'; }
● Con preact-compat, no es necesario reescribir los componentes de React a Preact (excepto cuando se utilizan features que Preact no soporta). ● Algunas bibliotecas soportadas por Preact con preact-compat: React Router v4, react-redux, Redux Form. import { h, Component } from 'preact'; import { Provider } from 'react-redux'; import { BrowserRouter, Switch, Route } from 'react-router-dom'; import store from '../redux/store'; export default class App extends Component { render() { return (
component={PokemonProfile} />
); } } Integrando Preact al ecosistema React/Redux
import { h, Component } from 'preact'; import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; import { selectPokemons, selectPokemonsStatus } from '../../redux/ducks/pokemons'; class Home extends Component { // ...Mi componente Preact } const mapStateToProps = state => ( { pokemons: selectPokemons(state), fetching: selectPokemonsStatus(state), } ); export default connect(mapStateToProps)(Home); ● Con preact-compat y react-redux, el código de Redux se vuelve agnóstico y React y Preact se vuelven intercambiables. Integrando Preact al ecosistema React/Redux
● Usando create-react-app y preact-cli. ● Dos aplicaciones con el mismo stack: ○ react / preact ○ preact-compat ○ react-router-dom ○ react-redux ○ redux-observable ○ rxjs ● github.com/hpneo/pokedex-react y github.com/hpneo/pokedex-preact ● Diseño basado en http://www.ryanlewisdesign.com/project_P okedex.html Prueba de concepto: Pokedex en React y Preact