Here's my quick attempt to build a tiny preact app using terminology from Angular 1.
# get it
git clone https://gist.github.com/e5de4c33c1a8d8fd172905010d3ff75c.git preact-for-angular1-users
cd preact-for-angular1-users
# install the dependencies (just preact-cli)
npm install
# start a development server
PORT=8080 npm start
# build for production
npm run build| node_modules | |
| *.log |
| // Note: normally you'd use folders like `routes/home/index.js` - Gist just doesn't allow them | |
| import { Component } from 'preact'; | |
| import HomeView from './home-view.js'; // our view is just a JavaScript function | |
| export default class HomeRoute extends Component { | |
| state = { | |
| toppings: [] | |
| }; | |
| // when mounted, grab a list of pizza topings from an API: | |
| componentDidMount() { | |
| fetch('//api.myjson.com/bins/vlder') | |
| .then( r => r.json() ) | |
| .then( toppings => { | |
| this.setState({ toppings }); | |
| }); | |
| } | |
| render(props, state) { | |
| // "this component is-a <HomeView />" | |
| return <HomeView toppings={state.toppings} /> | |
| } | |
| } |
| import Topping from './topping-directive.js'; | |
| export default function HomeView({ toppings }) { | |
| // A "view" is just a function that produces UI, like a template: data in, UI out. | |
| // Inside the {braces} is just plain-old-JavaScript. | |
| return ( | |
| <ul> | |
| { toppings.map( topping => | |
| <Topping name={topping.name} price={topping.price} /> | |
| ) } | |
| </ul> | |
| ); | |
| } |
| // This is our "App" - like everything else, it's just a component. | |
| // The only difference is we'll probably render this component into <body>. | |
| import { Component } from 'preact'; | |
| import Router from 'preact-router'; | |
| import HomeRoute from './home-route'; | |
| export default class App extends Component { | |
| render() { | |
| return ( | |
| <div id="app"> | |
| <Router> | |
| <HomeRoute url="/" /> | |
| <ErrorRoute default /> | |
| </Router> | |
| </div> | |
| ); | |
| } | |
| } | |
| const ErrorRoute = () => <div class="error"><h1>Four, oh Four!</h1></div> |
| { | |
| "name": "preact-for-angular1-users", | |
| "version": "1.0.0", | |
| "scripts": { | |
| "start": "preact watch", | |
| "build": "preact build" | |
| }, | |
| "dependencies": { | |
| "preact-cli": "*" | |
| } | |
| } |
| // still just another component, but we're calling this one a directive since it's low-level stuff. | |
| import { Component } from 'preact'; | |
| export default class Topping extends Component { | |
| // Let's pretend the point of this Topping "directive" is to flash the item when it gets added. | |
| // (this is obviously a contrived example that would be better done in CSS) | |
| componentDidMount() { | |
| this.base.style.background = 'palegoldenrod'; | |
| setTimeout( () => { | |
| this.base.style.transition = 'all 1s ease'; | |
| this.base.style.background = null; | |
| }, 30); | |
| } | |
| render(props) { | |
| // the render function is just like a view. you can split it out into a separate file if you wish. | |
| return ( | |
| <li> | |
| {props.name} - ${props.price.toFixed(2)} | |
| </li> | |
| ); | |
| } | |
| } |