Cheatography
https://cheatography.com
React.js Reusability Checklist & General Cheat Sheet
Component Type #1 - Class-basedclass 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 - Functionalfunction MyComponent(props) {
return ( <div></div>);
} |
Define a component this way when you just need to render UI (no internal state required).
Synonymous with "Presentational Component". Lifecycle Hooksconstructor()
| Called before component is mounted | render()
| Never call setState() here | componentWillMount()
| Before rendering (no DOM yet) | componentDidMount()
| After rendering | componentWillUpdate()
| Can’t use setState() here | componentDidUpdate()
| Operate on the DOM here | componentWillReceiveProps()
| Use setState() here | shouldComponentUpdate()
| Skips render() if returns false |
Available PropTypesPropTypes.array
| Check if prop is an array | PropTypes.string
| Check if prop is a string | PropTypes.bool
| Check if prop is a boolean (true/false) | PropTypes.number
| Check if prop is a number | PropTypes.object
| Check if prop is an object | PropTypes.node
| Check if prop is anything that can
be rendered in a React component | PropTypes.func
| Check if prop is a function | PropTypes.element
| Check if prop is a React element | PropTypes.oneOf(['M', 'F''])
| Check if prop matches one of
these values | PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool
])
| Check if prop matches one of
these types | PropTypes.instanceOf(Class)
| Check if prop is an instance of a class | PropTypes.arrayOf(Array)
| Check if prop is an array of
some specific type | PropTypes.objectOf(PropTypes.number)
| Check if prop is an object with
property values of a specific type | PropTypes.shape({
potato: PropTypes.object,
turkey: PropTypes.string
})
| Check if prop object has a
particular "shape" | PropTypes.any
| Check if anything at all is passed |
| | Reusability 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 MyComponent extends Component {
static propTypes = {}
static defaultProps = {}
constructor(props) {
super(props);
}
render() {}
}
| Step #2 - Define the props & what type they are ...
static propTypes: {
className : PropTypes.string
isClosed : PropTypes.bool
email : PropTypes.string
}
...
| Step #3 - Determine which props are required or optional ...
static propTypes: {
className : PropTypes.string
isClosed : PropTypes.bool
email : PropTypes.string.isRequired
}
...
| Step #4 - Define the defaults (if applicable) ...
static defaultProps: {
className : "btn"
isClosed : true
}
...
|
You can custom validate a prop...
static propTypes: {
email: ((props, propName) => {
const regex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (!regex.test(props[propName])) {
return new Error('Invalid email!');
}
})
}
... |
Other APIssetState(updater, [callback])
| Component will re-render
with new state | forceUpdate()
| Calls render(),
skips shouldComponentUpdate() |
Next StepsKnowing how to create reusable components is step 1. | Then you need to learn how to architect professional apps using React & Redux. | |
|
Help Us Go Positive!
We offset our carbon usage with Ecologi. Click the link below to help us!
Created By
hackingbeauty.com
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets