Hector Zarco zzarcon

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

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	/*! CSS.supports() Polyfill
	* https://gist.github.com/codler/03a0995195aa2859465f
	* Copyright (c) 2014 Han Lin Yap http://yap.nu; MIT license */
	if (!('CSS' in window)) {
	window.CSS = {};
	}

	if (!('supports' in window.CSS)) {
	window.CSS._cacheSupports = {};
	window.CSS.supports = function(propertyName, value) {

	/*
	* Inspiration (well… copy pasting more or less) from:
	* https://github.com/ScottHamper/Cookies/blob/0.3.1/src/cookies.js#L127-L140
	*
	* Thanks Scott!
	*/
	(function (global) {
	'use strict';

	var MyModule = function () {

	@mixin ellipsis ($max-width){
	display: inline-block;
	max-width: $max-width;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	require('font-awesome/css/font-awesome.css');

	document.body.innerHTML = '<i class="fa fa-fw fa-question"></i>';

	int doubler(int x) {
	return 2 * x;
	}