Show Menu
Cheatography

REACTJS Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Components

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


class Hello extends React.C­om­ponent {
render () {
return <div classN­ame­='m­ess­age­-bo­x'>
Hello {this.p­ro­ps.n­ame}
</d­iv>
}
}

const el = docume­nt.body
ReactD­OM.r­en­der­(<Hello name='­John' />, el)

Use the React.js jsfiddle to start hacking. (or the unofficial jsbin)
 

Properties

<Video fullsc­ree­n={­true} />
render () {
this.p­rop­s.f­ull­screen
···
}

Use this.props to access properties passed to the component.

See: Properties

Nesting

class Info extends React.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.
 

States

constructor(props) {
  super(props)
  this.state = {}
}

this.setState({ username: 'rstacruz' })
render () {
  this.state.username
  ···
}
Use states (this.s­tate) to manage dynamic data.

See: States

Children

<AlertBox>
  <h1>You have pending notifications</h1>
</AlertBox>
 
class AlertBox extends React.Component {
  render () {
    return <div className='alert-box'>
      {this.props.children}
    </div>
  }
}
Children are passed as the children property.