React Cheat Sheet (0.14.

7) Supported Tags in JSX

PAGE 1
HTML Elements
import React from 'react'

⇒
a abbr address area article aside audio b base bdi
Create a component class, given a specification. A component
React.createClass( ReactComponent|Specification , CALLBACK? ) ReactClass implements a render method which returns one single child.
bdo big blockquote body br button canvas caption
cite code col colgroup data datalist dd del details
↳ let ExampleComponent = React.createClass({render: () => <div>Hi</div>}) OR ExampleComponent extends React.Component {...} dfn dialog div dl dt em embed fieldset figcaption
figure footer form h1 h2 h3 h4 h5 h6 head header

React.createElement( HTMLTag String|ReactClass , {PROPS}? , [CHILDREN...]? ) ⇒ ReactElement Create and return a new ReactElement of the given type.
hgroup hr html i iframe img input ins kbd keygen
label legend li link main map mark menu menuitem
meta meter nav noscript object ol optgroup option

React.cloneElement( HTMLTag String|ReactElement , {PROPS}? , [CHILDREN...]? ) ⇒ ReactElement

Clone and return a new ReactElement using element as the starting
point with shallow merged props.
output p param picture pre progress q rp rt ruby
s samp script sec vvbvtion select small source
span strong style sub summary sup table tbody td
React.createFactory( HTMLTag String|ReactElement ) ⇒ Function Return a function that produces ReactElements of a given type.
textarea tfoot th thead time title tr track u ul var
video wb

React.isValidElement( ReactElement ) ⇒ Boolean Verifies the object is a ReactElement. HTML Attributes

data -* aria -* accept acceptCharset accessKey

import ReactDOM from 'react-dom' action allowFullScreen allowTransparency alt async
autoComplete autoFocus autoPlay capture cellPadding
ReactDOM.render( ReactElement , DOMElement , CALLBACK? ) ⇒ ReactComponent Render a ReactElement into the DOM into supplied DOMElement.
cellSpacing challenge charSet checked classID
className colSpan cols content contentEditable

↳ ReactDOM.render(<ExampleComponent />, document.getElementById(‘react-app’))

contextMenu controls coords crossOrigin data
dateTime default defer dir disabled download

⇒
draggable encType form formAction formEncType
If this component has been mounted into the DOM, this returns the
ReactDOM.findDOMNode( ReactComponent ) DOMElement corresponding native browser DOM element.
formMethod formNoValidate formTarget frameBorder
headers height hidden high href hrefLang htmlFor

⇒ Remove a mounted React component from the DOM and clean up httpEquiv icon id inputMode integrity is keyParams
ReactDOM.unmountComponentAtNode( ReactComponent ) Boolean its event handlers and state.
keyType kind label lang list loop low manifest
marginHeight marginWidth max maxLength media
mediaGroup method min minLength multiple muted
import ReactDOMServer from 'react-dom/server' name noValidate nonce open optimum pattern
placeholder poster preload radioGroup readOnly rel
ReactDOMServer.renderToString( ReactElement ) ⇒ String Render a ReactElement to its initial HTML. required reversed role rowSpan rows sandbox scope
scoped scrolling seamless selected shape size sizes
span spellCheck src srcDoc srcLang srcSet start step
ReactDOMServer.renderToStaticMarkup( ReactElement ) ⇒ String
Similar to renderToString, except this doesn't create extra DOM
attributes such as data-react-id, that React uses internally.
style summary tabIndex target title type useMap
value width wmode wrap

Component API ExampleComponent extends React.Component {...} RDFa: about datatype inlist prefix property resource
typeof vocab

setState( Function *|{nextState} , CALLBACK? ) ⇒ void

Performs a shallow merge of nextState into current state and trig-
SVG Elements
METHODS

gers UI update. Callback after update. NEVER mutate this.state.

↳ * Function Signature: (previousState, currentProps) => {stateVariable: newValue, ...}

circle clipPath defs ellipse g image line linearGradient
mask path pattern polygoN polyline radialGradient
forceUpdate( CALLBACK? ) ⇒ void
Calling forceUpdate() will cause render() to be called on the compo-
nent, skipping shouldComponentUpdate(). Avoid usage.
rect stop svg text tspan

render() ⇒ ReactElement|void|null
A pure function that returns a ReactElement which relies upon SVG Attributes
CORE

props and state. REQUIRED.

clipPath cx cy d dx dy fill fillOpacity fontFamily
constructor( props ) { super(props); this.state = {...} } ⇒ StateObject Invoked once before the component is mounted, returns this.state. fontSize fx fy gradientTransform gradientUnits
markerEnd markerMid markerStart offset
opacity patternContentUnits patternUnits points
componentWillMount() ⇒ void
Invoked once, both on the client and server, immediately before the
initial rendering occurs.
preserveAspectRatio r rx ry spreadMethod stopColor
stopOpacity stroke strokeDasharray strokeLinecap
strokeOpacity strokeWidth textAnchor transform
componentDidMount() ⇒ Invoked once, only on the client (not on the server), immediately version viewBox x1 x2 x xlinkAcvtuate xlinkArcrole
LIFECYCLE METHODS

void after the initial rendering occurs. xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType
xmlBase xmlLang xmlSpace y1 y2 y
componentWillReceiveProps() ⇒ NextPropsObject
Invoked when a component is receiving new props. This method is
not called for the initial render.

shouldComponentUpdate( {NextProps} , {NextState} ) ⇒ Boolean

