React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by sffriend

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.track-card {
	width: 100px;
	height: 50px;
	margin: 5px;
	border: 1px solid black;
	padding: 5px;
	cursor: pointer;
}

JavaScript 1.7

class TrackCard extends React.Component {
	constructor() {
		super();
		this. _handleClick = this. _handleClick.bind(this);
	}
	render() {
		let cssClasses = 'track-card';
		return (
		  <div className={cssClasses} onClick={this._handleClick}>
			<div>{this.props.track.name}</div>
			<div>{this.props.track.icon}</div>
		  </div>
		)
	}
  	_handleClick() {
  		alert(this); // this is an ExampleComponent
 	}
}

/* class SectionList extends React.Component {
	constructor() {
		super();
	}
	render() {
		let cssClasses = 'section_of_tracks';
		return (
		  <div className={cssClasses}>
			this.props.sections.forEach(function(track) {
				<div>{this.props.track.name}</div>
				<div>{this.props.track.icon}</div>
			});
		  </div>
		)
	}
} */

class TrackList extends React.Component {
	render () {
    var rows = [];
    this.props.tracks.forEach(function(track) {
        rows.push(<TrackCard key={track.name} track={track} />);
    });
    return (
      <div>
        <div>{rows}</div>
      </div>
    )
	}
}

class DashboardHeader extends React.Component {
	render () {
        return (
        <div>
        	<div>Type</div>
        </div>
        )
   }
}

class Dashboard extends React.Component {
	render () {
        return (
        <div>
        	<div>
          	<DashboardHeader />
            <TrackList tracks={TRACKS} />
          </div>
        </div>
        )
   }
}
 
var TRACKS = [ {name:'Math', icon: 'hello'}, {name:'Science', icon: 'hello'}];
var CONTESTS = [ {name:'Math', icon: 'hello'}, {name:'Science', icon: 'hello'}];

ReactDOM.render(
  <Dashboard tracks={TRACKS} contests={CONTESTS} />,
  document.getElementById('container')
);