Show Menu
Cheatography

React Reusability Cheat Sheet by

React.js Reusability Checklist & General Cheat Sheet

Component Type #1 - Class-­based

class MyComponent extends Component {
 static propTypes    = {}
 static defaultProps = {}

  constructor(props) {
    super(props);
    this.state = { // state keys go here }
  }

  render() { }
}
Define a component this way when you need to maintain internal state.

Component Type #2 - Functional

function MyComponent(props) {
  return ( <div></div>);
}
Define a component this way when you just need to render UI (no internal state required).
Synonymous with "­Pre­sen­tat­ional Compon­ent­".

Lifecycle Hooks

const­ruc­tor()
Called before component is mounted
render()
Never call setState() here
compo­nen­tWi­llM­ount()
Before rendering (no DOM yet)
compo­nen­tDi­dMo­unt()
After rendering
compo­nen­tWi­llU­pda­te()
Can’t use setSt­ate() here
compo­nen­tDi­dUp­date()
Operate on the DOM here
compo­nen­tWi­llR­ece­ive­Pro­ps()
Use setSt­ate() here
shoul­dCo­mpo­nen­tUp­date()
Skips render() if returns false

Available PropTypes

PropT­ype­s.a­rray
Check if prop is an array
PropT­ype­s.s­tring
Check if prop is a string
PropT­ype­s.bool
Check if prop is a boolean (true/­false)
PropT­ype­s.n­umber
Check if prop is a number
PropT­ype­s.o­bject
Check if prop is an object
PropT­ype­s.node
Check if prop is anything that can
be rendered in a React component
PropT­ype­s.func
Check if prop is a function
PropT­ype­s.e­lement
Check if prop is a React element
PropT­ype­s.o­neO­f(['M', 'F''])
Check if prop matches one of
these values
PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.bool
])
Check if prop matches one of
these types
PropT­ype­s.i­nst­anc­eOf­(Cl­ass)
Check if prop is an instance of a class
PropT­ype­s.a­rra­yOf­(Ar­ray)
Check if prop is an array of
some specific type
PropT­ype­s.o­bje­ctO­f(P­rop­Typ­es.n­um­ber)
Check if prop is an object with
property values of a specific type
PropT­ype­s.s­hape({
  potato: PropTypes.object,
  turkey: PropTypes.string
})
Check if prop object has a
particular "­sha­pe"
PropT­ype­s.any
Check if anything at all is passed
 

Reusab­ility Checklist (ES6)

Step #1 -Define your component and import PropTypes
from the 'prop-­types' package
import React, { Component } from 'react';
import PropTypes  ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ from 'prop-­types';

class MyComp­onent extends Component {
 ­ ­static propTypes  ­ ­ = {}
 ­ ­static defaul­tProps = {}

 ­ ­con­str­uct­or(­props) {
 ­ ­ ­ ­sup­er(­props);
 ­ }

 ­ ­ren­der() {}
}
Step #2 - Define the props & what type they are
...
static propTypes: {
 ­ ­cla­ssName  : PropTy­pes.string
 ­ ­isC­losed  ­ : PropTy­pes.bool
 ­ ­email  ­ ­ ­ ­ : PropTy­pes.string
}
...
Step #3 - Determine which props are required or optional
...
static propTypes: {
 ­ ­cla­ssName  : PropTy­pes.string
 ­ ­isC­losed  ­ : PropTy­pes.bool
 ­ ­email  ­ ­ ­ ­ : PropTy­pes.st­rin­g.i­sRe­quired
}
...
Step #4 - Define the defaults (if applic­able)
...
static defaul­tProps: {
 ­  classN­ame­ : "btn"
 ­  isClos­ed  : true
}
...

You can custom validate a prop

...
static propTypes: {
  email: ((props, propName) => {
    const regex = /^\w+@­[a-­zA-­Z_]­+?\.[a­-zA­-Z]­{2,­3}$/;
  ­ ­ ­if (!rege­x.t­est­(pr­ops­[pr­opN­ame])) {
  ­ ­ ­ return new Error(­'In­valid email!');
  ­ ­ ­}
  })
}
...

Other APIs

setSt­ate­(up­dater, [callb­ack])
Component will re-render
with new state
force­Upd­ate()
Calls rende­r(),
skips shoul­dCo­mpo­nen­tUp­date()

Next Steps

Knowing how to create reusable components is step 1.
Then you need to learn how to architect profes­sional apps using React & Redux.
                           

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          CSS2 Cheat Sheet
          PHP Cheat Sheet
          JavaScript Cheat Sheet