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
