Components are classes Bound methods

export class MyComponent extends Component { Bind methods to your component instance when used as handlers:
componentWillMount() {
export class MyComponent extends Component {
// ...
onMouseEnter = event => {
}
this.setState({hovering: true})
}
render() {
}
return <div>Hello World</div>
}
} Import

JSX assumes a Reactobject is available, so make sure to import it:

Static properties
import React, { Component, PropTypes } from 'react'
export class MyComponent extends Component {
static propTypes = {
Destructuring
// ...
} Especially useful with stateless function components:
static defaultProps = {
// ... export const Commas = ({items, ...otherProps}) =>
} <div {...otherProps}>{items.join(', ')}</div>
}
Template literals

Initial state Use to make dynamic class:

export class MyComponent extends Component { <input className={`Control-${this.state}`} />
state = {
disabled: this.props.disabled, And to sweeten your object literals with dynamic property names:
}
} this.setState({
[`${inputName}Value`]: e.target.value,
});
Constructors

Replace componentWillMount: Class decorators

export class MyComponent extends Component { Use in place of mixins:

constructor(props) {
@something(options)
super(props)
class MyComponent extends Component {}
// Do stuff
}
// Desugars to
}
let MyComponent = something(options)(
class MyComponent extends Components {}
2016 © James K Nelson - jamesknelson.com )