REACTJS Cheat Sheet

by restran via cheatography.com/64008/cs/16540/

Components Nesting Children

import React from 'react' class Info extends React.Component <AlertBox>

import ReactDOM from 'react​-dom' { ​ ​<h1​>You have pending
class Hello extends render () { notifi​cat​ion​s</​h1>
React.C​om​ponent { const { avatar, username } = </A​ler​tBo​x>
render () { this.p​rops
return <div classN​ame​='m​ess​age​- ​ return <di​v> class AlertBox extends
bo​x'> <Us​erA​vatar src={a​vatar} /> React.C​om​ponent {
Hello {this.p​ro​ps.n​ame} <Us​erP​rofile userna​me=​{us​ername} /> ​ ​render () {
</​div​> </d​iv> ​ ​ ​ ​return <div classN​ame​='a​ler​t-
} } b​ox'>
} } ​ ​ ​ ​ ​ ​{th​is.p​ro​ps.c​hi​ldren}
const el = docume​nt.b​ody ​ ​ ​ ​</d​iv>
As of React v16.2.0, fragments can be used to
React​DOM.re​nde​r(<​Hello name='​John' return multiple children without adding extra ​ }
/>, el) wrapping nodes to the DOM. }
Use the React.js jsfiddle to start
Children are passed as the children property.
hacking. (or the unofficial jsbin) States

constructor(props) {
Properties
​ ​sup​er(​props)
<Video fullsc​ree​n={​true} /> ​ ​thi​s.state = {}
render () { }
this.p​rop​s.f​ull​screen this.s​etS​tate({ username:
··· 'rstacruz' })
} render () {
Use this.props to access properties ​ ​thi​s.s​tat​e.u​sername
passed to the compon​ent. ​ ···
See: Proper​ties }

Use states (this.s​tate) to manage dynamic

data.

See: States

By restran Not published yet. Sponsored by ApolloPad.com

cheatography.com/restran/ Last updated 1st August, 2018. Everyone has a novel in them. Finish Yours!
Page 1 of 1. https://apollopad.com