Skip to content

Instantly share code, notes, and snippets.

View mauricedb's full-sized avatar

Maurice de Beijer mauricedb

View GitHub Profile
@mauricedb
mauricedb / install.ps1
Created November 21, 2017 09:47
Install Preact CLI
npm install -g preact-cli
@mauricedb
mauricedb / .\src\components\movie\index.js
Last active May 6, 2018 19:10
Only render visible images
import { h, Component } from "preact";
import { Link } from "preact-router";
import style from "./style";
export default class Movie extends Component {
element = null;
componentDidMount() {
this.props.observer.observe(this.element);
}
@mauricedb
mauricedb / .\src\components\app.js
Created November 14, 2017 12:12
Add a route to view/edit movie details
import { h, Component } from "preact";
import { Router } from "preact-router";
import Header from "./header";
import Home from "../routes/home";
import Movies from "../routes/movies";
import Movie from "../routes/movie";
export default class App extends Component {
/** Gets fired when the route changes.
@mauricedb
mauricedb / .\src\components\movie\index.js
Created November 14, 2017 10:28
Create a movie card component
import { h, Component } from "preact";
import style from "./style";
export default ({ movie }) => {
return (
<div class={["card", style.movieCard].join(" ")}>
<img
class="card-img-top"
src={movie.image}
alt="Card image cap"
@mauricedb
mauricedb / .\src\components\header\index.js
Last active November 21, 2017 10:41
Create Boostrap 4 Navbar
import { h } from "preact";
import { Link } from "preact-router/match";
export default () => (
<nav class="navbar navbar-expand navbar-dark bg-dark">
<Link class="navbar-brand" href="/">
The MovieDB
</Link>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
import { h, Component } from "preact";
import { Router } from "preact-router";
import Header from "./header";
import Home from "../routes/home";
import Movies from "../routes/movies";
export default class App extends Component {
/** Gets fired when the route changes.
* @param {Object} event "change" event from [preact-router](http://git.io/preact-router)
@mauricedb
mauricedb / .\src\routes\movies\index.js
Created November 14, 2017 09:55
Use container & presentation components
export default from "./movies-container";
@mauricedb
mauricedb / .\src\api\movies.json
Created November 14, 2017 09:33
Show a list of movies
[
{
"id":278,
"title":"The Shawshank Redemption",
"overview":"Framed in the 1940s for the double murder of his wife and her lover, upstanding banker Andy Dufresne begins a new life at the Shawshank prison, where he puts his accounting skills to work for an amoral warden. During his long stretch in prison, Dufresne comes to be admired by the other inmates -- including an older prisoner named Red -- for his integrity and unquenchable sense of hope.",
"genres":[
"Drama",
"Crime"
],
"image":"//image.tmdb.org/t/p/w300/xBKGJQsAIeweesB79KC89FpBrVr.jpg"
@mauricedb
mauricedb / .\src\components\app.js
Created November 14, 2017 09:23
Remove profile route and component
import { h, Component } from "preact";
import { Router } from "preact-router";
import Header from "./header";
import Home from "../routes/home";
import Movies from "../routes/movies";
export default class App extends Component {
/** Gets fired when the route changes.
* @param {Object} event "change" event from [preact-router](http://git.io/preact-router)
@mauricedb
mauricedb / .\src\components\app.js
Created November 14, 2017 09:12
Add a movies route
import { h, Component } from "preact";
import { Router } from "preact-router";
import Header from "./header";
import Home from "../routes/home";
import Profile from "../routes/profile";
import Movies from "../routes/movies";
export default class App extends Component {
/** Gets fired when the route changes.