Last active
June 28, 2017 17:08
Revisions
-
developit revised this gist
Jun 28, 2017 . 1 changed file with 20 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,20 @@ # Preact for Angular 1 Users Here's my quick attempt to build a tiny preact app using terminology from Angular 1. ### Installation ```sh # 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 ``` -
developit revised this gist
Jun 28, 2017 . 4 changed files with 22 additions and 14 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,2 @@ node_modules *.log This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,11 +3,17 @@ 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 />" This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -10,10 +10,12 @@ export default class App extends Component { return ( <div id="app"> <Router> <HomeRoute url="/" /> <ErrorRoute default /> </Router> </div> ); } } const ErrorRoute = () => <div class="error"><h1>Four, oh Four!</h1></div> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -2,20 +2,18 @@ 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)} -
developit revised this gist
Jun 28, 2017 . 1 changed file with 1 addition and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,6 @@ { "name": "preact-for-angular1-users", "version": "1.0.0", "scripts": { "start": "preact watch", "build": "preact build" -
developit created this gist
Jun 28, 2017 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,19 @@ // 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="/" default /> <SomeOtherRoute url="/:foo" /> </Router> </div> ); } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,16 @@ // 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 { // when mounted, grab a list of pizza topings from some API: componentDidMount() { getPizzaTopings().then( toppings => { this.setState({ toppings }); }); } render(props, state) { // "this component is-a <HomeView />" return <HomeView toppings={state.toppings} /> } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,13 @@ 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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,10 @@ { "name": "preact-for-angular1-users", "scripts": { "start": "preact watch", "build": "preact build" }, "dependencies": { "preact-cli": "*" } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,25 @@ // 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 { // maybe 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'; this.base.style.transition = 'all 1s ease'; setTimeout( () => { this.base.style.background = this.base.style.transition = null; }, 1000); } render(props) { // even here you could kick your UI into a separate "template" function if you wanted: // return <ToppingView /> return ( <li> {props.name} - ${props.price.toFixed(2)} </li> ); } }