Edit

React.js cheatsheet
— Proudly sponsored by —

Airbrake.io Full-stack error tracking & analytics

for JS developers. Try it Free!
ethical ads via CodeFund

React is a JavaScript library for building user interfaces.

This guide targets React v15 to v16.

Components

import React from 'react'

import ReactDOM from 'react-dom'

class Hello extends React.Component {

render () {
return <div className='message-box'>
Hello {this.props.name}
</div>
}
}

const el = document.body
ReactDOM.render(<Hello name='John' />, el)

Use the React.js jsfiddle to start hacking. (or the

unofficial jsbin)

Import multiple exports

import React, {Component} from 'react'

import ReactDOM from 'react-dom'

class Hello extends Component {

...
}

Properties

<Video fullscreen={true} autoplay={false} />

render () {
this.props.fullscreen
const { fullscreen, autoplay } = this.props
···
}

Use this.props to access properties passed to the

component.

See: Properties

States

constructor(props) {
super(props)
this.state = { username: undefined }
}

this.setState({ username: 'rstacruz' })

render () {
this.state.username
const { username } = this.state
···
}

Use states (this.state) to manage dynamic data.

With Babel you can use proposal-class-fields and get rid

of constructor

class Hello extends Component {

state = { username: undefined };
...
}

See: States

Nesting

class Info extends Component {

render () {
const { avatar, username } = this.props

return <div>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</div>
}
}

As of React v16.2.0, fragments can be used to return

multiple children without adding extra wrapping nodes
to the DOM.

import React, {
Component,
Fragment
} from 'react'

class Info extends Component {

render () {
const { avatar, username } = this.props

return (
<Fragment>
<UserAvatar src={avatar} />
<UserProfile username={username} />
</Fragment>
)
}
}

Nest components to separate concerns.

See: Composing Components

Children

<AlertBox>
<h1>You have pending notifications</h1>
</AlertBox>

class AlertBox extends Component {

render () {
return <div className='alert-box'>
{this.props.children}
</div>
}
}

Children are passed as the children property.

# Defaults
Setting default props

Hello.defaultProps = {
color: 'blue'
}

See: defaultProps

Setting default state

class Hello extends Component {

constructor (props) {
super(props)
this.state = { visible: true }
}
}

Set the default state in the constructor().

And without constructor using Babel with proposal-

class-fields.

class Hello extends Component {

state = { visible: true }
}
}

See: Setting the default state

# Other components
Functional components

function MyComponent ({ name }) {

return <div className='message-box'>
Hello {name}
</div>
}

Functional components have no state. Also, their props

are passed as the first parameter to a function.

See: Function and Class Components

Pure components

import React, {PureComponent} from 'react'

class MessageBox extends PureComponent {

···
}

Performance-optimized version of React.Component.

Doesnʼt rerender if props/state hasnʼt changed.

See: Pure components

Component API

this.forceUpdate()

this.setState({ ... })
this.setState(state => { ... })

this.state
this.props

These methods and properties are available for

Component instances.

See: Component API

# Lifecycle
Mounting

constructor (props) Before rendering #

componentWillMount() Donʼt use this #

render() Render #

componentDidMount() After rendering (DOM

available) #

componentWillUnmount() Before DOM removal #

componentDidCatch() Catch errors (16+) #

Updating
Set initial the state on constructor(). Add DOM event
handlers, timers (etc) on componentDidMount(), then
remove them on componentWillUnmount()
componentDidUpdate .
(prevProps, prevState, snapshot)
setS
he
rem

co

shouldComponentUpdate (newProps, newState)

rend
r

render() R

componentDidUpdate (prevProps, prevState) Oper

# DOM nodes th

References
Called when parents change properties and
.setState(). These are not called for initial renders.

class MyComponent extends Component {

See: Component specs
render () {
return <div>
<input ref={el => this.input = el} />
</div>
}

componentDidMount () {
this.input.focus()
}
}

Allows access to DOM nodes.

See: Refs and the DOM

DOM Events

class MyComponent extends Component {

render () {
<input type="text"
value={this.state.value}
onChange={event => this.onChange(event)} />
}

onChange (event) {
this.setState({ value: event.target.value })
}
}

Pass functions to attributes like onChange.

See: Events

# Other features
Transferring props

<VideoPlayer src="video.mp4" />

class VideoPlayer extends Component {

render () {
return <VideoEmbed {...this.props} />
}
}

Propagates src="..." down to the sub-component.

See Transferring props

Top-level API

