React Base Fiddle (JSX)

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

by alirokni

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">test</div>
<div id="mount-point">https://scotch.io/tutorials/learning-react-getting-started-and-concepts</div>

CSS

.hello {
  font-size: 1.2 rem;
}
.break {display:block}

JavaScript 1.7

var Counter = React.createClass({
 incrementCount: function(){
   this.setState({
	    count: this.state.count * 2
	 });
 },
 getInitialState: function(){
  return {
	 count: 1
	}
 },
 render: function(){
   return(
	 <div class="hello">
     <span>{this.props.fname}, {this.props.lname},</span>
		 <b className="break">Counter: {this.state.count}</b>
		 <button type="button" onClick={this.incrementCount}>Increment</button>
	 </div>	 
   );
 }
});

ReactDOM.render(
	<Counter fname="Hello" lname="World" />,
	document.getElementById('container')
);
/*
var FilteredList = React.createClass({
  filterList: function(event){
    var updatedList = this.state.initialItems;
    updatedList = updatedList.filter(function(item){
      return item.toLowerCase().search(
        event.target.value.toLowerCase()) !== -1;
    });
    this.setState({items: updatedList});
  },
  getInitialState: function(){
     return {
       initialItems: [
         "Apples",
         "Broccoli",
         "Chicken",
         "Duck",
         "Eggs",
         "Fish",
         "Granola",
         "Hash Browns"
       ],
       items: []
     }
  },
  componentWillMount: function(){
    this.setState({items: this.state.initialItems})
  },
  render: function(){
    return (
      <div className="filter-list">
        <input type="text" placeholder="Search" onChange={this.filterList}/>
      <List items={this.state.items}/>
      </div>
    );
  }
});

var List = React.createClass({
  render: function(){
    return (
      <ul>
      {
        this.props.items.map(function(item) {
          return <li key={item}>{item}</li>
        })
       }
      </ul>
    )  
  }
});

ReactDOM.render(<FilteredList/>, document.getElementById('mount-point'));
*/