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

constr­uctor()
Called before component is mounted
render()
Never call setState() here
compon­ent­Wil­lMo­unt()
Before rendering (no DOM yet)
compon­ent­Did­Mount()
After rendering
compon­ent­Wil­lUp­date()
Can’t use setState() here
compon­ent­Did­Upd­ate()
Operate on the DOM here
compon­ent­Wil­lRe­cei­veP­rops()
Use setState() here
should­Com­pon­ent­Upd­ate()
Skips render() if returns false

Available PropTypes

PropTy­pes.array
Check if prop is an array
PropTy­pes.string
Check if prop is a string
PropTy­pes.bool
Check if prop is a boolean (true/­false)
PropTy­pes.number
Check if prop is a number
PropTy­pes.object
Check if prop is an object
PropTy­pes.node
Check if prop is anything that can
be rendered in a React component
PropTy­pes.func
Check if prop is a function
PropTy­pes.el­ement
Check if prop is a React element
PropTy­pes.on­eOf­(['M', 'F''])
Check if prop matches one of
these values
PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.bool
])
Check if prop matches one of
these types
PropTy­pes.in­sta­nce­Of(­Class)
Check if prop is an instance of a class
PropTy­pes.ar­ray­Of(­Array)
Check if prop is an array of
some specific type
PropTy­pes.ob­jec­tOf­(Pr­opT­ype­s.n­umber)
Check if prop is an object with
property values of a specific type
PropTy­pes.sh­ape({
  potato: PropTypes.object,
  turkey: PropTypes.string
})
Check if prop object has a
particular "­sha­pe"
PropTy­pes.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

setSta­te(­upd­ater, [callb­ack])
Component will re-render
with new state
forceU­pdate()
Calls render(),
skips should­Com­pon­ent­Upd­ate()

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.
                           
 

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

          PHP Cheat Sheet
          JavaScript Cheat Sheet