cheatsheets/react.md

title	category	layout	ads	tags	updated	weight
React.js	React	2017/sheet	true	Featured	2017-08-26	-10

{%raw%}

Components

{: .-three-column}

Components

{: .-prime}

import React from 'react'
import ReactDOM from 'react-dom'

{: .-setup}

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)

Properties

<Video fullscreen={true} />

{: .-setup}

render () {
  this.props.fullscreen
  ···
}

{: data-line="2"}

Use this.props to access properties passed to the component. See: Properties

States

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

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

Use states (this.state) to manage dynamic data. See: States

Function 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

Nesting

class Info extends React.Component {
  render () {
    const { avatar, username } = this.props

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

{: data-line="6,7"}

Nest components to separate concerns. See: Composing Components

Setting default props

Hello.defaultProps = {
  color: 'blue'
}

See: defaultProps

Setting default state

class Hello extends React.Component {
  constructor (props) {
    super(props)
    this.state = { visible: true }
  }
}

{: data-line="4"}

Set the default state in the constructor().

Children

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

{: data-line="4"}

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

Children are passed as the children property.

Component API

this.forceUpdate()

this.setState({ ... })

this.state
this.props

These methods and properies are available for Component instances. See: Component API

Lifecycle

{: .-two-column}

Mounting

Method	Description
constructor (props)	Before rendering #
componentWillMount()	Don't use this #
render()	Render #
componentDidMount()	After rendering (DOM available) #
---	---
componentWillUnmount()	Before DOM removal #

Set initial the state on constructor(). Add DOM event handlers, timers (etc) on componentDidMount(), then remove them on componentWillUnmount().

Updating

Method	Description
componentWillReceiveProps (newProps)	Use setState() here
shouldComponentUpdate (newProps, newState)	Skips render() if returns false
componentWillUpdate (newProps, newState)	Can't use setState() here
render()	Render
componentDidUpdate (prevProps, prevState)	Operate on the DOM here

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

DOM nodes

{: .-two-column}

References

class MyComponent extends React.Component {
  render () {
    return <div>
      <input ref={el => this.input = el} />
    </div>
  }

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

{: data-line="4,9"}

Allows access to DOM nodes. See: Refs and the DOM

DOM Events

class MyComponent extends React.Component {
  render () {
    <input type="text"
        value={this.state.value}
        onChange={event => this.onChange(event)} />
  }

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

{: data-line="5,9"}

Pass functions to attributes like onChange. See: Events

Other features

Transfering props

<VideoPlayer src="video.mp4" />

{: .-setup}

class VideoPlayer extends React.Component {
  render () {
    return <VideoEmbed {...this.props} />
  }
}

{: data-line="3"}

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 />)

JSX patterns

{: .-two-column}

Style shorthand

var 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 React.Component {
  render () {
    const { items } = this.props

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

{: data-line="6,7"}

Always supply a key property.

Conditionals

<div>
  {showPopup
    ? <Popup />
    : null}
</div>

Property validation

{: .-three-column}

PropTypes

import PropTypes from 'prop-types'

{: .-setup}

See: Typechecking with PropTypes

PropType	Description
any	Anything
---	---
string
number
func	Function
bool	True or false
---	---
oneOf(any)	Enum types
oneOfType(type array)	Union
---	---
array
arrayOf(...)
---	---
object
objectOf(...)	Object with values of a certain type
instanceOf(...)	Instance of a class
shape(...)
---	---
element	React element
node	DOM node
---	---
.isRequired	Required

Basic types

MyComponent.propTypes = {
  email:      PropTypes.string,
  seats:      PropTypes.number,
  callback:   PropTypes.func,
  isClosed:   PropTypes.bool,
  any:        PropTypes.any
}

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!')
    }
  }
}

Examples

{: .-left-reference}

Basic example

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).

Try it

Open in jsbin {: target="_blank"}

Also see

{: .-one-column}

• This reference was made for React v15.
• React v0.14 cheatsheet Legacy version
• React website facebook.github.io {:.-also-see}

{%endraw%}