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

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.
                           
 

Metadata

  • Languages:
  • Published: 7th May, 2017
  • Rated: 5 stars based on 1 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

          CSS2 Cheat Sheet
          PHP Cheat Sheet
          JavaScript Cheat Sheet