The essentials

1.

2.
3.

4.

Class components

React.createElement(type, props, children)

Create a ReactElementwith the given component class, propsand

children.
var link = React.createElement('a', {href: '#'}, "Save")
var nav = React.createElement(MyNav, {flat: true}, link)
React.cloneElement(element, props, children)

Create a new ReactElement, merging in new propsand children.

ReactDOM.render(element, domNode)

Take a ReactElement, and render it to a DOM node. E.g.

ReactDOM.render(
React.createElement('div'),
document.getElementById('container')
)

var MyComponent = React.createClass({

displayName: 'MyComponent',
/* ... options and lifecycle methods ... */
render: function() {
return React.createElement( /* ... */ )
},
})

Options
propTypes
getDefaultProps
getInitialState

Lifecycle Methods

ReactDOM.findDOMNode(element)

Return the DOM node corresponding to the given element (after render).

Special props

is automatically added to this.propsby React.createElement.

corresponds to the HTML classattribute.
corresponds to the HTML forattribute.
uniquely identifies a ReactElement. Used with elements in arrays.
accepts a callback function which will be called:
1. with the component instance or DOM node on mount.
2. with nullon unmount and when the passed in function changes.
styleaccepts an object of styles, instead of a string.

children
className
htmlFor
key
ref

componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount

Available under React.PropTypes. Optionally append .isRequired.

array

bool

element

node

number

object

string

instanceOf(constructor)
oneOf(['News', 'Photos'])
oneOfType([propType, propType])

func

function()
function()
function(nextProps)
function(nextProps, nextState)
function(nextProps, nextState)
function(prevProps, prevState)
function()

-> bool

Component instances

Accessible as thiswithin class components

Stateless functional components do not have component instances.
Serve as the object passed to refcallbacks
One component instance may persist over multiple equivalent ReactElements.

Properties

propTypes

any

mapping prop names to types

returning object
returning object

object
function()
function()

contains any props passed to React.createElement

contains state set by setStateand getInitialState

props
state

Methods
1. setState(changes)applies the given changes to this.stateand re-renders
2. forceUpdate()immediately re-renders the component to the DOM
2016 James K Nelson - jamesknelson.com