Никита Гущин

class ListItem extends React.PureComponent {
  handleClick = () => {
    const { src, label, onClick } = this.props

    return onClick(src, label)
  }

  render() {
    const { src, label, onClick } = this.props

    return (
      <li onClick={onClick && this.handleClick}>
        <img src={src} />
        <span>{label}</span>
      </li>
    )
  }
}

<ListItem src="/uploads/0.png" label="Test" onClick={this.select} />

const emptyContacts = {
  address: '' ,
  email: '',
}

var Contact = React.createClass({
    getInitialState: function() {
      return {
       contactData: emptyContacts,
      }
    },
    toggleContactsData: function(event) {
        this.setState({
            contactData: thsi.state.contactsData === emptyContacts
              ? { address: this.props.address, email: this.props.email, }
              : emptyContacts
        });
    },

    render:function() {
      return (
        <li className="contact" onClick={this.toggleContactsData}>
          <img className="contact-image" src={this.props.image} width="68px" height="68px"/>
          <div className="contact-info">
            <div className="contact-name" >{this.props.name}</div>
            <div className="contact-number" >{this.props.phoneNumber}</div>
            <div>{this.state.contactData.address}</div>
            <div>{this.state.contactData.email}</div>
          </div>
        </li>
      )

    }
  });

class Item extends React.PureComponent {
  render() {
    const { name, color } = this.props

    return (
      <li>
         <b>{name} ({color})</b>
      </li>
    )
  }
}


class ItemsList extends React.PureComponent {
  render() {
    const { items } = this.props

    return (
      <ul>
        {items.map(item => (
          <Item key={item.id} {...item} />
        )}
      </ul>
    )
  }
}

Я пометил при вызове компонента его ref'ом и пнул его setState()

как правильно отследить клик по селектору? Передавать callback и в props компонента его обрабатывать?

<Route path="/" component={App}>
  <Route path="list" component={ListComponent} wrapperClass="wrapper--list" />
</Route>

render() {
  // routes - это массив роутов для текущей локации
  // если взять за основу конфигурацию роутов, которую я привел выше,
  // то при переходе по пути /list в массиве будет два элемента.
  const { children, routes } = this.props
  const wrapperClass = (_.findLast(routes, route => !!route.wrapperClass) || {}).wrapperClass
  
  return (
    <div className={wrapperClass}>
      {children}
    </div>
  )
}

let newState = Object.assign(state, {messages:action._data, loading:false});

class MyClickableComponent extends React.PureComponent {
  construct(props, context) { 
    super(props, context)

    this.state = {
      isOpen: false,
    }
  }

  handleClick = e => {
    this.setState({ isOpen: true })
  }

  render() {
   const { isOpen } = this.state

    return (
      <div>
        <div onClick={this.handleClick }>click on me</div>
        {isOpen && (
          <b>opened!</b>
        )}
      </div>
    )
  }
}

ReactDOM.render(
        <div>
            <Month />
                   <MyClickableComponent  />
            <Content />
        </div>,
  document.getElementById('root')
);

//  enable runtime transpilation to use ES6/7 in node

var fs = require('fs');

var babelrc = fs.readFileSync('./.babelrc');
var config;

try {
  config = JSON.parse(babelrc);
} catch (err) {
  console.error('==>     ERROR: Error parsing your .babelrc.');
  console.error(err);
}

require('babel-register')(config);

class Avatar extends React.Component {
  render() {
    const finalClassName = 'avatar ' + (this.props.className || '')
    return (
      <img className={finalClassName} src={this.props.user.avatarUrl} alt={this.props.user.name} />
    );
  }
}


class UserInfo extends React.Component {
  render() {
    return (
      <div className="user-info">
        <Avatar className="user-info__avatar" user={this.props.user} /> 
        <div className="user-info__name">{this.props.user.name}</div>
      </div>
    );
  }
}

// выражение в скобочках нужно, чтобы не получилось 'avatar undefined', когда className не передан.
// Я рекомендую указать className, равное '', в defaultProps компонента Avatar
const finalClassName = 'avatar ' + (this.props.className || '')

const finalClassName = classnames({
  'avatar': true,
  [this.props.className]: !!this.props.className,
  'some-other-class': someCondition
})

<Route path="/" component={App}>
  <Route onEnter={checkAuth}>{/* Auth routes */}</Route>
  {/* Home page route */}
  <IndexRoute component={Home}>
  {/* Other public routes /*}
  <Route path="about" component={AboutPage} />
</Route>