React examples

component.md

Basic component ES6

import React, { Component } from 'react'

export default class Todo extends Component {
  static propTypes = {
    text: React.PropTypes.string.isRequired
  }

  constructor (props) {
    super(props)
    this.state = { name: props.initialName || '' };
    this._handleClick = this._handleClick.bind(this)
  }

  _handleClick (event) {
    console.log(this)
    this.setState({name: this.state.name + 1});
  }

  render () {
    return (
      <li onClick={this._handleClick}>{ this.props.text + ' ' + this.state.name }</li>
    )
  }
}

Todo.propTypes = { text: React.PropTypes.string.isRequired }
Todo.defaultProps = { text: '' }

ReactDOM.render(
  <Todo text={'textito'} />,    
  document.getElementById('container')
);

es7.md

Basic component BABEL stage-0

import React, { Component } from 'react'

export default class Todo extends Component {
  static propTypes = {
    text: React.PropTypes.string.isRequired
  }
  
  static defaultProps {
    text: ''
  }
  
  state = {
    name: this.props.initialName || ''
  }

  handleClick = (event) => {
    console.log(this)
    this.setState({name: this.state.name + 1});
  }

  render () {
    return (
      <li onClick={this.handleClick}>{ this.props.text + ' ' + this.state.name }</li>
    )
  }
}

ReactDOM.render(
  <Todo text={'textito'} />,    
  document.getElementById('container')
);