const root = () => 
             <ul className="my-list">
               <li>Text Content</li>
             </ul>;

ReactDOM.render(root, 
  document.getElementById('example'));

class Avatar extends React.Component {
  render() {
    return (
      <div>
        <Pic username={this.props.user} />
        {this.props.user}
      </div>
    );
  }
}

ReactDOM.render(
  <Avatar user="pwh" />,
  document.getElementById('example')
);

const root = function(container) {
  const ul = container.selectAll('ul')
    .data([null])
    .enter()
    .append('ul')
    .classed('my-list')
    .append('li')
    .text('Text Content');
};

d3.select('#element')
  .call(root);

const avatar = function(selection) {
  const div = selection.selectAll('div')
    .data((data) => [data]);

  div.enter()
    .append('div');

  div.datum((d) => { user: d.user })
    .call(pic)
    .text((d) => d.user);
};

d3.select('#element')
  .datum({ user: 'pwh' })
  .call(avatar);

function componentFactory() {
  var event = d3.dispatch('customevent');

  function component(selection) {
    d3.select(this)
      .classed('active', function(d) {
        return d.toggle;
      })
      .on('click.component', function() {
          event.customevent.apply(
            this, arguments);
      });
  }
  d3.rebind(component, event, 'on');

  return component;
}

var model = {
  toggle: false
};

var rootComponent = componentFactory()
  .on('customevent', function() {
    model.toggle = !model.toggle;
    render();
  });

function render() {
  d3.select('#element')
    .datum(model)
    .call(rootComponent);
}

render();

var list = Immutable.List.of(1, 2, 3);

list.get(0);                // 1

list.set(0, 2); 
list.get(0);                // 1

var list2 = list.set(0, 2);
list === list2;             // false
list.get(0);                // 2

var list3 = list.set(0, 1);
list === list3;             // true

var map = Immutable.Map({ a: 1, b: 2 });

map.get('a');                // 1

map.set('a', 2);
map.get('a');                // 1

var map2 = map.set('a', 2);
map === map2;                // false
map.get('a');                // 2

var map3 = map.set('a', 1);
map === map3;                // true

var Record = Immutable.Record({ a: 1, b: 2 });

var record = Record();

record.get('a');              // 1
record.a;                     // 1

var record2 = record.set('a', 3);

// Can't do this
// record.a = '3';