React Base Fiddle (JSX)

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

by Lore ZZ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/eventemitter3/2.0.3/index.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var allItems = []
allItems.push("Buy ingredients for Crock Pot");
allItems.push("Pick up chair at IKEA");
allItems.push("Go see mom");


class Client {

    /**
     * Initiate the event emitter
     */
  constructor() {
    this.eventEmitter = new EventEmitter();
  }

    /**
     * Adds the @listener function to the end of the listeners array
     * for the event named @eventName
     * Will ensure that only one time the listener added for the event
     *
     * @param {string} eventName
     * @param {function} listener
     */
  on(eventName, listener) {
    this.eventEmitter.on(eventName, listener); 
  }

    /**
     * Will temove the specified @listener from @eventname list
     *
     * @param {string} eventName
     * @param {function} listener
     */
  removeEventListener(eventName, listener) {
    this.eventEmitter.removeListener(eventName, listener);
  }

  /**
   * Will emit the event on the evetn name with the @payload
   * and if its an error set the @error value
   *
   * @param {string} event
   * @param {object} payload
   * @param {boolean} error
   */
  emit(event, payload, error = false) {
    this.eventEmitter.emit(event, payload, error);
  }


    /**
     * Returns the event emitter
     * Used for testing purpose and avoid using this during development
     */
  getEventEmitter() {
    return this.eventEmitter;
  }
}

var client = new Client();

class TodoList extends React.Component {
  constructor(props){
    super(props);
    this.addEvent = this.addEvent.bind(this);
  }
  // Listen for event
  componentWillMount() {
  	client.on('TODO_ADDED', this.addEvent);
  }
  
  componentWillUnmount(){
  	client.removeListener('TODO_ADDED', this.addEvent);
  }
  
  
  getInitialState() {
    return { allItems };
  }
  render() {
    var items = this.props.items.map((item) => {
      return <li><TodoItem item={item} /></li>;
    })
    return(
      <div>
        <ul>{items}</ul>
        <p><NewTodoItem /></p>
      </div>
    );
  }
 ...