http://jsbin.com/tojeke/1/edit?js,output
Problem: http://jsbin.com/dacoze/4/edit?html,output
Solution: http://jsbin.com/dacoze/3/edit?html,output
<Button type="button" className="btn btn--primary"> | |
<PrimaryBtn> |
<!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> |
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() { |
const PrimaryBtn = ({ | |
className, | |
...props | |
}) => | |
<Btn | |
className={classNames("btn--primary", className)} | |
{...props} | |
/> | |
var fetchingResource = null; | |
function AJAXBoilerplate () { | |
if(fetchingResource) { | |
fetchingResource.abort(); | |
} | |
fetchingResource = $.ajax({ | |
url: '/resource', | |
data: {}, | |
cache: false, |
# 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 |
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 () { |
{ | |
"app/adapters/*.js": { | |
"command": "adapter", | |
"template": [ | |
"// export default DS.{capitalize}Adapter.extend();", | |
] | |
}, | |
"app/components/*.js": { | |
"command": "component", |
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