mikeyamadeo

We will build a contrived user registration that will take

1. new user's name and

2. a link to a picture they want to use for an avatar

The added users will then display below the form.

This will help us

mikeyamadeo

javascript

Use the following code snippet to answer questions 1 - 2

var stringTransformerMaker (fn) {
  return function (string) {
    return fn(string)
  }
}

mikeyamadeo

use deep-freeze in reducer tests to ensure no mutations

mikeyamadeo

Required Fields

• Stripe documentation
• quora answer

mikeyamadeo

Photo/style.css

/* block */
.Photo {}

/* element */
.Photo__img {}

/* modifier */
.Photo--large {}

mikeyamadeo

/* root */
.Photo {}

/* modifier */
.Photo--large {}

/* child */
.Photo__caption {}

mikeyamadeo

/**
 * CSS Modules Magic:
 * styles = { Photo: '[hash]-Photo', ... }
 */
import styles from './style'
import React from 'react'
import cn from 'classnames'

const Photo = ({src, alt, isLarge}) =>
  <div {...{ className: cn({

mikeyamadeo

/* App/style/css/settings */
:root {
  —-clr-watermelon: #4FC1E9;
  —-spacing-default: 12px;
}

@custom-media —-viewport-narrow (width >= 31.25em);

/**
 * Example using settings in 'Generic' layer

mikeyamadeo

const pictionBlue = '#4FC1E9'

export const colors = {
 primary: pictionBlue
}

export const spacing = {
 tiny: ‘4px’
}

mikeyamadeo

import { baseFontSize } from ‘./settings.js’

export const pxToEm = (px) =>
 `${px / baseFontSize}em`