Cory House coryhouse

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

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

	// Promise.all is good for executing many promises at once
	Promise.all([
	promise1,
	promise2
	]);

	// Promise.resolve is good for wrapping synchronous code
	Promise.resolve().then(function () {
	if (somethingIsNotRight()) {
	throw new Error("I will be rejected asynchronously!");

	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>

	saveAuthor(event) {
	event.preventDefault();

	if (!this.authorFormIsValid()) {
	return;
	}

	if (this.state.author.id) {
	this.props.actions.updateAuthor(this.state.author);
	} else {


	const StatelessToggler = (props) => (
	<div onClick={props.onToggle}>
	<div>{props.label}</div>
	{props.isOpen && props.children}
	</div>
	)

	const Toggler = React.createClass({
	getInitialState() {

	import React, { Component } from 'react'
	import Subapp from './subapp/Root'

	class BigApp extends Component {
	render() {
	return (
	<div>
	<Subapp />
	<Subapp />
	<Subapp />

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

	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() {

	<body>
	<div id="⚛️"></div>
	<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
	<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/[email protected]/babel.js"></script>
	<script type="text/babel">
	ReactDOM.render(<div>Hello World!</div>, document.getElementById('⚛️'))
	</script>
	</body>