React Base Fiddle (JSX)

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

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-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.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>

React

class App extends React.Component {
  render() {

    return ( <
      Contacts / >
    );
  }
}

class Contacts extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        contactData: [{
            name: "김태영",
            phone: "010-0000-0001"
          },
          {
            name: "taeyo",
            phone: "010-0000-0002"
          },
          {
            name: "Charlie",
            phone: "010-0000-0003"
          },
          {
            name: "David",
            phone: "010-0000-0004"
          }
        ],
        selectedKey: -1
      };
    }

    _insertContact(name, phone) {
      let newState = React.addons.update(this.state, {
        contactData: {
          $push: [{
            "name": name,
            "phone": phone
          }]
        }
      });
      this.setState(newState);
    }

    _onSelect(key) {
      if (key == this.state.selectedKey) {
        console.log("key select cancelled");
        this.setState({
          selectedKey: -1
        });
        return;
      }

      this.setState({
        selectedKey: key
      });
      console.log(key + " is selected");
    }

    _isSelected(key) {
      if (this.state.selectedKey == key) {
        return true;
      } else {
        return false;
      }
    }


    render() {
      return ( <
        div >
        <
        h1 > Contacts < /h1> <
        ul > {
          this.state.contactData.map((contact, i) => {
              return ( < ContactInfo name = {
                  contact.name
                }
                phone = {
                  contact.phone
                }
                key = {
                  i
                }
                contactKey = {
                  i
                }
                isSelected = {
                  this._isSelected.bind(this)(i)
                }
                onSelect = {
                  this._onSelect.bind(this)
                }
                />);
             ...