Skip to content

Instantly share code, notes, and snippets.

Cory House coryhouse

Block or report user

Report or block coryhouse

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@kentcdodds
kentcdodds / create-required-context.js
Created May 15, 2018
create react context that has a validated consumer.
View create-required-context.js
// create a React context Provider/Consumer pair that
// validates the consumer is rendered within a provider
function createRequiredContext(name) {
const Context = React.createContext()
function Consumer(props) {
return (
<Context.Consumer {...props}>
{val => {
if (!val) {
@gaearon
gaearon / prepack-gentle-intro-1.md
Last active Dec 5, 2019
A Gentle Introduction to Prepack, Part 1
View prepack-gentle-intro-1.md

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

  • Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.
@kentcdodds
kentcdodds / index.html
Last active Dec 9, 2019
The one true react boilerplate
View index.html
<body>
<div id="⚛️"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script type="text/babel">
ReactDOM.render(<div>Hello World!</div>, document.getElementById('⚛️'))
</script>
</body>
View App.js
import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import { Route, Link, Redirect } from './Zero'
const paths = [ 'one', 'two', 'three' ]
class App extends Component {
render() {
View gist:9521b4d91753d4812956a784690f9620
// if I wanted to make this:
<select>
<option>(01) January</option>
<option>(02) February</option>
...
</select>
// angular
//
// - $index, ng-each, "month in months", pipe (|) all have
@gaearon
gaearon / index.js
Last active Sep 18, 2019
Breaking out of Redux paradigm to isolate apps
View index.js
import React, { Component } from 'react'
import Subapp from './subapp/Root'
class BigApp extends Component {
render() {
return (
<div>
<Subapp />
<Subapp />
<Subapp />
View gist:a1fb214ba4374e26da30
const StatelessToggler = (props) => (
<div onClick={props.onToggle}>
<div>{props.label}</div>
{props.isOpen && props.children}
</div>
)
const Toggler = React.createClass({
getInitialState() {
View gist:1a63b24d2cf6baf26498
saveAuthor(event) {
event.preventDefault();
if (!this.authorFormIsValid()) {
return;
}
if (this.state.author.id) {
this.props.actions.updateAuthor(this.state.author);
} else {
@jeffhandley
jeffhandley / page.js
Last active Feb 13, 2016
A pattern for server-side async data loading with React components
View page.js
import React from 'react';
export default (req, res, callback) => {
// Do async work, consuming data off req if needed
// Potentially set headers or other data on res
// When all the data is loaded, call the callback with the component
callback(React.createClass({
render() {
return (
<html>
View on-jsx.markdown

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

You can’t perform that action at this time.