Skip to content

Instantly share code, notes, and snippets.

View scottdomes's full-sized avatar

Scott scottdomes

101 followers · 8 following
  • Vancouver, BC
View GitHub Profile
@scottdomes
scottdomes / FunctionalComponent.js
Last active February 15, 2018 13:49
React Component Best Practices: Functional Component
import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
// Separate local imports from dependencies
import './styles/Form.css'
// Declare propTypes here, before the component (taking advantage of JS function hoisting)
// You want these to be as visible as possible
ExpandableForm.propTypes = {
onSubmit: func.isRequired,
@scottdomes
scottdomes / ImageGrid.js
Last active March 17, 2017 21:50
Starting ImageGrid Component
import React, {Component} from 'react'
import Masonry from 'masonry-layout'
import './ImageGrid.css'
export default class ImageGrid extends Component{
state = { allImagesLoaded: false }
imagesLoaded = 0
handleImageLoad = () => {
this.imagesLoaded++
@scottdomes
scottdomes / pwa-starter.js
Last active March 9, 2019 14:52
import React, { Component } from 'react';
import { Router, browserHistory, Route, Link } from 'react-router';
import logo from './logo.svg';
import './App.css';
const Page = ({ title }) => (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>{title}</h2>
@scottdomes
scottdomes / service-worker.js
Last active May 22, 2018 13:56
// Set this to true for production
var doCache = false;
// Name our cache
var CACHE_NAME = 'my-pwa-cache-v1';
// Delete old caches that are not our current one!
self.addEventListener("activate", event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
@scottdomes
scottdomes / index.html
Created April 21, 2017 20:55
ProgressivelyEnhancedIndex
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<!-- Add in some basic styles for our HTML -->
<style type="text/css">
body {
@scottdomes
scottdomes / manifest.json
Last active May 22, 2018 13:23
{
"short_name": "My First PWA",
"name": "My First Progressive Web App",
"icons": [
{
"src":"icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
@scottdomes
scottdomes / App.css
Last active May 22, 2018 13:25
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#root {
background-color: #f5f8fa;
height: 100%;
min-height: 100vh;
padding: 20px 0;
}
@scottdomes
scottdomes / contact-mobx.js
Last active May 22, 2018 13:25
import { observable } from 'mobx'
class ContactStore {
@observable contacts = []
load() {
fetch(API_URL + '/contacts')
.then(data => {
const list = data.contacts.map(contactData => {
return new Contact(contactData)
@scottdomes
scottdomes / contact-model-mobx.js
Last active May 22, 2018 13:25
import { toJS, observable } from 'mobx'
class Contact {
id = 0
@observable name = ''
@observable number = ''
constructor(data) {
this.name = data.name
this.number = data.number
@scottdomes
scottdomes / App.jsx
Created May 31, 2017 00:23
import React from 'react'
import { Provider } from 'mobx-react'
// Importing our own stores
import { UserStore, ContactStore } from '../stores'
const state = {
userStore: UserStore,
contactStore: ContactStore
}