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

View AudioFileStepSelector.coffee
# My First React Component
# Added to this Gist for posterity.
# Extracted from https://github.com/ministrycentered/transposr/commit/fa616871914ac16b72d0d1b035a08e01e337bd07
# January 08, 2014
{ div, input } = React.DOM
AudioFileStepSelector = React.createClass
getInitialState: ->
halfSteps: 2
@chantastic
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.src('src/*.coffee')
.pipe(coffee())
.pipe(gulp.dest('./'));
});
gulp.task('watch', function () {
View ajax_boilerplate.js
var fetchingResource = null;
function AJAXBoilerplate () {
if(fetchingResource) {
fetchingResource.abort();
}
fetchingResource = $.ajax({
url: '/resource',
data: {},
cache: false,
View PrimaryBtn.jsx
const PrimaryBtn = ({
className,
...props
}) =>
<Btn
className={classNames("btn--primary", className)}
{...props}
/>
@chantastic
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 = document.body.style.overflow
document.body.style.overflow = "hidden"
}
componentWillUnmount() {
View hello-react.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React 0.14 Boilerplate</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
View component-vs-markup.jsx
<Button type="button" className="btn btn--primary">
<PrimaryBtn>