jamesknelson

import { map, redirect, route } from 'navi'

function UpdatePasswordForm({ submitErrors }) {
  return (
    <Form
      method='post'
      submitErrors={submitErrors} 
      validate={value =>
        value.password !== value.passwordConfirmation &&
        {

jamesknelson

A React app can be split into a number of different types of functions and components, where *each type can depend only on the types above it in the hierarchy*.

This makes gives you a way to split up components and functions over your filesystem. It also helps you to keep components from growing too large, and encourages practices that make testing easier.

```
types (TypeScript typings)
  ^
utils (plain javascript functions)
  ^
contexts (React context, and provider components)

jamesknelson

create-react-app myapp
cd myapp/src
mkdir containers routes utils views
touch config.js contexts.js 
mv App.* routes
sed -i '' -e 's/.\/App/.\/routes\/App/g' index.js

jamesknelson

// typeof DocumentStorage

type DocumentStorage = Batchable<{
    willUpdate: false | {
        source: boolean | CompoundValueNode<boolean>;
        undoHistories: boolean | CompoundValueNode<boolean>;
    };
    isAwaitingInitialData: false | {
        source: boolean | CompoundValueNode<boolean>;
        undoHistories: boolean | CompoundValueNode<boolean>;

jamesknelson

I want to make a <TextFieldControl> component that passes a <Description> component to its render function.

Rendering a <Description> would automatically add an id to the element, and then add that id to the aria-describedby prop of the associated input.

For example, this component:

const EmailField = ({ error, value, onChange }) =>

jamesknelson

import * as Govern from 'govern'

/**
 * This component subscribes to a Redux store, outputting its current state.
 * 
 * Typically, you'll use this component as an element in another component's
 * `subscribe()` method. For example:
 * 
 * ```js
 * class Identity extends Govern.Component {

jamesknelson

import * as Govern from 'govern'
import axios, { AxiosInstance, AxiosResponse, AxiosRequestConfig } from 'axios'

export interface HTTPOperation<Success = any, Rejection = any> {
  hasEnded: boolean
  isBusy: boolean
  wasCancelled: boolean
  wasSuccessful: boolean
  wasRejected: boolean

jamesknelson

import React, { PureComponent, PropTypes } from "react"
import Prism from 'prismjs'


const codeBlockAliases = {
  'js': 'jsx',
  'html': 'markup',
  'mdx': 'markdown',
  'md': 'markdown',
}

jamesknelson

metaDescription
junctions.js lets you add routes to your React components.

import Link from './Link' import ButtonTheme from './ButtonTheme' import ExampleSet from './ExampleSet' import ComponentExample from './ComponentExample' import GistVanillaExample from './examples/the-gist-vanilla' import GistSugarFreeExample from './examples/the-gist-sugar-free' import BasicExample from './examples/basic'

jamesknelson

function navigated() {
  // Choose which component to render based on browser URL
  var component = window.location.hash == "#/"
    ? React.createElement('div', {}, "Index Page")
    : React.createElement('div', {}, "Not Found")

  // Render the new component to the page's #react-app element
  ReactDOM.render(
    component,
    document.getElementById('react-app')