Skip to content

Instantly share code, notes, and snippets.

View jamesknelson's full-sized avatar

James K Nelson jamesknelson

View GitHub Profile
jamesknelson / gist:d18cbc97aeca53675b4e
Created October 5, 2015 12:50
Raw React `navigated` action
View gist:d18cbc97aeca53675b4e
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
jamesknelson / react-parent-context-patch.js
Last active January 9, 2016 17:53
Use parent context instead of owner context in facebook/react (#2112)
View react-parent-context-patch.js
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 / Pitch.mdx
Last active February 3, 2017 08:39
mdx: A markdown-like format that gives you inline JSX, and compiles to a React stateless function
View Pitch.mdx
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'
View HighlightedCodeBlock.js
import React, { PureComponent, PropTypes } from "react"
import Prism from 'prismjs'
const codeBlockAliases = {
'js': 'jsx',
'html': 'markup',
'mdx': 'markdown',
'md': 'markdown',
View GovernRedux.js
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 {

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 }) =>
View typeof-documentstorage.ts
// 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 /
Last active August 22, 2018 02:11
React CRUV - 4 directories to solve project structure for good
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 / gist:432f00af5522ea07cbb39990a8105e0c
Created January 17, 2019 08:50
The Hierarchy (for React apps)
View gist:432f00af5522ea07cbb39990a8105e0c
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)