React.createClass({ ... })
React.isValidElement(c)

ReactDOM.render(<Component />, domnode, [callback])

ReactDOM.unmountComponentAtNode(domnode)

ReactDOMServer.renderToString(<Component />)
ReactDOMServer.renderToStaticMarkup(<Component />)

There are more, but these are most common.

See: React top-level API

# JSX patterns
Style shorthand

const style = { height: 10 }

return <div style={style}></div>

return <div style={{ margin: 0, padding: 0 }}></div>

See: Inline styles

Inner HTML

function markdownify() { return "<p>...</p>"; }

<div dangerouslySetInnerHTML={{__html: markdownify()}

See: Dangerously set innerHTML

Lists

class TodoList extends Component {

render () {
const { items } = this.props

return <ul>
{items.map(item =>
<TodoItem item={item} key={item.key} />)}
</ul>
}
}

Always supply a key property.

Conditionals

<Fragment>
{showMyComponent
? <MyComponent />
: <OtherComponent />}
</Fragment>

Short-circuit evaluation

<Fragment>
{showPopup && <Popup />}
...
</Fragment>

# New features
Returning multiple elements

You can return multiple elements as arrays or fragments.

Arrays

render () {
// Don't forget the keys!
return [
<li key="A">First item</li>,
<li key="B">Second item</li>
]
}

Fragments

render () {
// Fragments don't require keys!
return (
<Fragment>
<li>First item</li>
<li>Second item</li>
</Fragment>
)
}

See: Fragments and strings

Returning strings

render() {
return 'Look ma, no spans!';
}

You can return just a string.

See: Fragments and strings

Errors

class MyComponent extends Component {

···
componentDidCatch (error, info) {
this.setState({ error })
}
}

Catch errors via componentDidCatch. (React 16+)

See: Error handling in React 16

Portals

render () {
return React.createPortal(
this.props.children,
document.getElementById('menu')
)
}

This renders this.props.children into any location in

the DOM.

See: Portals

Hydration

const el = document.getElementById('app')
ReactDOM.hydrate(<App />, el)

Use ReactDOM.hydrate instead of using ReactDOM.render

if youʼre rendering over the output of ReactDOMServer.

See: Hydrate

# Property validation
PropTypes

import PropTypes from 'prop-types'

See: Typechecking with PropTypes

any Anything

Basic

string

number

func Function

bool True or false

Enum

oneOf(any) Enum types

oneOfType(type array) Union

Array

array

arrayOf(…)

Object

object

objectOf(…) Object with values of a certain type

instanceOf(…) Instance of a class

shape(…)
Basic types
Elements

element
MyComponent.propTypes = { React element
email: PropTypes.string,
seats:
node PropTypes.number, DOM node
callback: PropTypes.func,
Required
isClosed: PropTypes.bool,
any: PropTypes.any
(···).isRequired Required
}

Required types

MyCo.propTypes = {
name: PropTypes.string.isRequired
}

Elements

MyCo.propTypes = {
// React element
element: PropTypes.element,

// num, string, element, or an array of those

node: PropTypes.node
}

Enumerables (oneOf)

MyCo.propTypes = {
direction: PropTypes.oneOf([
'left', 'right'
])
}

Arrays and objects

MyCo.propTypes = {
list: PropTypes.array,
ages: PropTypes.arrayOf(PropTypes.number),
user: PropTypes.object,
user: PropTypes.objectOf(PropTypes.number),
message: PropTypes.instanceOf(Message)
}

MyCo.propTypes = {
user: PropTypes.shape({
name: PropTypes.string,
age: PropTypes.number
})
}

Use .array[Of], .object[Of], .instanceOf, .shape.

Custom validation

MyCo.propTypes = {
customProp: (props, key, componentName) => {
if (!/matchme/.test(props[key])) {
return new Error('Validation failed!')
}
}
}

# Also see
React website (reactjs.org)

React cheatsheet (reactcheatsheet.com)

Awesome React (github.com)

React v0.14 cheatsheet Legacy version

Search 380+ cheatsheets

Over 380 curated cheatsheets, by

developers for developers.

Devhints home

Other React cheatsheets

Redux cheatsheet Enzyme cheatsheet

Enzyme v2 cheatsheet

Awesome Redux cheatsheet

Flux architecture cheatsheet

React-router cheatsheet

Top cheatsheets

Elixir cheatsheet ES2015+ cheatsheet

Vimdiff cheatsheet Vim cheatsheet

Vim scripting cheatsheet

Capybara cheatsheet