Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

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.