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. | |
|
Created By
hackingbeauty.com
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets