Michael Chan chantastic

## on-jsx.markdown

      
              2 files
            
          
              130 forks
            
          
              36 comments
            
          
              1398 stars
            
          
                chantastic
                / on-jsx.markdown
            
            
              Last active
              March 20, 2024 01:03
            
              
                JSX, a year in
              
          
    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

  
## .projections.json
{
  "app/adapters/*.js": {
    "command": "adapter",
    "template": [
      "// export default DS.{capitalize}Adapter.extend();",
    ]
  },

  "app/components/*.js": {
    "command": "component",

## 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 () {

## 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

## ajax_boilerplate.js
var fetchingResource = null;

function AJAXBoilerplate () {
    if(fetchingResource) {
        fetchingResource.abort();
    }
    fetchingResource = $.ajax({
       url: '/resource',
       data: {},
       cache: false,

## exercises.markdown

      
              1 file
            
          
              2 forks
            
          
              0 comments
            
          
              9 stars
            
          
                chantastic
                / exercises.markdown
            
            
              Last active
              December 10, 2018 10:55
            
              
                DT Training exercises
              
          
    http://jsbin.com/tojeke/1/edit?js,output
1. React.render

Problem: http://jsbin.com/dacoze/4/edit?html,output

Solution: http://jsbin.com/dacoze/3/edit?html,output
2. React.createClass

Problem: http://jsbin.com/bepewoq/2/edit?js,output

  
## PrimaryBtn.jsx
const PrimaryBtn = ({
  className,
  ...props
}) =>
  <Btn
    className={classNames("btn--primary", className)}
    {...props}
  />


## 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() {

## 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>

## component-vs-markup.jsx
<Button type="button" className="btn btn--primary">

<PrimaryBtn>
	{
	"app/adapters/*.js": {
	"command": "adapter",
	"template": [
	"// export default DS.{capitalize}Adapter.extend();",
	]
	},

	"app/components/*.js": {
	"command": "component",
	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 () {
	# 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 fetchingResource = null;

	function AJAXBoilerplate () {
	if(fetchingResource) {
	fetchingResource.abort();
	}
	fetchingResource = $.ajax({
	url: '/resource',
	data: {},
	cache: false,
	const PrimaryBtn = ({
	className,
	...props
	}) =>
	<Btn
	className={classNames("btn--primary", className)}
	{...props}
	/>
	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() {
	<!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>
	<Button type="button" className="btn btn--primary">

	<PrimaryBtn>