jamesknelson

equal = require('deep-equal')
React = require('react')
Reflux = require('reflux')
routes = require('../routes')
RouteStore = require('../stores/RouteStore')


isLeftClickEvent = (event) ->
  event.button == 0

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')

jamesknelson

var ReactInstanceMap = require("react/lib/ReactInstanceMap");
var ReactLifeCycle = require("react/lib/ReactLifeCycle");
var ReactNativeComponent = require("react/lib/ReactNativeComponent");
var ReactReconciler = require("react/lib/ReactReconciler");

var emptyObject = require("react/lib/emptyObject");
var invariant = require("react/lib/invariant");
var warning = require("react/lib/warning");

var ReactCompositeComponentMixin = require('react/lib/ReactCompositeComponent').Mixin;

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

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


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

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

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

// 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

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

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)