Invoked before rendering when new props or state are being
received. This method is not called for the initial render or when

componentWillUpdate( {NextProps} , {NextState} ) ⇒ void

Invoked immediately before rendering when new props or state are
being received. This method is not called for the initial render.

componentDidUpdate( {PreviousProps} , {PreviousState} ) ⇒ void

Invoked immediately after the component's updates are flushed to
the DOM. This method is not called for the initial render.

componentWillUnmount() ⇒ void
Invoked immediately before a component is unmounted from the
DOM.
 React Cheat Sheet (0.14.7) JSX Events
PAGE 2 Synthetic Event (default callback arg)
{
Boolean bubbles
Component API (cont'd) Boolean cancelable
DOMEventTarget currentTarget
NON-DOM TAGS
Boolean defaultPrevented
Number eventPhase
key <ExampleComponent key="uniqueValue" /> An optional, unique identifier. When your component shuffles
around during render passes, it might be destroyed and recreated Boolean isTrusted
DOMEvent nativeEvent
ref <ExampleComponent ref={ String|Callback } /> Reference to the React Component. ReactDOM.FindDOMNode(ref).
If a callback is used, the component will be passed to the function. void preventDefault()
Boolean isDefaultPrevented()
dangerouslySetInnerHTML <span dangerouslySetInnerHTML={ __HTML: String } /> Provides the ability to insert raw HTML, mainly for cooperating with
DOM string manipulation libraries.
void stopPropagation()
Boolean isPropagationStopped()
USEFUL PROPERTIES AND FEATURES DOMEventTarget target
Number timeStamp
String type
this.props.children <Component>{this.props.children}</Component> Will contain any nested children passed in from the parent
component. }
Clipboard
...
onCopy onCut onPaste
<ExampleComponent {...this.props} /> The Spread Operator (...) can be used to extract the entirety of an
object without the need to define every key. ( DOMDataTransfer clipboardData )

Stateless Syntax var HelloMsg = <div>Hello {props.name}</div> This defines a stateless component. Can
ReactDOM.render(<HelloMsg name="John" />.
Composition onCompositionEnd
onCompositionStart onCompositionUpdate
( String data )
PROPERTIES
Keyboard onKeyDown onKeyPress onKeyUp
This object defines the initial props values. It is cached and invoked ( Boolean altKey, Number charCode, Boolean
ReactComponentClass.defaultProps = DefaultPropertiesObject once when a class is instantiated. ctrlKey, Boolean getModifierState(key), String key,
Number keyCode, String locale, Number location,
The PropertiesSpecificationObject defines the contract a parent Boolean metaKey, Boolean repeat, Boolean
ReactComponentClass.propTypes = PropertiesSpecificationObject component must comply with when providing properties.
shiftKey, Number which )
↳ The PropertiesSpecificationObject can define the following property types (they are optional by default): Focus onFocus onBlur
→→ React.PropTypes.array ( DOMEventTarget relatedTarget )
→→ React.PropTypes.bool
→→ React.PropTypes.func
Form onChange onInput onSubmit

→→ React.PropTypes.number Mouse onClick onContextMenu onDoubleClick

→→ React.PropTypes.object onDrag onDragEnd onDragEnter onDragExit
→→ React.PropTypes.string onDragLeave onDragOver onDragStart onDrop
onMouseDown onMouseEnter onMouseLeave
→→ React.PropTypes.node (anything that can be rendered]) onMouseMove onMouseOut onMouseOver onMouseUp
→→ React.PropTypes.element (ReactElement) ( Boolean altKey, Number button, Boolean buttons,
→→ React.PropTypes.instanceOf(Message) (must be of javascript type) Number clientX, Number clientY, Boolean ctrlKey,
→→ React.PropTypes.oneOf(['News', 'Photos']) (specify enumerated values) Boolean getModifierState(key), Boolean metaKey,
→→ React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]) (limit property types) Number pageX, Number pageY, DOMEventTarget
→→ React.PropTypes.arrayOf(React.PropTypes.number) (limit to a typed array) relatedTarget, Number screenX, Number screenY,
→→ React.PropTypes.objectOf(React.PropTypes.number) (limit to a typed object) Boolean shiftKey )
→→ React.PropTypes.shape({color: React.PropTypes.string, fontSize: React.PropTypes.number}) (limit to object with specific keys/types)
→→ React.PropTypes.func.isRequired (produce an error if the property isn't passed to the child) Selection onSelect
→→ React.PropTypes.any.isRequired (can be any object but must be required) Touch onTouchCancel onTouchEnd onTouchMove
→→ (props, propName, componentName) => Boolean (create a custom property with the following function signature) onTouchStart
( Boolean altKey, DOMTouchList changedTouches,
↳ Example: ReactComponent.propTypes = { optionalArray: React.PropTypes.array, requiredFunction: React.PropTypes.func.isRequired };
Boolean ctrlKey, Boolean getModifierState(key),
Boolean metaKey, Boolean shiftKey, DOMTouchList
targetTouches, DOMTouchList touches )

UI onScroll ( Number detail, DOMAbstractView view )

Wheel onWheel ( Number deltaMode,

Number deltaX, Number deltaY, Number deltaZ )

Media onAbort onCanPlay onCanPlayThrough

onDurationChange onEmptied onEncrypted onEnded
onError onLoadedData onLoadedMetadata onLoadStart
onPause onPlay onPlaying onProgress onRateChange
onSeeked onSeeking onStalled onSuspend
onTimeUpdate onVolumeChange onWaiting
Image onLoad onError