mjackson

import React from 'react'
import PropTypes from 'prop-types'

const tabType = PropTypes.shape({
  label: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired
})

const styles = {}

mjackson

import React from 'react'
import invariant from 'invariant'

const isFunction = (object) =>
  typeof object === 'function'

const createComponent = (def) => {
  invariant(
    def,
    'createComponent is missing component definition'

mjackson

////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// Implement a radio group form control with the API found in <App>.
//
// - Clicking a <RadioOption> should update the value of <RadioGroup>
// - The selected <RadioOption> should pass the correct value to its <RadioIcon>
// - The `defaultValue` should be set on first render
//
// Hints to get started:

mjackson

System.config({
  transpiler: 'babel',
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  map: {
    'babel': 'npm:babel-core@5.8.38/browser.min.js',

    'react': 'npm:react@15.5.4',
    'react-dom': 'npm:react-dom@15.5.4',

mjackson

/*eslint-disable no-alert */
////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// Using context, implement the <Form>, <SubmitButton>, and <TextInput>
// components such that:
//
// - Clicking the <SubmitButton> "submits" the form
// - Hitting "Enter" while in a <TextInput> submits the form
// - Don't use a <form> element, we're intentionally recreating the

mjackson

// In v2/3 you did this:
import ReactDOM from 'react-dom'
import { Router, browserHistory, Route } from 'react-router'

ReactDOM.render(
  <Router>
    <Route path="/about" component={About}/>
    <Route path="/:username" component={User}/>
  </Router>
)

mjackson

// using createRouteElement
import { Route, createRouteElement } from 'react-router'

const RouteWithQuery = (routeProps) => (
  <Route {...routeProps} render={props => (
    const query = parseQueryString(props.history.location.search)
    return createRouteElement({ ...routeProps, ...props, query })
  )}/>
)

mjackson

const mom = new Date('October 2 1980')
const dad = new Date('April 30 1981')
const kid1 = new Date('September 7 2006')
const kid2 = new Date('July 11 2009')
const kid3 = new Date('May 6 2011')

const family = [ mom, dad, kid1, kid2, kid3 ]

const oneDay = 1000 * 60 * 60 * 24
const oneYear = oneDay * 365

mjackson

## react-router
<Router>
  <MemoryRouter>
<Route>
<Switch>
<Redirect>

## react-router-dom
<BrowserRouter>
<HashRouter>

mjackson

import React from 'react'
import BrowserHistory from 'react-history/BrowserHistory'
import Router from './Router'

const BrowserRouter = (props) => (
  <BrowserHistory {...props}>
    <Router {...props}/>
  </BrowserHistory>
)