michaelrambeau/file0.txt

## file0.txt
var MyComponent = React.createClass({

  getDefaultProps: function() {
    return {
      title: 'My defaut title'
    };
  },

  getInitialState: function() {
    return {
      counter: 0
    };
  },

  onClick: function () {
    this.setState({
      counter: this.state.counter + 1
    });
  },

  render: function() {
    return (
      <div>
        { this.props.title }
        { this.state.counter }
        <button onClick={ this.onClick }>INCREMENT</button>
      </div>
    );
  }

});

## file1.txt
var options = {
  title: 'My component'
};
React.render(
  React.createElement(MyComponent, options),
  document.getElementById('app')
);

## file10.txt
<button>Cancel</button>
{' '}
<button>OK</button>

## file11.txt
<body>
  <br>
  <MyApp>
</body>

=> Error "Expected corresponding XJS closing tag for MyApp"

## file12.txt
<body>
  <br />
  <MyApp />
</body>

=> OK!

## file13.txt
  onDeleteAll: function (event) {

  },
  render: function() {
    return (
     <button onClick={ this.onDeleteAll }>Delete All</button>
    );
  }

## file14.txt
  onEmailAction: function (email, actionCode, event) {

  },
  render: function() {
    return (
      <button
        onClick={ this.onEmailAction.bind(null, email, 'MARK_AS_READ') }>
        Mark as read
      </button>
    );
  }

## file15.txt
var EmailFilterList = React.createClass({
  mixins: [FilterListEventMixin],
  render: function() {
  ...


## file16.txt
var MySection = React.createClass({...});
MySection.Title = React.createClass({...});
MySection.Body = React.createClass({...});


## file17.txt
<MySection>
  <MySection.Title>My title</MySection.Title>
  <MySection.Body>
    ...
  </MySection.Body>
</MySection>

## file18.txt
React.createClass({
  propTypes: {
    myOptionalArray: React.PropTypes.array
  }
  ...

## file19.txt
  myRequiredArray: React.PropTypes.array.isRequired

## file2.txt
<MySubComponent items={ ['A', 'B'] } onSave={ saveFunction } />

## file3.txt
<button className="btn btn-default">

## file4.txt
{ term == 'yearly' && (
  <p>10%値引き<p>
) }

## file5.txt
{ term == 'monthly' ? (
  <span>1ヶ月</span>
) : (
  <span>12ヶ月</span>
)}

## file6.txt
<span>{ term == 'monthly' ? '1ヶ月' : '12ヶ月' }</span>

## file7.txt
render: function() {
  var menuItem = function(i) {
    return(
      <li>
        <span>{'STEP' + i }</span>
      </li>
    );
  };

  return(
　  <ul>
  　  { [1, 2, 3].map(menuItem) }
　  </ul>
  );
}

## file8.txt
style={{ float: 'right', padding: 10 }}

## file9.txt
componentDidMount: function () {
  var el = this.getDOMNode();
  var $el = $(el);
  var $form = $el.find('form');
  $form.mySuperPlugin();
}
	var MyComponent = React.createClass({

	getDefaultProps: function() {
	return {
	title: 'My defaut title'
	};
	},

	getInitialState: function() {
	return {
	counter: 0
	};
	},

	onClick: function () {
	this.setState({
	counter: this.state.counter + 1
	});
	},

	render: function() {
	return (
	<div>
	{ this.props.title }
	{ this.state.counter }
	<button onClick={ this.onClick }>INCREMENT</button>
	</div>
	);
	}

	});
	var options = {
	title: 'My component'
	};
	React.render(
	React.createElement(MyComponent, options),
	document.getElementById('app')
	);
	<body>
	<br>
	<MyApp>
	</body>

	=> Error "Expected corresponding XJS closing tag for MyApp"
	onDeleteAll: function (event) {

	},
	render: function() {
	return (
	<button onClick={ this.onDeleteAll }>Delete All</button>
	);
	}
	onEmailAction: function (email, actionCode, event) {

	},
	render: function() {
	return (
	<button
	onClick={ this.onEmailAction.bind(null, email, 'MARK_AS_READ') }>
	Mark as read
	</button>
	);
	}
	var EmailFilterList = React.createClass({
	mixins: [FilterListEventMixin],
	render: function() {
	...
	var MySection = React.createClass({...});
	MySection.Title = React.createClass({...});
	MySection.Body = React.createClass({...});
	<MySection>
	<MySection.Title>My title</MySection.Title>
	<MySection.Body>
	...
	</MySection.Body>
	</MySection>
	React.createClass({
	propTypes: {
	myOptionalArray: React.PropTypes.array
	}
	...
	{ term == 'monthly' ? (
	<span>1ヶ月</span>
	) : (
	<span>12ヶ月</span>
	)}