Bryan Fillmer bfillmer

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

ES6 Defaults / Overrides Pattern

Combine default parameters and destructuring for a compact version of the defaults / overrides pattern.

function foo ({
    bar = 'no',
    baz = 'works!'
  } = {}) {

	import getYear from 'date-fns/get_year'
	import getMonth from 'date-fns/get_month'
	import addDays from 'date-fns/add_days'
	import startOfWeek from 'date-fns/start_of_week'

	const rows = range(6)
	const cols = range(7)

	/**
	* Returns a two-dimensional array with calendar represented dates


	import { componentFromStream, setObservableConfig } from 'recompose'
	import xstreamConfig from 'recompose/xstreamObservableConfig'
	import { h, p, div, h1, h2 } from 'react-hyperscript-helpers'
	import { render } from 'react-dom'
	import xs from 'xstream'

	setObservableConfig(xstreamConfig)

	const Users = componentFromStream((props$) => {

	import update from 'react/lib/update'
	import { Observable, Subject, ReplaySubject } from 'rx'

	const INITIAL_STATE = {
	user: null
	}

	const updates = new ReplaySubject()
	export const state = Observable.of(INITIAL_STATE)
	.merge(updates.map(change => state => update(state, change)))

	import React from 'react';
	import { container } from 'redux-relay';



	@container({
	variablesFromState: (state) => ({myVariable: state.myState})
	fragments: {
	Relay.QL`
	viewer {

	<script type="text/javascript">

	function prepareToDoSomething() {

	if ( timer ) {

	clearTimeout( timer );

	}

	#!/usr/bin/env ruby
	#
	# CLI tool for locating and removing a Homebrew installation
	# http://brew.sh/
	#
	# Copyright (C) 2014 Stephen C. Benner
	#
	# This program is free software: you can redistribute it and/or modify
	# it under the terms of the GNU General Public License as published by
	# the Free Software Foundation, either version 3 of the License, or

	// This assumes you've already installed Node.js and any related dependencies.
	// 1. Drop this and package.json into your theme root
	// 2. Run: npm install
	// 3. Run: grunt
	// 4. ??????
	// 5. Profit

	module.exports = function ( grunt ) {

	grunt.initConfig( {

	app.filter('sprintf', function() {
	function parse(str) {
	var args = [].slice.call(arguments, 1),
	i = 0;

	return str.replace(/%s/g, function() {
	return args[i++];
	});
	}