Skip to content

Instantly share code, notes, and snippets.

Cory House coryhouse

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 Jul 1, 2020
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 Jun 6, 2020
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 Jun 7, 2020
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.