Skip to content

Instantly share code, notes, and snippets.

Avatar

James K Nelson jamesknelson

View GitHub Profile
View Link.coffee
@jamesknelson
jamesknelson / gist:d18cbc97aeca53675b4e
Created Oct 5, 2015
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
ReactDOM.render(
component,
document.getElementById('react-app')
@jamesknelson
jamesknelson / react-parent-context-patch.js
Last active Jan 9, 2016
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
jamesknelson / Pitch.mdx
Last active Feb 3, 2017
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 {
View TextFieldControl-accessibility.md

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
jamesknelson / create-cruv-app.sh
Last active Aug 22, 2018
React CRUV - 4 directories to solve project structure for good
View create-cruv-app.sh
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
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)
You can’t perform that action at this time.