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

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.
                           
 

Metadata

  • Languages:
  • Published: 7th May, 2017
  • Rated: 5 out of 5 stars based on 2 ratings

Favourited By

amitabha197 DianaD GlutenBoy theseth

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