Skip to content

Instantly share code, notes, and snippets.

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

# My First React Component
# Added to this Gist for posterity.
# Extracted from
# January 08, 2014
{ div, input } = React.DOM
AudioFileStepSelector = React.createClass
getInitialState: ->
halfSteps: 2
chantastic / gulpfile.js
Last active Nov 3, 2019
This a script for a Full Stack Talk, given 3/13/14. Feel free to follow along at your own pace.
View gulpfile.js
var gulp = require('gulp');
var coffee = require('gulp-coffee');
gulp.task('scripts', function () {
gulp.task('watch', function () {
View ajax_boilerplate.js
var fetchingResource = null;
function AJAXBoilerplate () {
if(fetchingResource) {
fetchingResource = $.ajax({
url: '/resource',
data: {},
cache: false,
View PrimaryBtn.jsx
const PrimaryBtn = ({
}) =>
className={classNames("btn--primary", className)}
chantastic / .projections.json
Last active Oct 19, 2017
ember-cli VIM projections
View .projections.json
"app/adapters/*.js": {
"command": "adapter",
"template": [
"// export default DS.{capitalize}Adapter.extend();",
"app/components/*.js": {
"command": "component",
View super-dumb-thing.js
import React, { Children, Component } from 'react';
import ReactDOM from 'react-dom';
class SetOverflowHidden extends Component {
componentDidMount() {
this.previousOverflow = = "hidden"
componentWillUnmount() {
View hello-react.html
<!DOCTYPE html>
<meta charset="utf-8" />
<title>React 0.14 Boilerplate</title>
<script src=""></script>
<script src=""></script>
<script src=""></script>
View component-vs-markup.jsx
<Button type="button" className="btn btn--primary">