The essentials Class components

1. React.createElement(type, props, children) var MyComponent = React.createClass({

displayName: 'MyComponent',
Create a ReactElementwith the given component class, propsand
children. /* ... options and lifecycle methods ... */
var link = React.createElement('a', {href: '#'}, "Save")
var nav = React.createElement(MyNav, {flat: true}, link) render: function() {
return React.createElement( /* ... */ )
2. React.cloneElement(element, props, children) },
Create a new ReactElement, merging in new propsand children. })

3. ReactDOM.render(element, domNode) Options

Take a ReactElement, and render it to a DOM node. E.g. propTypes object mapping prop names to types
getDefaultProps function() returning object
ReactDOM.render(
React.createElement('div'),
getInitialState function() returning object
)
document.getElementById('container') Lifecycle Methods
componentWillMount function()
4. ReactDOM.findDOMNode(element)
componentDidMount function()
Return the DOM node corresponding to the given element (after render). componentWillReceiveProps function(nextProps)
shouldComponentUpdate function(nextProps, nextState) -> bool
componentWillUpdate function(nextProps, nextState)
Special props
componentDidUpdate function(prevProps, prevState)
children is automatically added to this.propsby React.createElement. componentWillUnmount function()
className corresponds to the HTML classattribute.
htmlFor corresponds to the HTML forattribute.
key uniquely identifies a ReactElement. Used with elements in arrays. Component instances

ref accepts a callback function which will be called: Accessible as thiswithin class components
1. with the component instance or DOM node on mount. Stateless functional components do not have component instances.
2. with nullon unmount and when the passed in function changes. Serve as the object passed to refcallbacks
styleaccepts an object of styles, instead of a string. One component instance may persist over multiple equivalent ReactElements.
Properties
contains any props passed to React.createElement
propTypes
props
Available under React.PropTypes. Optionally append .isRequired. state contains state set by setStateand getInitialState
any array bool element func Methods
node number object string
1. setState(changes)applies the given changes to this.stateand re-renders
instanceOf(constructor) 2. forceUpdate()immediately re-renders the component to the DOM
oneOf(['News', 'Photos'])
oneOfType([propType, propType]) 2016 © James K Nelson - jamesknelson.com